HTMLのreadOnly属性とは？読み取り専用フィールドの使い方を解説
HTMLのreadOnly属性は、<input>要素や<textarea>要素を読み取り専用にするための属性です。この属性を指定すると、ユーザーはフォームフィールドの内容を編集できなくなりますが、テキストの選択やコピーは引き続き可能です。
readOnly属性の基本構文
readOnly属性は論理属性（ブール型属性）のため、値を指定せずに記述します。基本構文は以下の通りです。
<tagname readOnly></tagname>
readOnly属性が使える要素
readOnly属性を指定できるのは、テキスト入力系の要素のみです。主な対象は以下の通りです。
<input type="text">などテキスト入力系のtypeを持つinput要素<textarea>
なお、チェックボックス・ラジオボタン・セレクトボックスなどにはreadOnly属性は適用されません。これらを操作不可にしたい場合は、disabled属性を使用します。
使用例
実際にreadOnly属性を使ったサンプルコードを見てみましょう。
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
input {
display: block;
width: 50%;
margin: 1rem auto;
text-align: center;
}
</style>
<body>
<h1>HTML readOnly Demo</h1>
<input type="text" value="I'm an input element with readOnly property" readOnly>
</body>
</html>
出力結果
上記のコードを実行すると、テキストボックスには初期値が表示されますが、クリックしてフォーカスを当てても内容を編集することはできません。
readOnly属性とdisabled属性の違い
どちらもフィールドを操作不能にする属性ですが、挙動には重要な違いがあります。
| 項目 | readOnly | disabled |
|---|---|---|
| フォーム送信時の値 | 送信される | 送信されない |
| テキストの選択・コピー | 可能 | 不可能 |
| Tabキーでのフォーカス移動 | 可能 | 不可能 |
JavaScriptでの動的制御
JavaScriptからはelement.readOnlyプロパティを使って、読み取り専用状態を動的に切り替えることもできます。
// 読み取り専用にする
document.getElementById("myInput").readOnly = true;
// 編集可能に戻す
document.getElementById("myInput").readOnly = false;
このようにreadOnly属性を活用すれば、注文番号や計算結果など「ユーザーには見せるが編集させたくない」データを、フォーム送信の対象に含めながら安全に表示できます。
-
HTMLのwrap属性とは？textareaのテキスト折り返し設定を解説
wrap属性とは HTMLのwrap属性は、<textarea>要素内のテキストを、フォーム送信時にどのように折り返すかを定義する属性です。画面上での見た目だけでなく、サーバーへ送信されるデータに改行コードを含めるかどうかを制御できる点が特徴です。 指定できる値 soft：画面上では自動的に折り返して表示されますが、送信されるテキストには改行コードが挿入されません（デフォルト値）。 hard：画面上の折り返し位置に基づいて、フォーム送信時に改行コードが挿入されます。この値を使用する場合はcols属性の指定が必須です。 構文 wrap属性の基本的な書き方は以下のとおりです。
-
HTMLのdraggable属性とは？使い方とサンプルコードを解説
HTMLのdraggable属性とはHTML DOMのdraggable属性は、要素がドラッグ可能かどうかを示す真偽値（boolean）を取得・設定するための属性です。この属性を活用することで、ドラッグ＆ドロップ操作に対応したインタラクティブなWebページを簡単に実装できます。注意：リンク（<a>タグ）や画像（<img>タグ）は、デフォルトでドラッグ可能に設定されています。draggable属性に指定できる値true … 要素をドラッグ可能にするfalse … 要素をドラッグ不可にするauto … ブラウザのデフォルト動作に従うHTML draggable属性の使用例以