属性名	属性値	既定値	説明	出典
`accesskey`	`%Character`	(なし)		非標準
`autoactivate`				非標準
`autocomplete`				非標準	Dojo
`class`			級	[HTML 4] %coreattrs
`dataurl`				非標準	Dojo
`dir`			書字方向	[HTML 4] %i18n
`disabled`	(真偽値属性)	(偽)	無効	[HTML 4]
`dojotype`				非標準	Dojo
`id`			一意識別子	[HTML 4] %coreattrs
`lang`			自然言語	[HTML 4] %i18n
`xml:lang`			自然言語	[XHTML 1]
`_moz-type`			Gecko 内部処理用形式	非標準, 内部用	Gecko
`maxlistlength`				非標準	Dojo
`mode`				非標準	Dojo
`multiple`	(真偽値属性)	(偽)	複数選択可能	[HTML 4]
`name`			制御子名	[HTML 4]
`onblur`	`%Script`		失焦点時	[HTML 4]
`onchange`	`%Script`		変更時	[HTML 4]
`onclick`				[HTML 4] %events
`ondblclick`				[HTML 4] %events
`onfocus`	`%Script`		得焦点時	[HTML 4]
`onkeydown`				[HTML 4] %events
`onkeypress`				[HTML 4] %events
`onkeyup`				[HTML 4] %events
`onmousedown`				[HTML 4] %events
`onmousemove`				[HTML 4] %events
`onmouseout`				[HTML 4] %events
`onmouseover`				[HTML 4] %events
`onmouseup`				[HTML 4] %events
`size`	`NUMBER`		列数	[HTML 4]
`style`			スタイル情報	[HTML 4] %coreattrs
`tabindex`	`NUMBER`		タブ順	[HTML 4]
`title`			注釈的題	[HTML 4] %coreattrs
`text`	`%Color`		文字色	非標準
`type`	列挙型			非標準

内容

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

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

[20] 区切り線

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

Dashboard のための機能だそうです。

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

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

i-XHTML

[5] 現代の HTML DTD では普通 select の内容模型は (option)* (や、それに加えて optgroup) となっているものです。つまり、要素内容のはずです。

ところが、 i-XHTML の解説 http://www.nttdocomo.co.jp/p_s/imode/xhtml/s2.html#2_6 にある使用例では、 option 要素の外に IDEOGRAPHIC SPACE が使用されています。さてどうしたことか。

この例は、 copy & paste で使えるものではなく、一度印刷してから再入力することを想定している(藁)。
i-XHTML では、 select の内容模型は混合内容である。
i-XHTML は XML ではないので、 s に IDSP も含まれている。
ただ単に、担当者がアフォなだけ。

正しいのはどれだ? (名無しさん 2004-03-28 08:11:26 +00:00)

フォーム制御子

制御子名

[14] 制御子名は、 name 属性によって指定します。

初期状態

[12] 初期状態で選択されている項目は、 option 要素の selected 属性によって指定します。選択肢の初期値は option 要素の value 属性か要素の内容によって指定します。

詳しくはそれぞれの説明をご覧ください。

成功

[13] 選択肢は、選択されていれば (select name と組合せて) 成功状態となります。選択されている項目が一つもなければ、その制御子は成功ではなく、名前も値も提出されません。 HTML 4 17.6

提出

[16] 選択されている選択肢があれば (成功していれば)、メニュー制御子の名前と選択肢の初期値の組がフォーム処理エージェントに提出されます。選択されているものが無ければ、何も送られません。詳しくはフォームの提出の説明をご覧ください。

レンダリング

[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                 |
+---------------------------+

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

選択できないlabelと選択できるoptionが同じようにレンダリングされるのは、利用可能性的によくないです。

[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 のインターネットブラウザーでは、モーダルなダイアログ箱としてレンダリングされます。選択肢が画面の幅より長いと「・・・」で省略され、スクロールできません。

実装

[68] Mosaic-L10N: Changes, 2017-09-14T23:06:30.000Z, 2024-08-16T07:47:05.422Z http://takadat.com/i/Mosaic-l10n/changes.html

[4] NC は form 要素外の select 要素を、地の文と同じようにレンダリングします。素直に表現すれば、対応していません。

[30] IEBlog : For the SELECT few... http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx (名無しさん 2006-02-01 00:06:13 +00:00)

[67] Chrome では disabled 属性の指定された select 要素がなぜか上に重なる他の要素よりも更に上に表示され(ることがあり?)ます。 select や他の要素の z-index では解決しません。

利用者エージェントスタイルシートにある opacity を opacity:0 で上書きしてやれば解消されます。 select 要素特有の何か特殊な処理の絡みでおかしなことが起こっているのでしょうか。 2021-11-25T08:20:14.800Z

不思議解釈

[1] 不思議マーク付けで、 HP の更新履歴や管理人の一言コメント的日記のようなものを書くためのタグ。ドロップダウン・リストとかで表示されるんだけど、その項目は頭に <option> というタグを入れる。

[2] >>1 のような使い方は CSS + DOM で出来なくも無いけど、面倒だし、 display: -x-pulldown-list みたいな指定が出来るといいよな。

select 要素とは関係ないけど、マウスを乗せたらでてくるメニューとかもよくあるけど、そういうのも含めて、従来の window system が持っていた色々な界面というか control というかを、 CSS で再現できて損はしないと思うのだ。 CSS3+ に期待。

[3] >>1 他には、当該 HP にあるお部屋の一覧としても使われる。関連付けられた JScript などの code の動作により、項目を選択したらそのお部屋に瞬間移動出来る優れもの(藁。

例

[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つ選択するかのような印象を利用者に与えてしまいます。