Edit

Page

Page title:

Page body:

[1] [[HTML]] の [CODE(HTMLe)[[[input]]]] 要素は、 [CODE(HTMLa)[[[type]]]]
属性が [DFN[[CODE(HTMLa)[radio]]]] の時、[DFN[ラジオ・ボタン[[制御子]]]]を定義します。

[2] 仕様書:
- [[HTML 4]] ([[Web Forms 1.0]])
-- [CITE[checkboxes]] <IW:HTML4:"interact/forms.html#checkbox">
-- [CITE[radio buttons]] <IW:HTML4:"interact/forms.html#radio">
-- [CITE[17.4 The [CODE(HTMLe)[INPUT]] element]]
<IW:HTML4:"interact/forms.html#edef-INPUT">
-- [CITE[HTML 4 Changes]]
<IW:HTML4:"appendix/changes.html#h-A.1.1.9">
- [[Web Forms 2.0]]
-- [CSECTION@en[2.3 Changes to existing controls]]
<IW:WF2:"#changes">

[3] 属性:
,属性名	,属性値	,既定値	,説明	,出典
,[CODE(HTMLa)[[[accesskey]]]]	,[CODE(SGML)[%[[Character]]]]	,	,	,[HTML 4]
,[CODE(HTMLa)[[[align]]]]	,	,	,配置	,[HTML 4] 非推奨
,[CODE(HTMLa)[[[checked]]]]	,([[真偽値属性]])	,([[偽]])	,初期状態	,[HTML 4]
,[CODE(HTMLa)[[[class]]]]	,	,	,[[級]]	,[HTML 4] %[[coreattrs]]
,[CODE(HTMLa)[[[datafld]]]]	,	,	,データ欄	,[HTML 4] 予約
,[CODE(HTMLa)[[[dataformatas]]]]	,	,	,データ書式	,[HTML 4] 予約
,[CODE(HTMLa)[[[datasrc]]]]	,[CODE(SGML)[%[[URI]]]]	,(なし)	,データ源	,[HTML 4] 予約
,[CODE(HTMLa)[[[dir]]]]	,	,	,[[書字方向]]	,[HTML 4] %[[i18n]]
,[CODE(HTMLa)[[[disabled]]]]	,(真偽値属性)	,(偽)	,無効	,[HTML 4]
,[CODE(HTMLa)[[[id]]]]	,	,	,一意識別子	,[HTML 4] %coreattrs
,[CODE(HTMLa)[[[lang]]]]	,	,	,[[自然言語]]	,[HTML 4] %i18n
,[CODE(HTMLa)[[[xml]]:lang]]	,	,	,自然言語	,[XHTML 1]
,[CODE(HTMLa)[[[language]]]]	,	,	,スクリプト言語	,[[WinIE 4]]+
,[CODE(HTMLa)[[[name]]]]	,	,	,制御子名	,[HTML 4]
,[CODE(HTMLa)[[[onblur]]]]	,[CODE(SGML)[%[[Script]]]]	,	,焦点を失した時	,[HTML 4]
,[CODE(HTMLa)[[[onchange]]]]	,[CODE(SGML)[%[[Script]]]]	,	,現在値変更時	,[HTML 4]
,[CODE(HTMLa)[[[onclick]]]]	,	,	,	,[HTML 4] %[[events]]
,[CODE(HTMLa)[[[ondblclick]]]]	,	,	,	,[HTML 4] %events
,[CODE(HTMLa)[[[onfocus]]]]	,[CODE(SGML)[%[[Script]]]]	,	,焦点を得た時	,[HTML 4]
,[CODE(HTMLa)[[[onkeydown]]]]	,	,	,	,[HTML 4] %events
,[CODE(HTMLa)[[[onkeypress]]]]	,	,	,	,[HTML 4] %events
,[CODE(HTMLa)[[[onkeyup]]]]	,	,	,	,[HTML 4] %events
,[CODE(HTMLa)[[[onmousedown]]]]	,	,	,	,[HTML 4] %events
,[CODE(HTMLa)[[[onmousemove]]]]	,	,	,	,[HTML 4] %events
,[CODE(HTMLa)[[[onmouseout]]]]	,	,	,	,[HTML 4] %events
,[CODE(HTMLa)[[[onmouseover]]]]	,	,	,	,[HTML 4] %events
,[CODE(HTMLa)[[[onmouseup]]]]	,	,	,	,[HTML 4] %events
,[CODE(HTMLa)[[[onselect]]]]	,[CODE(SGML)[%[[Script]]]]	,	,文選択時	,[HTML 4]
,[CODE(HTMLa)[[[readonly]]]]	,(真偽値属性)	,(偽)	,読取専用	,[HTML 4]
,[CODE(HTMLa)[[[style]]]]	,	,	,スタイル情報	,[HTML 4] %coreattrs
,[CODE(HTMLa)[[[tabindex]]]]	,[CODE(SGML)[[[NUMBER]]]]	,	,タブ順	,[HTML 4]
,[CODE(HTMLa)[[[title]]]]	,	,	,注釈的題	,[HTML 4] %coreattrs
,[CODE(HTMLa)[[[type]]]]	,'''[CODE(HTML)[checkbox]]'''	,[CODE(HTML)[[[text]]]]	,制御子の種類	,[HTML 4]
,[CODE(HTMLa)[[[value]]]]	,	,	,初期値	,[HTML 4]
,[CODE(HTMLa)[[[vcard_name]]]]	,	,	,自動補完	,[[WinIE 5]]+

[[#comment]]

* 名前

[4] 制御子名は [CODE(HTMLa)[name]] 属性で指定します。

一つの[[フォーム]]内で同じ制御子名のラジオ・ボタンは、
互いに排他的となります。つまり、そのうちの1つだけが「入」で、
他はすべて「切」となります。
[SRC[HTML 4 17.2.1]]

[[#comment]]

* 選択状態

** 初期状態

[7] [CODE(HTMLa)[[[checked]]]] 属性が指定されていれば[Q[入]]の状態です。
[SRC[HTML 4 17.2.1]]

[8]
[[ラジオ・ボタン制御子]]は、本来、
1つ以上の選択肢から丁度1つを選択させるための[[フォーム制御子]]です。
しかし、選択肢のいずれかに [CODE(HTMLa)@en[[[checked]]]]
[[属性]]を与えることで初期状態において選択されているものを選ぶという方式を採っているために、
1つも [CODE(HTMLa)@en[[[checked]]]] とされていない場合や複数
[CODE(HTMLa)@en[[[checked]]]] とされている場合もあり得ます。

[9] '''著者に対する制約'''
[[著者]]は、1つの[[ラジオ・ボタン制御子]]の[[集合]]において、
複数を選択状態と[['''してはなりません''']]。
[SRC@en[WF2 2.3]]

[10] '''零個選択時の利用者エージェントの動作'''
[[利用者エージェント]]は、1つの[[ラジオ・ボタン制御子]]の[[集合]]虫のいずれも選択状態とされていない場合でも、
そのままどれも選ばれていない状態と[['''しなければなりません''']]。
[SRC@en[WF2 2.3]]

[11] '''零個選択時に関する仕様の変遷'''
>>10 の場合について、 [[HTML 2.0]]
は、最初のものを選択状態とすると規定されていました。
[SRC@en[[[RFC 1866]] 8.1.2.4]]

[[HTML 4.0]] はこれに言及していませんでしたが、
[[HTML 4.01]] は、実装状況を鑑みて、
挙動は未定義としました。
[[著者]]は1つ選択[['''するべきです''']]とされえていました。
[SRC@en[[[HTML 4.01]] 17.2.1]]

[[Web Forms 2.0]] は仕様を実装に合わせ、
いずれも選択しないままと[['''しなければなりません''']]としました。
同時に、[[著者]]は1つ選択[['''しなければなりません''']]ともしています。
[SRC@en[WF2 2.3]]

[12] '''複数選択時の利用者エージェントの動作'''

複数の[[ラジオ・ボタン制御子]]が選択状態とされている場合、
[[利用者エージェント]]は、
最後のもの''だけ''を選択状態と[['''しなければなりません''']]。
[SRC@en[WF2 2.3]]

;; [[Web Forms 2.0]] 以前はこの状態に関する規定はありませんでした。

[[#comment]]

** 状態の変化

[9]
ラジオ・ボタンを[[活性化]]すると ([[焦点]]をあてると)、
ラジオ・ボタンの値が切り替わります [SRC[HTML 4 17.11.2]]。

[13] '''選択済み制御子挿入時の利用者エージェントの動作'''

選択状態の[[ラジオ・ボタン制御子]]を[[文書]]に挿入すると、
[[利用者エージェント]]は、
他の[[ラジオ・ボタン制御子]]は未選択状態に[['''しなければなりません''']]。
[SRC@en[WF2 2.3]]
つまり、新たに挿入した選択肢だけが選択された状態になります。

;; [[Web Forms 2.0]] 以前はこの状態に関する規定はありませんでした。

[[#comment]]

** メモ

[[#comment]]

* 成功

[6] フォームの[[提出]]の時に、「入」
の状態になっているラジオ・ボタン制御子だけが[[成功]]状態です [SRC[HTML 4 17.2.1]]。

[[#comment]]

* 利用可能性

[10] '''スクリプトによる補助以上の動作''':
ラジオ・ボタン制御子の選択状態の変更に伴って何らかの動作を行うように[[スクリプト]]を記述することがありますが、
その動作は補助的で非本質的な範囲にとどめるべきです。

良い例: 選択肢によって別の入力項目が意味を成さなくなるので、
その項目の [CODE(DOMa)[[[disabled]]]] [[属性]]を適当に設定します。
そうすることで、それぞれの場面に合わない入力項目で[[利用者]]が混乱することを避けられます。

悪い例: 選択を行った瞬間に、
その選択肢で説明された別の[[頁]]に移動します。
(具体的な例: [[ソフトウェア]]の[[配布]]頁で、
[[OS]] の名前が選択肢になっていて、
ラジオ・ボタンを選択すると更に先の作業に進みます。)
ラジオ・ボタン制御子には選択してもそれ自体で不可逆な動作は行われず、
[[提出]]するまでは何度でも選択をやり直せることが期待されています。
そのような [[convention]] から外れた動作は[[利用者]]を混乱させるだけです。
もしラジオ・ボタン制御子で選択してから押しボタンを押すのが
2度手間だというのであれば、
最初から押しボタン制御子だけを用意しておけば良いのです。

[[#comment]]

* 関連

[5] 同じ制御子名のチェック箱を複数用意することで、
一つの名前に対して複数の値の入・切を選択させられます。
これは [CODE(HTMLe)[[[select]]]] 要素によるメニュー制御子と同じ効能です。

[21] 
[SEE[ [CODE[<menuitem type=radio>]] ]]

* メモ

[14] [CITE[''''''[''''''whatwg'''''']'''''' Make radio button group suffering from being missing]]
( ([TIME[2011-01-09 13:47:02 +09:00]] 版))
<http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2011-January/029733.html>

[15] [CITE[ncsa-mosaic/CHANGES at master · alandipert/ncsa-mosaic]]
( ([TIME[2014-04-07 05:30:50 +09:00]] 版))
<https://github.com/alandipert/ncsa-mosaic/blob/master/CHANGES#L237>

[16] [CITE[ncsa-mosaic/CHANGES at master · alandipert/ncsa-mosaic]]
( ([TIME[2014-04-07 05:32:29 +09:00]] 版))
<https://github.com/alandipert/ncsa-mosaic/blob/master/CHANGES#L441>

[17] [CITE@en[Web Applications 1.0 r8704     Change how we define what happens when radio buttons are clicked but the event is canceled]]
( ([TIME[2014-08-05 07:25:00 +09:00]] 版))
<http://html5.org/r/8704>

[18] [CITE@en[Make forms work in shadow trees]]
( ([[annevk]]著, [TIME[2016-05-12 00:45:25 +09:00]]))
<https://github.com/whatwg/html/commit/927fda0f305452a9c54a25d3ebf9a6ed5ae29fd3>

[19] [CITE@en[Add radio button constraint validation example]]
([[domenic]]著, [TIME[2016-10-08 02:35:07 +09:00]])
<https://github.com/whatwg/html/commit/a6ea8e505dad484bbe9124534f2c51e6a92fab0e>

[20] [CITE@en[Align activation behavior with changes to DOM Standard]]
([[annevk]]著, [TIME[2016-10-21 00:06:40 +09:00]])
<https://github.com/whatwg/html/commit/7beb920ba2e1a71246b81d86005f223a0d7ac8ab>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Errors

Page name(s)