TopHTML(X)HTML > 2009年4月
2009年4月26日

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

April 26,2009 12:33 AM
Tag:[, , ]
Permalink

(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解除
Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3