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

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

Posted at April 26,2009 12:33 AM
Tag:[(X)HTML, 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属性の値を動的に変更する唯一の方法は、スクリプトによるものである。

まとめ

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

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

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

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

参考:ARTS NET - フォーム送信前にJavaScriptでdisabled解除
関連記事
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)