* 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 - [[Web Forms 2.0]] -- [CSECTION@en[3.2. Changes to existing controls]] -- [CSECTION@en[2.18. Handling unexpected elements and values]] [9] :状態:[[W3C]] [[勧告]] :[[名前空間URI]]:[CODE(URI)@en[[[http://www.w3.org/1999/xhtml]]]] :[[局所名]]:[CODE(HTMLe)@en[[[select]]]] ([Q@en[select]] ([Q[選択]]) より) :[[開始タグ]]:必須 :[[終了タグ]]:必須 :[[内容モデル]]: [CODE(SGML)@en[([CODE(HTMLe)[[[optgroup]]]] | [CODE(HTMLe)[[[option]]]])*]] :出現できる文脈:[CODE(SGML)[%[[formctrl]]]] な文脈 :[[属性]]: ,属性名 ,属性値 ,既定値 ,説明 ,出典 ,[CODE(HTMLa)@en[[[accesskey]]]] ,[CODE(SGML)@en[%[[Character]]]] ,(なし) , ,非標準 ,[CODE(HTMLa)@en[[[autoactivate]]]] , , , ,非標準 ,[CODE(HTMLa)@en[[[autocomplete]]]] , , , ,非標準 ,[[Dojo]] ,[CODE(HTMLa)[[[class]]]] , , ,[[級]] ,[HTML 4] %[[coreattrs]] ,[CODE(HTMLa)@en[[[dataurl]]]] , , , ,非標準 ,[[Dojo]] ,[CODE(HTMLa)[[[dir]]]] , , ,[[書字方向]] ,[HTML 4] %[[i18n]] ,[CODE(HTMLa)[[[disabled]]]] ,([[真偽値属性]]) ,([[偽]]) ,無効 ,[HTML 4] ,[CODE(HTMLa)@en[[[dojotype]]]] , , , ,非標準 ,[[Dojo]] ,[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)@en[[[maxlistlength]]]] , , , ,非標準 ,[[Dojo]] ,[CODE(HTMLa)@en[[[mode]]]] , , , ,非標準 ,[[Dojo]] ,[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 ,[CODE(HTMLa)@en[[[text]]]] ,[CODE(SGML)@en[%[[Color]]]] , ,[[文字色]] ,非標準 ,[CODE(HTMLa)@en[[[type]]]] ,[[列挙型]] , , ,非標準 ** 内容 [10] [CODE(HTMLe)[select]] 要素の子孫には、選択肢を表す [CODE(HTMLe)[[[option]]]] 要素を置きます。 [CODE(HTMLe)[option]] 要素は、最低1つは必要です。 選択肢をまとめるために [CODE(HTMLe)[[[optgroup]]]] 要素を使うことができます。 [[HTML 4]] では、 [CODE(HTMLe)[optgroup]] の入れ子は認められていません。 つまり、一階層しか作ることができません。それでも、 [CODE(HTMLe)[optgroup]] によって選択肢をまとめることで、利用者は目的の項目を探すことが楽になるでしょうし、 著者による選択肢の管理も楽になるかもしれません。 [20] '''区切り線''' [[Safari]] では、 [CODE(HTMLe)@en[[[select]]]] や [CODE(HTMLe)@en[[[optgroup]]]] の[[子供]]として [CODE(HTMLe)@en[[[hr]]]] を入れて、区切りを表すことができます。 ;; [[Dashboard]] のための機能だそうです。 [31] '''空要素''' [[HTML 4]] では、 [CODE(HTMLe)@en[[[select]]]] [[要素]]は[[空]]ではいけませんでした。 しかし、 [[Web Forms 2.0]] では、 [CODE(HTMLe)@en[[[select]]]] を[[空]]に[['''して構いません''']]。 ただし、[[利用者]]の混乱を防ぐため、 [[空]]かつ[[可視]]のままにしておくのは避けるように[['''するべきです''']]。 [SRC@en[WF2 2.3]] [33] あああ ([[名無しさん]] [WEAK[2007-04-05 13:41:46 +00:00]]) [[#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] 選択されている選択肢があれば (成功していれば)、 メニュー制御子の名前と選択肢の初期値の組がフォーム処理エージェントに提出されます。 選択されているものが無ければ、何も送られません。 詳しくはフォームの[[提出]]の説明をご覧ください。 ** レンダリング [21] [CODE(HTMLe)@en[[[select]]]][[要素]]は、使用されている環境によって、あるいは[[利用者エージェント]]によって、様々な形で[[レンダリング]]されます。[CODE(HTMLe)@en[[[optgroup]]]][[要素]]の有無で多くのバリエーションがありますし、同じ[[利用者エージェント]]でも[CODE(HTMLe)@en[[[multiple]]]][[属性]]の有無や[CODE(HTMLe)@en[[[size]]]][[属性]]の有無で[[widget]]が変わるのが一般的です。 [22] '''ドロップダウン・リスト''' [CODE(HTMLe)@en[[[select]]]][[要素]]に[CODE(HTMLa)@en[[[multiple]]]][[属性]]も[CODE(HTMLa)@en[[[size]]]][[属性]]も指定されていないときの伝統的な[[典型レンダリング]]は、いわゆる[[ドロップダウン・リスト]][[制御子]]です。普段は [PRE(aafig)[ +----------------------+----+ | Item 2 | ▼ | +----------------------+----+ ]PRE] のように[[選択]]された項目だけが表示されていますが、[[活性化]]されると [PRE(aafig)[ +----------------------+----+ | Item 2 | ▼ | +----------------------+----+ | Item 1 | | Item 2 | | Item 3 | +---------------------------+ ]PRE] のように選択肢が表示されます。選択肢一覧は[Q[浮かんで]]表示され、元々その場所に[[レンダリング]]されていた内容は隠れます。[[利用者エージェント]]や環境によっては、元々表示されていた部分も隠れて [PRE(aafig)[ +---------------------------+ | Item 1 | | Item 2 | | Item 3 | +---------------------------+ ]PRE] のようになることもあります。なお、[[コンボボックス]][[制御子]]とは異なり、元々表示されていた部分を[[利用者]]が直接編集することはできないのが普通です。 [24] [CODE(HTMLe)@en[[[optgroup]]]][[要素]]が使われている場合の[[レンダリング]]は環境や[[利用者エージェント]]によって様々です。 [25] [[HTML 4]]仕様書の[[レンダリング]]例では、 [PRE(aafig)[ +----------------------+----+ | Item 2 | ▼ | +----------------------+----+ | Item 1 | | Item 2 +-----------------+ | Group Label > | Subitem 1 | +--------------------------| Subitem 2 | +-----------------+ ]PRE] のように、多くの[[GUI]]環境における[[メニュー]][[制御子]]のような実現方法が示されています。 [26] [[Gecko]]の少なくても[[Windows]]版では、 [PRE(aafig)[ +----------------------+----+ | Item 2 | ▼ | +----------------------+----+ | Item 1 | | Item 2 | | /Group Label/ | | Subitem 1 | | Subitem 2 | +---------------------------+ ]PRE] のように[[レンダリング]]されます。 [27] [[Openwave SDK]]では、 (展開時に) [PRE(aafig)[ +---------------------------+ | Item 1 | | Item 2 | |---------------------------| | Group Label | | Subitem 1 | | Subitem 2 | +---------------------------+ ]PRE] のように[[レンダリング]]されます。 ;; 選択できない[CODE(HTMLa)@en[[[label]]]]と選択できる[CODE(HTMLe)@en[[[option]]]]が同じように[[レンダリング]]されるのは、[[利用可能性]]的によくないです。 [23] '''リスト箱''': [CODE(HTMLe)@en[[[select]]]][[要素]]で[CODE(HTMLa)@en[[[size]]]][[属性]]または[CODE(HTMLa)@en[[[multiple]]]][[属性]]が指定されていた場合の伝統的な[[典型レンダリング]]は、いわゆる[[リスト箱]][[制御子]]です。 [PRE(aafig)[ +---------------------------+ | Item 1 | |*Item*2********************| | Item 3 | +---------------------------+ ]PRE] のように[[レンダリング]]されます。 [28] [[Openwave SDK]]では、[CODE(HTMLa)@en[[[multiple]]]]だと [PRE(aafig)[ ---------------------------- [ ] Item 1 [X] Item 2 ---------------------------- Group Label [ ] Subitem 1 [ ] Subitem 2 ]PRE] のように ([[チェック箱]][[制御子]]のように) [[レンダリング]]されます。 [29] [[Openwave]]では、非標準の[CODE(HTMLa)@en[[[type]]]][[属性値]]によっても[[レンダリング]]が変換します。 - [CODE(HTML)@en[[[list]]]]なら、番号付きのリストとして[[レンダリング]]します。これは[[フォーム]][[制御子]]ではなく、[[WML 1.3]]の[CODE(XMLe)@en[[[select]]]][[要素]]と同じ扱いです。 - [CODE(HTML)@en[[[popup]]]]なら、>>22のように[[ドロップダウン・リスト]]として表示されます。 - [CODE(HTML)@en[[[spin]]]]なら、>>23で高さ1行で表示されます。 - [CODE(HTMLa)@en[[[type]]]][[属性]]なき場合は、[CODE(HTMLe)@en[[[form]]]]の[[子孫]]なら[CODE(HTML)@en[[[popup]]]]、そうでなければ[CODE(HTML)@en[[[list]]]]となります。 [18] '''Bidi との関係''': [CODE(HTMLe)[[[select]]]] [[要素]]は、 [[bidi]] 的には方向性に関して[[中立]]な[[文字]]1[[文字]]であるかのように扱います。 方向について特に配慮が必要なら 前後に [CODE(char)[[[LRM]]]] や [CODE(char)[[[RLM]]]] を使えます。 [SRC[SI 4281 6.1.4]] [32] '''誤り処理''' [CODE(HTMLe)@en[[[select]]]] [[要素]]内での役割を果たすのは [CODE(HTMLe)@en[[[option]]]] と [CODE(HTMLe)@en[[[optgroup]]]] だけで、 その他の[[子供節点]]は、 [[スタイル・シート]]で特に指定されない限り、 [[レンダリング]]されません。 [SRC@en[WF2 2.18]] [40] [[ニンテンドー3DS]] の[[インターネットブラウザー]]では、 [[モーダル]]な[[ダイアログ箱]]としてレンダリングされます。 選択肢が画面の幅より長いと「・・・」で省略され、スクロールできません。 * 実装 [68] [CITE[Mosaic-L10N: Changes]], [TIME[2017-09-14T23:06:30.000Z]], [TIME[2024-08-16T07:47:05.422Z]] [4] [[NC]] は [CODE(HTMLe)[[[form]]]] 要素外の [CODE(HTMLe)[select]] 要素を、 地の文と同じようにレンダリングします。[WEAK[素直に表現すれば、[Q[対応していません]]。]] [30] [CITE[IEBlog : For the SELECT few...]] ([[名無しさん]] [TIME[2006-02-01 00:06:13 +00:00]]) [67] [[Chrome]] では [CODE[disabled][disabled=""]] 属性の指定された [CODE[select]] [[要素]]がなぜか上に重なる他の[[要素]]よりも更に上に表示され(ることがあり?)ます。 [CODE[select]] や他の[[要素]]の [CODE[z-index]] では解決しません。 [[利用者エージェントスタイルシート]]にある [CODE[opacity]] を [CODE[[[opacity]]:0]] で上書きしてやれば解消されます。 [CODE[select]] [[要素]]特有の何か特殊な処理の絡みでおかしなことが起こっているのでしょうか。 [TIME[2021-11-25T08:20:14.800Z]] * 不思議解釈 [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つ選択するかのような印象を利用者に与えてしまいます。 * 歴史 ** HTML5 [71] [CITE@en['''['''''']''' (0) WF2: with tabular data]] ([[Ian Hickson ]] 著, [TIME[2008-10-22 06:47:00 +09:00]] 版) ([[名無しさん]]) [69] [TIME[2024-08-17T09:48:21.000Z]], [TIME[2011-02-21T02:56:18.909Z]] [35] [CITE[PakuReserve R&D Laboratory » パクレゼルヴもラボ的な開発部ブログを作ってみる]] ([TIME[2010-01-05 18:03:06 +09:00]] 版) [36] [CITE['''['''whatwg''']''' select element should have a required attribute]] ([TIME[2010-08-10 09:35:21 +09:00]] 版) [37] [CITE[IRC logs: freenode / #whatwg / 20100810]] ([TIME[2010-08-15 11:23:35 +09:00]] 版) [38] [CITE['''['''whatwg''']''' Improve select required]] ([TIME[2010-11-16 11:57:04 +09:00]] 版) [39] [CITE@en[Web Applications 1.0 r6070 Spec the 'select' event.]] ( ([TIME[2011-05-05 08:21:00 +09:00]] 版)) [41] [CITE@en-US[Document Object Model Views and Formatting]] ( ([TIME[2004-02-23 21:42:28 +09:00]] 版)) [42] [CITE@en-US[Document Object Model Views and Formatting]] ( ([TIME[2004-02-23 21:42:28 +09:00]] 版)) [43] [CITE[WWW-Talk Apr-Jun 1993: Re: Standardizing new HTML features]] ( ([TIME[2013-03-05 12:52:00 +09:00]] 版)) [44] [CITE@en[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.]] ( ([TIME[2013-02-13 09:03:00 +09:00]] 版)) [45] [CITE@de[.innerHTML = ' in scope first]] ( ([TIME[2014-06-10 15:33:00 +09:00]] 版)) [48] [CITE@en[Web Applications 1.0 r8668 Clean up some stuff in the 'in select' insertion mode]] ( ([TIME[2014-06-10 15:43:00 +09:00]] 版)) [49] [CITE@en[Web Applications 1.0 r8714 Try to define what happens when you insert multiple