内容

[10] select 要素の子孫には、選択肢を表す option 要素を置きます。 option 要素は、最低1つは必要です。

選択肢をまとめるために optgroup 要素を使うことができます。 HTML 4 では、 optgroup の入れ子は認められていません。 つまり、一階層しか作ることができません。それでも、 optgroup によって選択肢をまとめることで、利用者は目的の項目を探すことが楽になるでしょうし、 著者による選択肢の管理も楽になるかもしれません。

[20] 区切り線

Safari では、 select や optgroup の子供として hr を入れて、区切りを表すことができます。

[31] 空要素 HTML 4 では、 select 要素は空ではいけませんでした。 しかし、 Web Forms 2.0 では、 select を空にして構いません。 ただし、利用者の混乱を防ぐため、 空かつ可視のままにしておくのは避けるようにするべきです。 WF2 2.3

[33] あああ (名無しさん 2007-04-05 13:41:46 +00:00)

フォーム制御子

レンダリング

[21] select要素は、使用されている環境によって、あるいは利用者エージェントによって、様々な形でレンダリングされます。optgroup要素の有無で多くのバリエーションがありますし、同じ利用者エージェントでもmultiple属性の有無やsize属性の有無でwidgetが変わるのが一般的です。

[22] ドロップダウン・リスト select要素にmultiple属性もsize属性も指定されていないときの伝統的な典型レンダリングは、いわゆるドロップダウン・リスト制御子です。普段は

+----------------------+----+
| Item 2               | ▼ |
+----------------------+----+

のように選択された項目だけが表示されていますが、活性化されると

+----------------------+----+
| Item 2               | ▼ |
+----------------------+----+
| Item 1                    |
| Item 2                    |
| Item 3                    |
+---------------------------+

のように選択肢が表示されます。選択肢一覧は浮かんで表示され、元々その場所にレンダリングされていた内容は隠れます。利用者エージェントや環境によっては、元々表示されていた部分も隠れて

+---------------------------+
| Item 1                    |
| Item 2                    |
| Item 3                    |
+---------------------------+

のようになることもあります。なお、コンボボックス制御子とは異なり、元々表示されていた部分を利用者が直接編集することはできないのが普通です。

[24] optgroup要素が使われている場合のレンダリングは環境や利用者エージェントによって様々です。

[25] HTML 4仕様書のレンダリング例では、

+----------------------+----+
| Item 2               | ▼ |
+----------------------+----+
| Item 1                    |
| Item 2                   +-----------------+
| Group Label            > | Subitem 1       |
+--------------------------| Subitem 2       |
                           +-----------------+

のように、多くのGUI環境におけるメニュー制御子のような実現方法が示されています。

[26] Geckoの少なくてもWindows版では、

+----------------------+----+
| Item 2               | ▼ |
+----------------------+----+
| Item 1                    |
| Item 2                    |
| /Group Label/             |
|   Subitem 1               |
|   Subitem 2               |
+---------------------------+

のようにレンダリングされます。

[27] Openwave SDKでは、 (展開時に)

+---------------------------+
| Item 1                    |
| Item 2                    |
|---------------------------|
| Group Label               |
| Subitem 1                 |
| Subitem 2                 |
+---------------------------+

のようにレンダリングされます。

[23] リスト箱: select要素でsize属性またはmultiple属性が指定されていた場合の伝統的な典型レンダリングは、いわゆるリスト箱制御子です。

+---------------------------+
| Item 1                    |
|*Item*2********************|
| Item 3                    |
+---------------------------+

のようにレンダリングされます。

[28] Openwave SDKでは、multipleだと

----------------------------
 [ ] Item 1                    
 [X] Item 2                    
----------------------------
 Group Label               
 [ ] Subitem 1                 
 [ ] Subitem 2                 

のように (チェック箱制御子のように) レンダリングされます。

[29] Openwaveでは、非標準のtype属性値によってもレンダリングが変換します。

• listなら、番号付きのリストとしてレンダリングします。これはフォーム制御子ではなく、WML 1.3のselect要素と同じ扱いです。
• popupなら、>>22のようにドロップダウン・リストとして表示されます。
• spinなら、>>23で高さ1行で表示されます。
• type属性なき場合は、formの子孫ならpopup、そうでなければlistとなります。

[18] Bidi との関係: select 要素は、 bidi 的には方向性に関して中立な文字1文字であるかのように扱います。 方向について特に配慮が必要なら 前後に LRM や RLM を使えます。 SI 4281 6.1.4

[32] 誤り処理

select 要素内での役割を果たすのは option と optgroup だけで、 その他の子供節点は、 スタイル・シートで特に指定されない限り、 レンダリングされません。 WF2 2.18

[40] ニンテンドー3DS のインターネットブラウザーでは、 モーダルなダイアログ箱としてレンダリングされます。 選択肢が画面の幅より長いと「・・・」で省略され、スクロールできません。

例

[11] 簡単なメニューの例 HTML 4 17.6

<FORM action="http://somesite.com/prog/component-select" method="post">
   <P>
   <SELECT multiple size="4" name="component-select">
      <OPTION selected value="Component_1_a">Component_1</OPTION>
      <OPTION selected value="Component_1_b">Component_2</OPTION>
      <OPTION>Component_3</OPTION>
      <OPTION>Component_4</OPTION>
      <OPTION>Component_5</OPTION>
      <OPTION>Component_6</OPTION>
      <OPTION>Component_7</OPTION>
   </SELECT>
   <INPUT type="submit" value="Send"><INPUT type="reset">
   </P>
</FORM>

この例は、7つの項目があるメニューで、複数選択可能です。 最初の2つの項目が初期状態で選択されています。 視覚 UA は4つの項目が見える状態でレンダリングし、 scroll 等により他の項目も見て選ぶことができるようにするべきです。

メモ

[17] select メニュー制御子を ComboBox としてレンダリングする視覚 UA は多いですが、その場合、 あらかじめ1つの項目が選択されている状態か、 何も選択されていない (空白が表示される) 状態になります。

どれか選択肢の一つがあらかじめ著者または UA により選択された状態になるとすると、利用者が本当にその項目を選んだのか、 何も考えずに (あるいはメニューの存在に気付かずに) 選ばれていたのかが区別できません。 また、 selected option がないと最初の項目を選ばずに空白を表示した状態となる UA は少なくないのですが、それはみっともない上に利用者が混乱する虞もあります。

そこで、 disabled な option を selected としておき、そのラベルを なんたらを選んでくださいなのような文字列としておくという手法がよく採られます。

但し、選びようが無いものが選択肢として含まれていることや disabled かつ selected であるということの気持ちの悪さがあります。 他に回避手段があるなら、そちらを採るべきでしょう。

[19] メニュー制御子はある項目に関する排他的な選択肢群から1つ選ぶ場合や、 ある項目に関して選択肢群からいくつか選ぶ場合に限って使うべきです。

悪い例: 複数のアカウントに個別に設定できる設定画面で 「現在設定対象アカウント」を選択するのはリスト表示制御子や木表示制御子 (や場合によってはタブ) のようなものを使うべきです。 プルダウン・メニュー制御子を使うとアカウントを1つ選択するかのような印象を利用者に与えてしまいます。

(名無しさん [sage])

[34] <select> with tabular data (Ian Hickson <ian@...> 著, 2008-10-22 06:47:00 +09:00 版) http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/16089 (名無しさん)