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