* select 要素型 (HTML, XHTML 1) [7] [[HTML]] の [DFN[[CODE(HTMLe)[select]] 要素]]は、 [DFN[メニュー制御子]]を作成します。 [8] 仕様書: -[[SI 4281]]:1998 --[CSECTION[6.1.4 Elements with no directionality]] --[CSECTION[8.3 Rendering the Form]] - [[HTML 4]] ([[Web Forms 1.0]]) -- menus -- 17.6 The [CODE(HTMLe)[SELECT]], [CODE(HTMLe)[OPTGROUP]], and [CODE(HTMLe)[OPTION]] elements [9] : [[開始タグ]]: 必須 : [[終了タグ]]: 必須 : [[内容模型]]: [CODE(SGML)[([CODE(HTMLe)[[[optgroup]]]] | [CODE(HTMLe)[[[option]]]])+]] : 出現できる文脈 : [CODE(SGML)[%[[formctrl]]]] な文脈 : [[属性]] : ,属性名,属性値,既定値,説明,出典 ,[CODE(HTMLa)[[[class]]]] ,,,[[級]] ,[HTML 4] %[[coreattrs]] ,[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)[[[multiple]]]],([[真偽値属性]]),([[偽]]),複数選択可能,[HTML 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)[[[size]]]],[CODE(SGML)[[[NUMBER]]]],,列数,[HTML 4] ,[CODE(HTMLa)[[[style]]]] ,,,スタイル情報 ,[HTML 4] %coreattrs ,[CODE(HTMLa)[[[tabindex]]]],[CODE(SGML)[[[NUMBER]]]],,タブ順,[HTML 4] ,[CODE(HTMLa)[[[title]]]] ,,,注釈的題 ,[HTML 4] %coreattrs [[#comment]] ** 内容 [10] [CODE(HTMLe)[select]] 要素の子孫には、選択肢を表す [CODE(HTMLe)[[[option]]]] 要素を置きます。 [CODE(HTMLe)[option]] 要素は、最低1つは必要です。 選択肢をまとめるために [CODE(HTMLe)[[[optgroup]]]] 要素を使うことができます。 [[HTML 4]] では、 [CODE(HTMLe)[optgroup]] の入れ子は認められていません。 つまり、一階層しか作ることができません。それでも、 [CODE(HTMLe)[optgroup]] によって選択肢をまとめることで、利用者は目的の項目を探すことが楽になるでしょうし、 著者による選択肢の管理も楽になるかもしれません。 [[#comment]] *** i-XHTML [5] 現代の HTML DTD では普通 [CODE(HTMLe)[select]] の[[内容模型]]は [CODE(SGML)[([CODE(HTMLe)[[[option]]]])*]] (や、それに加えて [CODE(HTMLe)[[[optgroup]]]]) となっているものです。つまり、[[要素内容]]のはずです。 ところが、 [[i-XHTML]] の解説 にある使用例では、 [CODE(HTMLe)[option]] 要素の外に [CODE(char)[[[IDEOGRAPHIC SPACE]]]] が使用されています。さてどうしたことか。 - この例は、 copy & paste で使えるものではなく、 一度印刷してから再入力することを想定している(藁)。 - i-XHTML では、 [CODE(HTMLe)[select]] の内容模型は[[混合内容]]である。 - i-XHTML は [[XML]] ではないので、 [CODE(SGML)[[[s]]]] に [CODE(char)[[ABBR[[[IDSP]]][IDEOGRAPHIC SPACE]]]] も含まれている。 - ただ単に、担当者がアフォなだけ。 正しいのはどれだ? ([[名無しさん]] [WEAK[2004-03-28 08:11:26 +00:00]]) [[#comment]] ** フォーム制御子 *** 制御子名 [14] 制御子名は、 [CODE(HTMLa)[[[name]]]] 属性によって指定します。 [[#comment]] *** 初期状態 [12] 初期状態で選択されている項目は、 [CODE(HTMLe)[[[option]]]] 要素の [CODE(HTMLa)[[[selected]]]] 属性によって指定します。 選択肢の[[初期値]]は [CODE(HTMLe)[option]] 要素の [CODE(HTMLa)[[[value]]]] 属性か要素の内容によって指定します。 詳しくはそれぞれの説明をご覧ください。 [[#comment]] *** 成功 [13] 選択肢は、選択されていれば ([CODE(HTMLe)[select]] [CODE(HTMLa)[name]] と組合せて) [[成功]]状態となります。 選択されている項目が一つもなければ、その制御子は成功ではなく、 名前も値も提出されません。 [SRC[HTML 4 17.6]] [[#comment]] *** 提出 [16] 選択されている選択肢があれば (成功していれば)、 メニュー制御子の名前と選択肢の初期値の組がフォーム処理エージェントに提出されます。 選択されているものが無ければ、何も送られません。 詳しくはフォームの[[提出]]の説明をご覧ください。 [[#comment]] *** メモ [[#comment]] ** レンダリング [18] '''Bidi との関係''': [CODE(HTMLe)[[[select]]]] [[要素]]は、 [[bidi]] 的には方向性に関して[[中立]]な[[文字]]1[[文字]]であるかのように扱います。 方向について特に配慮が必要なら 前後に [CODE(char)[[[LRM]]]] や [CODE(char)[[[RLM]]]] を使えます。 [SRC[SI 4281 6.1.4]] [[#comment]] ** 実装 [4] [[NC]] は [CODE(HTMLe)[[[form]]]] 要素外の [CODE(HTMLe)[select]] 要素を、 地の文と同じようにレンダリングします。[WEAK[素直に表現すれば、[Q[対応していません]]。]] [[#comment]] ** 不思議解釈 [1] [[不思議マーク付け]]で、 [[HP]] の[[更新履歴]]や[[管理人]]の一言コメント的[[日記]]のようなものを書くための[[タグ]]。 ドロップダウン・リストとかで表示されるんだけど、その項目は頭に [CODE(HTML)[<[CODE(HTMLe)[[[option]]]]>]] というタグを入れる。 [2] >>1 のような使い方は [[CSS]] + [[DOM]] で出来なくも無いけど、面倒だし、 [SAMP(CSS)[display: -x-pulldown-list]] みたいな指定が出来るといいよな。 [CODE(HTMLe)[select]] 要素とは関係ないけど、 [[マウス]]を乗せたらでてくるメニューとかもよくあるけど、そういうのも含めて、 従来の window system が持っていた色々な界面というか control というかを、 CSS で再現できて損はしないと思うのだ。 CSS3+ に期待。 [3] >>1 他には、当該 [[HP]] にある[[お部屋]]の一覧としても使われる。 関連付けられた [[JScript]] などの code の動作により、 項目を選択したらそのお部屋に瞬間移動出来る優れもの(藁。 [[#comment]] ** 例 [11] 簡単なメニューの例 [SRC[HTML 4 17.6]] [PRE(HTML)[

]PRE] この例は、7つの項目があるメニューで、複数選択可能です。 最初の2つの項目が初期状態で選択されています。 視覚 UA は4つの項目が見える状態でレンダリングし、 scroll 等により他の項目も見て選ぶことができるようにするべきです。 [[#comment]] ** メモ [17] [CODE(HTMLe)[select]] メニュー制御子を [[ComboBox]] としてレンダリングする視覚 UA は多いですが、その場合、 あらかじめ1つの項目が選択されている状態か、 何も選択されていない (空白が表示される) 状態になります。 どれか選択肢の一つがあらかじめ著者または UA により選択された状態になるとすると、利用者が本当にその項目を選んだのか、 何も考えずに (あるいはメニューの存在に気付かずに) 選ばれていたのかが区別できません。 また、 [CODE(HTMLa)[[[selected]]]] [CODE(HTMLe)[[[option]]]] がないと最初の項目を選ばずに空白を表示した状態となる UA は少なくないのですが、それはみっともない上に利用者が混乱する虞もあります。 そこで、 [CODE(HTMLa)[disabled]] な [CODE(HTMLe)[option]] を [CODE(HTMLa)[selected]] としておき、そのラベルを [Q[なんたらを選んでくださいな]]のような文字列としておくという手法がよく採られます。 但し、選びようが無いものが[Q[選択肢]]として含まれていることや [CODE(HTMLa)[disabled]] かつ [CODE(HTMLa)[selected]] であるということの気持ちの悪さがあります。 他に回避手段があるなら、そちらを採るべきでしょう。 [[#comment]] * メモ