<select>

<select>

select 要素型 (HTML, XHTML 1)

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

[8] 仕様書:

[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-typeGecko 内部処理用形式非標準, 内部用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
sizeNUMBER列数[HTML 4]
styleスタイル情報[HTML 4] %coreattrs
tabindexNUMBERタブ順[HTML 4]
title注釈的題[HTML 4] %coreattrs
text%Color文字色非標準
type列挙型非標準

内容

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

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

[20] 区切り線

Safari では、 selectoptgroup子供として 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 ではないので、 sIDSP も含まれている。
  • ただ単に、担当者がアフォなだけ。

正しいのはどれだ? (名無しさん 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属性値によってもレンダリングが変換します。

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

[32] 誤り処理

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

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

実装

[68] Mosaic-L10N: Changes, , http://takadat.com/i/Mosaic-l10n/changes.html

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

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

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

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

不思議解釈

[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 は少なくないのですが、それはみっともない上に利用者が混乱する虞もあります。

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

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

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

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

歴史

HTML5

[71] [] (0) WF2: <select> element summary., Hixie, , https://github.com/whatwg/html/commit/739a3c891529b7be0ee55b6c2b65588872205917

[70] HTML要素概説
要素名
select
日付
説明
HTML5select が追加された。
出典

[34] <select> with tabular data (Ian Hickson <ian@...> 著, 版) http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/16089 (名無しさん)

[69] , https://web.archive.org/web/20110221025439/http://www.terrainformatica.com/htmlayout/logfile310.htm

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

[36] [whatwg] select element should have a required attribute ( 版) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2010-August/027778.html

[37] IRC logs: freenode / #whatwg / 20100810 ( 版) http://krijnhoetmer.nl/irc-logs/whatwg/20100810

[38] [whatwg] Improve select required ( 版) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2010-November/029045.html

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

[41] Document Object Model Views and Formatting ( ( 版)) 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 ( ( 版)) 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 ( ( 版)) 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. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=7721&to=7722

[45] <select> events table ( ( 版)) http://rodneyrehm.github.io/select-events/

[46] ncsa-mosaic/libhtmlw/HTMLformat.c at master · alandipert/ncsa-mosaic ( ( 版)) 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 ( ( 版)) http://html5.org/r/8667

[48] Web Applications 1.0 r8668 Clean up some stuff in the 'in select' insertion mode ( ( 版)) 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. ( ( 版)) 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. ( ( 版)) http://html5.org/r/8714

[6] Clarify <select> conformance requirements · whatwg/html@decb3e2 ( 版) https://github.com/whatwg/html/commit/decb3e244130e45f826e6bce0130d2642d4a4fcd

[15] Formalize custom element reactions · whatwg/html@27aa7bc ( 版) https://github.com/whatwg/html/commit/27aa7bc4fa6f168654a8c858f0773e611f679b39

[51] Remove the concept of CSS Bindings (annevk著, ) https://github.com/whatwg/html/commit/6c96beabfa41d6d28ab23633966b82c5cdb9fd94

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

[53] Make <select> special in innerText (zcorpan著, ) https://github.com/whatwg/html/commit/6aa98eb3c783a5543827a5d0ed2d4e9fa310e112

[54] [cgiowt] (3) PARSER: when inlining the fake tags, I missed that <sele… (Hixie著, ) https://github.com/whatwg/html/commit/56a9a3f2e77092f6cf953b09b117217232e9d852

[55] [e] (0) Clean up some stuff in the 'in select' insertion mode (Hixie著, ) https://github.com/whatwg/html/commit/2e0d23dbd5a28b49aea0e14debbef481e3339d8b

[56] Always leave isTrusted as true when firing events (annevk著, ) https://github.com/whatwg/html/commit/e64078e9dbe871f1316a49c5d16ddacb199d7c1e

[57] obscured: take <select multiple> into account (andreastt著, ) https://github.com/w3c/webdriver/commit/654adbbfdcd0f4225deb596ac006351752fad4c7

[58] Swap the words “pick” and “toggle” (§ 4.11.3 “Commands”) (delan著, ) 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 () https://github.com/whatwg/html/pull/3072

[60] element click: prevent selectedness change on <option disabled> (andreastt著, ) https://github.com/w3c/webdriver/commit/981a0feb166f7d8bfc855eb0e916b32fce3b0ed6

[61] Fix form inheritance behavior for autocapitalize (rlanday著, ) https://github.com/whatwg/html/commit/b7c21b1b56d77215d3d85ae14a072c090dbe6266

[62] Queue a task to run all the autofocusing steps (domenic著, ) https://github.com/whatwg/html/commit/185190cac859144cfcd78248b906f3adae1f0594

[63] Export terms 'list box' and 'drop-down box' for <select> (zcorpan著, ) 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 () https://github.com/whatwg/html/pull/4312

[65] Do not inherit text-transform (et al.) on form controls (jugglinmike著, ) https://github.com/whatwg/html/commit/b9997b7488a3b35515c30bb1627d361053cf2c2f

[66] Define what tabIndex returns when the tabindex attribute is not set (rakina著, ) https://github.com/whatwg/html/commit/15cf23a55d629e0b1286302c19634833a89292ab