select 要素型 (HTML, XHTML 1)

[7] HTML の select 要素は、メニュー制御子を作成します。

[8] 仕様書:

SI 4281:1998 http://www.qsm.co.il/Hebrew/si4281e.htm
- 6.1.4 Elements with no directionality
- 8.3 Rendering the Form
HTML 4 (Web Forms 1.0)
- menus IW:HTML4:"interact/forms.html#menu"
- 17.6 The SELECT, OPTGROUP, and OPTION elements IW:HTML4:"interact/forms.html#edef-SELECT"
Web Forms 2.0
- 3.2. Changes to existing controls
- 2.18. Handling unexpected elements and values IW:WF2:"#handling"

[9]

状態

W3C 勧告

名前空間URI

http://www.w3.org/1999/xhtml

局所名

select (select (選択) より)

開始タグ

必須

終了タグ

必須

内容モデル

(optgroup | option)*

出現できる文脈

%formctrl な文脈

属性

属性名	属性値	既定値	説明	出典
`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 に IDSPIDEOGRAPHIC SPACE も含まれている。
ただ単に、担当者がアフォなだけ。

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

不思議解釈

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

歴史

HTML5

[71] [] (0) WF2: <select> element summary., Hixie, 2008-09-04 19:51:27 +09:00, 2024-09-04T13:06:06.000Z https://github.com/whatwg/html/commit/739a3c891529b7be0ee55b6c2b65588872205917

[70]

HTML要素概説

要素名

select

日付

2008-09-04

説明

2008-09-04、 HTML5 に select が追加された。

出典

HTML5 r2148, Hixie, 2008-09-04 19:51:27 +09:00, 2024-09-04T13:06:06.000Z https://github.com/whatwg/html/commit/739a3c891529b7be0ee55b6c2b65588872205917

[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 (名無しさん)

[69] 2024-08-17T09:48:21.000Z, 2011-02-21T02:56:18.909Z https://web.archive.org/web/20110221025439/http://www.terrainformatica.com/htmlayout/logfile310.htm

[35] PakuReserve R&D Laboratory » パクレゼルヴもラボ的な開発部ブログを作ってみる (2010-01-05 18:03:06 +09:00 版) http://labs.pakureserve.jp/archives/5

[36] [whatwg] select element should have a required attribute (2010-08-10 09:35:21 +09:00 版) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2010-August/027778.html

[37] IRC logs: freenode / #whatwg / 20100810 (2010-08-15 11:23:35 +09:00 版) http://krijnhoetmer.nl/irc-logs/whatwg/20100810

[38] [whatwg] Improve select required (2010-11-16 11:57:04 +09:00 版) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2010-November/029045.html

[39] Web Applications 1.0 r6070 Spec the 'select' event. ( (2011-05-05 08:21:00 +09:00 版)) http://html5.org/tools/web-apps-tracker?from=6069&to=6070

[41] Document Object Model Views and Formatting ( (2004-02-23 21:42:28 +09:00 版)) http://www.w3.org/TR/2004/NOTE-DOM-Level-3-Views-20040226/views-formatting.html#Views-View-select

[42] Document Object Model Views and Formatting ( (2004-02-23 21:42:28 +09:00 版)) http://www.w3.org/TR/2004/NOTE-DOM-Level-3-Views-20040226/views-formatting.html#VisualView-select

[43] WWW-Talk Apr-Jun 1993: Re: Standardizing new HTML features ( (2013-03-05 12:52:00 +09:00 版)) http://1997.webhistory.org/www.lists/www-talk.1993q2/0188.html

[44] Web Applications 1.0 r7722 Try to define order for supported property names. This is not based on testing. If there are compatibility constraints here that prevent implementing this as specced, please let me know. ( (2013-02-13 09:03:00 +09:00 版)) http://html5.org/tools/web-apps-tracker?from=7721&to=7722

[45] <select> events table ( (2013-03-26 03:31:43 +09:00 版)) http://rodneyrehm.github.io/select-events/

[46] ncsa-mosaic/libhtmlw/HTMLformat.c at master · alandipert/ncsa-mosaic ( (2014-04-07 06:11:26 +09:00 版)) https://github.com/alandipert/ncsa-mosaic/blob/master/libhtmlw/HTMLformat.c#L4023

[47] Web Applications 1.0 r8667 PARSER: when inlining the fake tags, I missed that <select>.innerHTML = '<select>' would crash if we did not check for a <select> in scope first ( (2014-06-10 15:33:00 +09:00 版)) http://html5.org/r/8667

[48] Web Applications 1.0 r8668 Clean up some stuff in the 'in select' insertion mode ( (2014-06-10 15:43:00 +09:00 版)) http://html5.org/r/8668

[49] Web Applications 1.0 r8714 Try to define what happens when you insert multiple <option selected> elements into a <select> element. ( (2014-08-07 08:12:00 +09:00 版)) http://html5.org/r/8714

[50] Web Applications 1.0 r8714 Try to define what happens when you insert multiple <option selected> elements into a <select> element. ( (2014-08-07 08:12:00 +09:00 版)) http://html5.org/r/8714

[6] Clarify <select> conformance requirements · whatwg/html@decb3e2 (2015-08-28 16:40:37 +09:00 版) https://github.com/whatwg/html/commit/decb3e244130e45f826e6bce0130d2642d4a4fcd

[15] Formalize custom element reactions · whatwg/html@27aa7bc (2016-04-26 18:56:40 +09:00 版) https://github.com/whatwg/html/commit/27aa7bc4fa6f168654a8c858f0773e611f679b39

[51] Remove the concept of CSS Bindings (annevk著, 2016-07-08 02:00:41 +09:00) https://github.com/whatwg/html/commit/6c96beabfa41d6d28ab23633966b82c5cdb9fd94

[52] Editorial: Cross-reference DOM "child" where appropriate in rendering (zcorpan著, 2016-09-20 20:16:41 +09:00) https://github.com/whatwg/html/commit/e8c91c05edc8d6cdb33fdd5452e052359d40490b

[53] Make <select> special in innerText (zcorpan著, 2016-11-04 01:27:04 +09:00) https://github.com/whatwg/html/commit/6aa98eb3c783a5543827a5d0ed2d4e9fa310e112

[54] [cgiowt] (3) PARSER: when inlining the fake tags, I missed that <sele… (Hixie著, 2014-06-10 15:33:22 +09:00) https://github.com/whatwg/html/commit/56a9a3f2e77092f6cf953b09b117217232e9d852

[55] [e] (0) Clean up some stuff in the 'in select' insertion mode (Hixie著, 2014-06-10 15:43:28 +09:00) https://github.com/whatwg/html/commit/2e0d23dbd5a28b49aea0e14debbef481e3339d8b

[56] Always leave isTrusted as true when firing events (annevk著, 2016-11-17 01:18:27 +09:00) https://github.com/whatwg/html/commit/e64078e9dbe871f1316a49c5d16ddacb199d7c1e

[57] obscured: take <select multiple> into account (andreastt著, 2017-04-18 01:12:01 +09:00) https://github.com/w3c/webdriver/commit/654adbbfdcd0f4225deb596ac006351752fad4c7

[58] Swap the words “pick” and “toggle” (§ 4.11.3 “Commands”) (delan著, 2017-09-27 19:39:13 +09:00) https://github.com/whatwg/html/commit/75cce6222c87a0d331fd5b709239521bd5b14e45

[59] Swap the words “pick” and “toggle” (§ 4.11.3 “Commands”) by delan · Pull Request #3072 · whatwg/html (2017-09-29 15:20:22 +09:00) https://github.com/whatwg/html/pull/3072

[60] element click: prevent selectedness change on <option disabled> (andreastt著, 2018-01-10 22:05:22 +09:00) https://github.com/w3c/webdriver/commit/981a0feb166f7d8bfc855eb0e916b32fce3b0ed6

[61] Fix form inheritance behavior for autocapitalize (rlanday著, 2018-01-25 08:58:12 +09:00) https://github.com/whatwg/html/commit/b7c21b1b56d77215d3d85ae14a072c090dbe6266

[62] Queue a task to run all the autofocusing steps (domenic著, 2018-03-07 14:32:39 +09:00) https://github.com/whatwg/html/commit/185190cac859144cfcd78248b906f3adae1f0594

[63] Export terms 'list box' and 'drop-down box' for <select> (zcorpan著, 2019-01-23 00:16:46 +09:00) https://github.com/whatwg/html/commit/4b13e5f0cffda12489f3a9fc8f72874a56f97787

[64] Export terms 'list box' and 'drop-down box' for <select> by zcorpan · Pull Request #4312 · whatwg/html (2019-06-03 20:21:16 +09:00) https://github.com/whatwg/html/pull/4312

[65] Do not inherit text-transform (et al.) on form controls (jugglinmike著, 2019-08-29 19:14:53 +09:00) https://github.com/whatwg/html/commit/b9997b7488a3b35515c30bb1627d361053cf2c2f

[66] Define what tabIndex returns when the tabindex attribute is not set (rakina著, 2019-07-10 03:13:55 +09:00) https://github.com/whatwg/html/commit/15cf23a55d629e0b1286302c19634833a89292ab

[72] 西暦1990年代にメニューとして使われた select はまだ「移動」ボタンが隣についてて選んだだけでは移動しないのが多いですね。

[73] 確か平成時代初期末期から平成時代中期初め頃に勝手に移動するタイプが徐々に増えていって、プルダウンメニューの意味論を破壊するヤバいヤツという批判はありつつ便利だから一般化していって、わざわざ移動ボタンなんて付けないのが増えていきましたね。

[74] 今だと移動ボタンがあると逆に冗長、勝手に移動しないとあれれ、って感じちゃいますね。

select 要素型 (HTML, XHTML 1)

内容

i-XHTML

フォーム制御子

制御子名

初期状態

成功

提出

レンダリング

実装

不思議解釈

例

メモ

歴史

HTML5