* 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)@en[[[_moz-type]]]],,,[[Gecko]] 内部処理用形式,"非標準, 内部用",[[Gecko]] ,[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]] であるということの気持ちの悪さがあります。 他に回避手段があるなら、そちらを採るべきでしょう。 [19] メニュー制御子はある項目に関する排他的な選択肢群から1つ選ぶ場合や、 ある項目に関して選択肢群からいくつか選ぶ場合に限って使うべきです。 悪い例: 複数のアカウントに個別に設定できる設定画面で 「現在設定対象アカウント」を選択するのはリスト表示制御子や木表示制御子 (や場合によってはタブ) のようなものを使うべきです。 プルダウン・メニュー制御子を使うとアカウントを1つ選択するかのような印象を利用者に与えてしまいます。 ([[名無しさん]] [sage]) [[#comment]] * メモ