HTML 属性: readonly
readonly は論理属性で、存在する場合、要素が変更可能ではなくなり、ユーザーがそのコントロールを編集できなくなります。
試してみましょう
<label for="firstName">名前:</label>
<input id="firstName" name="firstName" type="text" value="アダム" />
<label for="age">年齢:</label>
<input id="age" name="age" type="number" value="42" readonly />
<label for="hobbies">趣味:</label>
<textarea id="hobbies" name="hobbies" readonly>野球</textarea>
label {
display: block;
margin-top: 1em;
}
input:read-only,
textarea:read-only {
background-color: silver;
}
概要
readonly 属性が input 要素に指定された場合、その入力欄をユーザーが編集できないので、その要素は制約検証が行われません。
readonly 属性は、次のようなテキストのフォームコントロールで対応してます。
<input>要素の型:<textarea>
この属性は、 <select> や <button> を含む他のすべての要素には影響しません。また、次のようなテキスト以外の入力要素にも適用されません。
readonly 属性に対応しており、この属性が設定されていない入力フィールドは、 :read-write 擬似クラスに一致します。それ以外の要素はすべて、 :read-only 擬似クラスに一致します。
属性の相互作用
disabled と readonly の違いは、読み取り専用 (read-only) のコントロールは機能し、フォーカスを設定することもできるのに対し、無効な (disabled) コントロールはフォーカスを受け取ることができず、フォームで送信されず、一般に有効化されるまでコントロールとしては機能しません。
読み取り専用のフィールドはユーザーの操作で値を変更することはできないので、 required は readonly 属性が一緒に指定されている入力欄では効果がありません。
readonly が付いた値を動的に変更できる唯一の方法は、スクリプトを通して行うことです。
メモ: required 属性は readonly 属性が指定された入力欄では許可されていません。
ユーザビリティ
ブラウザーは readonly 属性を表示します。
制約検証
要素が読み取り専用である場合、要素の値をユーザーによって更新することができないため、制約検証は行われません。
例
HTML
<div class="group">
<input type="text" value="何らかの値" readonly="readonly" id="text" />
<label for="text">テキストボックス</label>
</div>
<div class="group">
<input type="date" value="2020-01-01" readonly="readonly" id="date" />
<label for="date">日付</label>
</div>
<div class="group">
<input type="email" value="何らかの値" readonly="readonly" id="email" />
<label for="email">メールドレス</label>
</div>
<div class="group">
<input type="password" value="何らかの値" readonly="readonly" id="pwd" />
<label for="pwd">パスワード</label>
</div>
<div class="group">
<textarea readonly="readonly" id="ta">何らかの値</textarea>
<label for="ta">メッセージ</label>
</div>
結果
仕様書
| Specification |
|---|
| HTML # attr-input-readonly |
| HTML # attr-textarea-readonly |