* フォーム制御子系要素 disable 属性 (HTML, XHTML 1)
[2] [[HTML]] のフォーム[[制御子]]系要素の [DFN[[CODE(HTMLa)[disabled]] 属性]]は、
その制御子の利用者入力を無効にします。
[14]
:状態:[[W3C]] [[勧告]]、[[WHATWG]] [[WD]]
:[[要素型]]:[CODE(HTMLe)[[[button]]]],
[CODE(HTMLe)[[[input]]]], [CODE(HTMLe)[[[optgroup]]]],
[CODE(HTMLe)[[[option]]]], [CODE(HTMLe)[[[select]]]],
[CODE(HTMLe)[[[textarea]]]],
[CODE(HTMLe)@en[[QN[[[fieldset]]] [http://www.w3.org/1999/xhtml]]]],
[CODE(HTMLe)@en[[QN[[[optgroup]]] [http://www.w3.org/1999/xhtml]]]],
[CODE(HTMLe)@en[[QN[[[option]]] [http://www.w3.org/1999/xhtml]]]]
:[[属性名]]:[CODE(HTMLa)@en[[[disabled]]]]
([Q@en[disalbed]] ([Q[無効]]) より)
:[[属性値]]:[[ブール型属性]] (>>4)
:[[既定値]]:[[偽]] (>>4)
[3] 仕様書:
- [[HTML 4]] ([[Web Forms 1.0]])
-- [CITE[17.12.1 Disabled controls]]
- [[Web Forms 2.0]]
-- [CSECTION@en[2.5. Extensions to existing attributes]]
--
[11]
HTML 4 DTD の[[注釈]] (参考) には
[Q[unavailable in this context]]
と説明があります。
** 属性値
[4] この属性は[[真偽値属性]]です。指定すれば真 (無効)、
指定しなければ偽 (有効) です。
[5] この属性は継承しますが、局所宣言が継承値を上書きします [SRC[HTML 4 17.12.1]]。
この規定が適用されるのは、メニュー選択制御子 ([CODE(HTMLe)[select]])
の場合と推定されます。
[15]
[CODE(HTMLe)@en[[[fieldset]]]] が [CODE(HTMLa)@en[[[disabled]]]]
されると、その[[子孫]]の[[フォーム制御子]]は、
すべて [CODE(HTMLa)@en[[[disabled]]]] となります。
[SRC@en[WF2 2.5]]
** UA による利用
[6]
無効化された制御子は、
- [[焦点]]を受取りません。 [SRC[HTML 4 17.12.1]]
- タブ navigation ([CODE(HTMLa)[[[tabindex]]]] 参照。) で飛ばされます。
[SRC[HTML 4 17.12.1]]
- [[成功]]できません。 [SRC[HTML 4 17.12.1]]
- [[レンダリング]]は UA 依存です。[SRC[HTML 4 17.12.1]]
-- 例: メニュー項目やボタンの名札を[Q[[[灰化]]]]する。 [SRC[HTML 4 17.12.1]]
[16]
[[利用者エージェント]]は、
- [CODE(HTMLa)@en[[[disabled]]]] [[属性]]が設定されている[[フォーム制御子]]と、
- [[祖先]]の [CODE(HTMLe)@en[[[fieldset]]]]
[[要素]]の [CODE(HTMLa)@en[[[disabled]]]] [[属性]]が設定されている[[フォーム制御子]]
を無効化[['''しなければなりません''']]。
[SRC@en[WF2 2.5]]
[17]
>>16 を厳密に解釈すると、
[[フォーム制御子]]でない [CODE(HTMLe)@en[[[option]]]]
と [CODE(HTMLe)@en[[[optgroup]]]] と
[CODE(HTMLe)@en[[[fieldset]]]] は無効化されず、
[[フォーム制御子]]である (が [CODE(HTMLa)@en[[[disabled]]]]
は持たない) [CODE(HTMLe)@en[[[output]]]]
は無効化されることになってしまいますが、
[CODE(HTMLe)@en[[[fieldset]]]] や
[CODE(HTMLe)@en[[[output]]]] に対して有効・無効ということはあまり意味がありませんし、
[CODE(HTMLe)@en[[[option]]]] や
[CODE(HTMLe)@en[[[optgroup]]]] は
[CODE(HTMLe)@en[[[select]]]] の[[子孫]]でない限り、
やはり有効・無効にあまり意味はないので、
特に問題はなさそうです。
** 実装
[12]
[CITE[CSS Attribute selector bug - My Opera Forums]]
[18] [CITE[IE7以下でもdisabled 属性を利用できるようになる「select-option-disabled-emulation.js」-JavaScript Library Archive]] ([TIME[2009-04-19 14:38:57 +09:00]] 版)
** 他との関係
[7] HTML 的には有効・無効を動的に切り替える方法がなく、
スクリプトを使うことになっています。 [SRC[HTML 4 17.12.1]]
[8] 似たような属性として [CODE(HTMLa)[[[readonly]]]]
があります。利用者の入力を受け付けないという意味では
[CODE(HTMLa)[disabled]] と同じですが、 [CODE(HTMLa)[readonly]]
な制御子は成功するなどの違いがあります。
** アクセス可能性・可用性・安全性
[10] この属性は、例えば、必須の項目が入力されるまで提出ボタンを無効にする、
といったような目的で使うことができます [SRC[HTML 4 17.12.1]]。
しかし、 HTML だけでは有効・無効状態を動的に切り替えることができませんから、
その機能はスクリプトによって実現する必要があります。
このような場合、初期状態では必須の項目が未入力の状態であるとすると、
提出ボタンの初期状態も[Q[無効]]となるべきです。
従って、 HTML 文書に直接 [SAMP(HTML)[]]
と指定しておきたくなります。しかし、
これは'''好ましくありません'''。なぜなら、
スクリプトが使えない UA やスクリプトを無効にしている利用者は、
この提出ボタンを押してフォームを提出しておくことができなくなってしまいます。
ですから、 HTML 文書の記述は
[PRE(HTML)[
]PRE]
にとどめておき、スクリプトによって最初にこのボタンを無効化するという方法を採るべきです。
** 例
[9] 無効な文章入力制御子の例 [SRC[HTML 4 17.12.1]]
[PRE(HTML)[
]PRE]
この例では、この制御子は通常レンダリングされますが、
利用者は編集できませんし、[[提出]]時に使われることもありません。
* 実際に無効
** 定義
[71] [[要素]]が[DFN[[RUBYB[[[実際に無効]]]@en[actually disabled]]]]であるとは、次の状態をいいます [SRC[>>70]]。
[FIG[
- [54] [CODE(HTMLe)@en[[[button]]]] [[要素]]で[[無効]]なもの
- [55] [CODE(HTMLe)@en[[[input]]]] [[要素]]で[[無効]]なもの
- [56] [CODE(HTMLe)@en[[[select]]]] [[要素]]で[[無効]]なもの
- [57] [CODE(HTMLe)@en[[[textarea]]]] [[要素]]で[[無効]]なもの
- [58] [CODE(HTMLe)@en[[[optgroup]]]] [[要素]]で [CODE(HTMLa)@en[[[disabled]]]] [[属性]]を持つもの
- [59] [CODE(HTMLe)@en[[[option]]]] [[要素]]で[[無効]]なもの
- [60] [DEL[[CODE(HTMLe)@en[[[command]]]] [[要素]]で [CODE(HTMLa)@en[[[disabled]]]] [[属性]]を持つもの]]
-- >>72 で削除
- [61] [DEL[[CODE(HTMLe)@en[[[li]]]] [[要素]]で [CODE(HTMLe)@en[[[menu]]]] [[要素]]の[[子供]]であって、[[命令]]を定義する[[子要素]]を持っており、かつそのような最初の[[要素]]の[[無効状態]][[ファセット]]が[[真]] ([[無効]]) であるもの]]
-- >>72 で削除
- [74] [CODE(HTMLe)@en[[[menuitem]]]] [[要素]]で [CODE(HTMLa)@en[[[disabled]]]] [[属性]]を持つもの
-- >>72 で追加
- [62] [CODE(HTMLe)@en[[[fieldset]]]] [[要素]]で [CODE(HTMLa)@en[[[disabled]]]] [[属性]]を持つもの
]FIG]
;; [68] [CODE(HTML)@en[[[]]]] には適用されないこととされていましたが、実装に合わせて >>67
で適用されるように変更されました。
** 仕様書
[REFS[
- [70] [CITE@en-US-x-hixie[HTML Standard]] ([TIME[2013-12-19 00:10:55 +09:00]] 版)
]REFS]
** 用法
[75] この概念は [CODE(CSS)@en[[[:disabled]]]] [[擬似クラス]] (>>53) の定義と[[フォーカス可能性]]の定義で使われています。
* [CODE(CSS)@en[:disabled]] 擬似クラス、[CODE(CSS)@en[:enabled]] 擬似クラス
[25] [DFN[[CODE(CSS)@en[[[:enabled]]]]]] [[擬似クラス]]、[DFN[[CODE(CSS)@en[[[:disabled]]]]]]
[[擬似クラス]]は、[[利用者界面要素]]が有効である、または無効であることをそれぞれ表します [SRC[>>24]]。
** 仕様書
[REFS[
- [24] [CITE@en[Selectors Level 3]] ([TIME[2011-09-29 22:16:17 +09:00]] 版)
- [39] [CITE@en-US-x-hixie[HTML Standard]] ([TIME[2011-11-12 00:22:26 +09:00]] 版)
]REFS]
** 意味
[26] どの[[要素]]が[[利用者界面要素]]であるか、また有効であるか無効であるか、は[[文書言語]]によって定義されます
[SRC[>>24]]。
[27] [[CSS]] 的に[[利用者]]が操作可能であるか否かは有効・無効に直接影響しません。例えば
[CODE(CSS)@en['[[display]]']] や [CODE(CSS)@en['[[visibility]]']] によって[[レンダリング]]の有無を指定し、
ひいては[[利用者]]が操作できなくすることができるかもしれませんが、それによって
[CODE(CSS)@en[[[:enabled]]]] と [CODE(CSS)@en[[[:disabled]]]] の状態が変化するわけではありません。
[SRC[>>24]]
*** HTML
[40] [CODE(CSS)@en[[[:enabled]]]] [[擬似クラス]]は次の[[要素]]と[[一致]]します [SRC[>>39]]。
[FIG[
- [41] [CODE(HTMLe)@en[[[a]]]] [[要素]]で [CODE(HTMLa)@en[[[href]]]] [[属性]]を持つもの
- [42] [CODE(HTMLe)@en[[[area]]]] [[要素]]で [CODE(HTMLa)@en[[[href]]]] [[属性]]を持つもの
- [43] [CODE(HTMLe)@en[[[link]]]] [[要素]]で [CODE(HTMLa)@en[[[href]]]] [[属性]]を持つもの
- [44] [CODE(HTMLe)@en[[[button]]]] [[要素]]で[[無効]]でないもの
- [45] [CODE(HTMLe)@en[[[input]]]] [[要素]]で[[無効]]でないもの
- [46] [CODE(HTMLe)@en[[[select]]]] [[要素]]で[[無効]]でないもの
- [47] [CODE(HTMLe)@en[[[textarea]]]] [[要素]]で[[無効]]でないもの
- [48] [CODE(HTMLe)@en[[[optgroup]]]] [[要素]]で [CODE(HTMLa)@en[[[disabled]]]] [[属性]]を持たないもの
- [49] [CODE(HTMLe)@en[[[option]]]] [[要素]]で[[無効]]でないもの
- [50] [DEL[[CODE(HTMLe)@en[[[command]]]] [[要素]]で [CODE(HTMLa)@en[[[disabled]]]] [[属性]]を持たないもの]]
-- >>72 で削除
- [51] [DEL[[CODE(HTMLe)@en[[[li]]]] [[要素]]で [CODE(HTMLe)@en[[[menu]]]] [[要素]]の[[子供]]であって、[[命令]]を定義する[[子要素]]を持っており、かつそのような最初の[[要素]]の[[無効状態]][[ファセット]]が[[偽]] ([[無効]]でない) であるもの]]
-- >>72 で削除
- [73] [CODE(HTMLe)@en[[[menuitem]]]] [[要素]]で [CODE(HTMLa)@en[[[disabled]]]] [[属性]]を持たないもの
-- >>72 で追加
- [52] [CODE(HTMLe)@en[[[fieldset]]]] [[要素]]で [CODE(HTMLa)@en[[[disabled]]]] [[属性]]を持たないもの
]FIG]
[53] [CODE(CSS)@en[[[:disabled]]]] [[擬似クラス]]は[[実際に無効]]である[[要素]] (>>71) と[[一致]]します [SRC[>>39]]。
*** XForms
[REFS[
- [28] [CITE@EN[XForms 1.1]] ([TIME[2010-08-13 07:45:33 +09:00]] 版)
]REFS]
[29] [[XForms]] では、 [CODE(CSS)@en[[[:enabled]]]] と [CODE(CSS)@en[[[:disabled]]]]
はそれぞれ[[フォーム制御子]]が[RUBYB[[[関係ある]]]@en[relevant]]または[RUBYB[[[無関係]]]@en[non-relevant]]であることを表します。
** 歴史
*** 選択子3
[REFS[
- [30] [CITE[User Interface Enhancements]] ([TIME[1999-09-16 05:07:02 +09:00]] 版)
- [31] [CITE@en[User Interface for CSS3]] ([TIME[2000-06-23 03:09:21 +09:00]] 版)
]REFS]
[32] はじめこれらの [[WD]] で定義されていましたが、その後[[選択子3]]に移されたようです。
[REFS[
- [37] [CITE@en[CSS3 module: W3C Selectors]] ([TIME[2000-04-11 01:57:05 +09:00]] 版)
]REFS]
[66] その後の [[CSS3 UI]] は単に[[選択子3]]へのリンクになっています。
[REFS[
- [65] [CITE@en[CSS Basic User Interface Module Level 3 (CSS3 UI)]] ([[Tantek Çelik]] 著, [TIME[2012-01-13 20:03:30 +09:00]] 版)
]REFS]
*** XForms
[REFS[
- [33] [CITE[XForms and Styling]] ([TIME[2002-08-21 23:00:56 +09:00]] 版)
]REFS]
[34] [[XForms]] における定義は >>33 で追加されました。
*** Web Controls 1.0
[38] [[Webアプリケーション]]が状態を制御できるように拡張する構想もありました。
[REFS[
- [36] [CITE@en-GB-hixie[Web Applications Markup Language 1.0]]
( ([TIME[2004-04-08 02:39:12 +09:00]] 版))
- [35] [CITE@en-GB-hixie[Web Controls 1.0]]
( ([TIME[2004-11-09 08:49:52 +09:00]] 版))
]REFS]
*** HTML
[64] [[HTML]] に関してははじめ [[Web Forms 2.0]] が、後に [[HTML Living Standard]] ([[Web Applications 1.0]])
が規定するようになりました。
[REFS[
- [19] [CITE[IRC logs: freenode / #whatwg / 20090610]]
([TIME[2009-08-29 19:19:58 +09:00]] 版)
- [20] [CITE@en-GB-x-Hixie[Web Forms 2.0]]
([TIME[2009-01-05 20:07:15 +09:00]] 版)
- [22] [CITE@en[Web Applications 1.0 r5398 Make :disabled accurately reflect