HTML 属性: readonly

readonly は論理属性で、存在する場合、要素が変更可能ではなくなり、ユーザーがそのコントロールを編集できなくなります。

概要

readonly 属性が input 要素に指定された場合、その入力欄をユーザーが編集できないので、その要素は制約検証が行われません。

readonly 属性はフォームコントロールの text, search, url, tel, email, password, date, month, week, time, datetime-local, number の <input> 型と <textarea> 要素が対応しています。これらの入力型や要素のいずれかに設定された場合、 :read-only 擬似クラスが一致します。この属性が含まれなかった場合は、 :read-write 擬似クラスが一致します。

この属性は <select> や、 checkbox や radio のように既に変更不可能な入力型、 file 入力型のように定義上初期状態で値を設定できない入力型は対応していません。 range や color は、どちらも既定値があります。 hidden も、非表示であればユーザーが値を入力することが期待できないので対応していません。ボタン型も、image を含め、すべて対応していません。

メモ: テキストコントロールだけが読み取り専用にすることができます。他のコントロール（チェックボックスやボタンなど）は、読み取り専用と無効との間に有用な違いがないため、 readonly 属性は適用されません。

入力に readonly 属性が設定されている場合、 :read-only 擬似クラスも適用されます。逆に、 readonly 属性に対応していても、この属性が設定されていない入力欄は、 :read-write 擬似クラスに一致します。

属性の相互作用

disabled と readonly の違いは、読み取り専用 (readonly) のコントロールは機能し、フォーカスを設定することもできるのに対し、無効な (disabled) コントロールはフォーカスを受け取ることができず、フォームで送信されず、一般に有効化されるまでコントロールとしては機能しません。

読み取り専用のフィールドはユーザーの操作で値を変更することはできないので、 required は readonly 属性が一緒に指定されている入力欄では効果がありません。

readonly が付いた値を動的に変更できる唯一の方法は、スクリプトを通して行うことです。

メモ: required 属性は readonly 属性が指定された入力欄では許可されていません。

<div class="group">
  <input type="text" value="Some value" readonly="readonly" id="text" />
  <label for="text">Text box</label>
</div>
<div class="group">
  <input type="date" value="2020-01-01" readonly="readonly" id="date" />
  <label for="date">Date</label>
</div>
<div class="group">
  <input type="email" value="Some value" readonly="readonly" id="email" />
  <label for="email">Email</label>
</div>
<div class="group">
  <input type="password" value="Some value" readonly="readonly" id="pwd" />
  <label for="pwd">Password</label>
</div>
<div class="group">
  <textarea readonly="readonly" id="ta">Some value</textarea>
  <label for="ta">Message</label>
</div>

結果

仕様書

Specification
HTML Standard # attr-input-readonly
HTML Standard # attr-textarea-readonly

HTML 属性: readonly

試してみましょう

概要

属性の相互作用

ユーザビリティ

制約検証

例

HTML

結果

仕様書

ブラウザーの互換性

html.elements.input.readonly

html.elements.textarea.readonly

関連情報