小粋空間  -  a cheap joke and a play on words site

input 要素の disabled 属性と readonly 属性の違い

(X)HTML の disabled 属性と readonly 属性の違いについて、どちらの属性もユーザーが値を変更できないのは同じですが、振る舞いが異なります。

<input name="a" type="text" value="hoge" disabled="disabled" />

<input name="b" type="text" value="hoge" readonly="readonly" />

最近、2つの属性の違いが気になって調べたので、以下、HTML 4.01仕様書（和訳）からの引用抜粋と、それぞれの違いを表にまとめました。文中の「選択不能指定」が disabled、「読み出し専用指定」がreadonly です。原文へのリンクも掲載しています。

17.12 選択不能指定と読み出し専用指定からの引用[原文]

ユーザによる入力が望ましくなかったり不適切だったりする場合、コントロールを選択不能にすることや読み出し専用にしておくことが重要である。例えば、ユーザが必要なデータを入力し終えるまでは提出ボタンを押せないようにしたいといったことがあるだろう。同様に、ユーザに読ませたい文章で、かつ他のフォームデータと共に返信されることを望むようなものもあろう。以下の各項では、このような選択不能指定と読み出し専用指定について説明する。

17.12.1 選択不能指定からの引用抜粋[原文]

フォームのコントロールに設定されていた場合、この論理型属性は当該コントロールについてユーザの入力を受け付けないようにする。このdisabled属性が設定されると、その要素には次のような効果がある。

• フォーカスの受け手とならない。
• タブ移動で飛び越される。
• 満足なコントロールとならない。

disabled属性をサポートする要素は、BUTTON、 INPUT、OPTGROUP、OPTION、SELECT、 and TEXTAREAである。disabled属性は継承されるが、個々の要素における宣言は継承値を上書きする。 選択不能の要素がどのようにレンダリングされるかは、ユーザエージェントに依存する。例えば、選択不能のメニュー項目やボタンラベルを「ぼかす」ユーザエージェントもあろう。

次の例では、INPUT要素が選択不能とされている。従って、ユーザの入力を受け付けることもなく、またこの値がフォームデータと共に提出されることもない。

<INPUT disabled name="fred" value="stone">

注意。各要素の disabled属性の値を動的に変更する唯一の方法は、スクリプトによるものである。

17.12.2 読み出し専用指定からの引用抜粋[原文]

設定されていた場合、この論理型属性は当該コントロールの変更を禁止する。 readonly属性は、ユーザによるコントロールの変更を許すかどうかを指定する。このreadonly属性が設定されると、当該コントロールには次の効果がある。

• フォーカスを受け取ることはできるが、ユーザが変更することはできない。
• タブ移動順の中に含まれる。
• 満足なコントロールとなり得る。

readonly属性をサポートする要素は、INPUTと TEXTAREAである。読み出し専用要素がどのようにレンダリングされるかは、ユーザエージェントに依存する。

注意。各要素の readonly属性の値を動的に変更する唯一の方法は、スクリプトによるものである。

まとめ

上記の仕様を表にまとめると次のようになります。

項目	disabled	read-only
サポートする要素	BUTTON/INPUT/OPTGROUP/OPTION/SELECT/TEXTAREA	INPUT/TEXTAREA
フォーカス	受け取れない	受け取れる ユーザーは変更できない
タブ移動	含まれる	含まれない
満足なコントロール	ならない	なる
レンダリング	ユーザエージェントに依存
動的に変更する方法	JavaScript

「満足なコントロール」とは、「17.13.2 満足なコントロール[原文]」に記載があります。誤解をおそれずに言えば、ここではフォームデータとして送信する要件が定義されています。

つまり、disabled 指定の場合は、「満足なコントロールとならない」ので、フォームデータとして送信されないことを意味します。disabled 指定したデータをフォームデータとして送信するには、hidden 指定した同じデータを用意するか、JavaScriptでdisabled を解除する等の方法が必要です。

参考：ARTS NET - フォーム送信前にJavaScriptでdisabled解除