[7] HTML の select
要素は、
メニュー制御子を作成します。
[8] 仕様書:
SELECT
, OPTGROUP
, and OPTION
elements
IW:HTML4:"interact/forms.html#edef-SELECT"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
を入れて、区切りを表すことができます。
[31] 空要素
HTML 4 では、 select
要素は空ではいけませんでした。
しかし、 Web Forms 2.0 では、
select
を空にして構いません。
ただし、利用者の混乱を防ぐため、
空かつ可視のままにしておくのは避けるようにするべきです。
WF2 2.3
[33] あああ (名無しさん 2007-04-05 13:41:46 +00:00)
[5]
現代の HTML DTD では普通 select
の内容模型は (
(や、それに加えて option
)*optgroup
) となっているものです。つまり、要素内容のはずです。
ところが、 i-XHTML の解説
http://www.nttdocomo.co.jp/p_s/imode/xhtml/s2.html#2_6
にある使用例では、 option
要素の外に IDEOGRAPHIC SPACE
が使用されています。さてどうしたことか。
select
の内容模型は混合内容である。s
に
IDSP
も含まれている。正しいのはどれだ? (名無しさん 2004-03-28 08:11:26 +00:00)
[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
要素が使われている場合のレンダリングは環境や利用者エージェントによって様々です。
+----------------------+----+ | Item 2 | ▼ | +----------------------+----+ | Item 1 | | Item 2 +-----------------+ | Group Label > | Subitem 1 | +--------------------------| Subitem 2 | +-----------------+
のように、多くのGUI環境におけるメニュー制御子のような実現方法が示されています。
+----------------------+----+ | 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 のインターネットブラウザーでは、 モーダルなダイアログ箱としてレンダリングされます。 選択肢が画面の幅より長いと「・・・」で省略され、スクロールできません。
[68] Mosaic-L10N: Changes, , 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 (名無しさん )
[67]
Chrome
では
disabled
属性の指定された
select
要素がなぜか上に重なる他の要素よりも更に上に表示され(ることがあり?)ます。
select
や他の要素の
z-index
では解決しません。
利用者エージェントスタイルシートにある
opacity
を
opacity: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
は少なくないのですが、それはみっともない上に利用者が混乱する虞もあります。
そこで、 disabled
な option
を selected
としておき、そのラベルを
なんたらを選んでくださいな
のような文字列としておくという手法がよく採られます。
但し、選びようが無いものが選択肢
として含まれていることや
disabled
かつ selected
であるということの気持ちの悪さがあります。
他に回避手段があるなら、そちらを採るべきでしょう。
[19] メニュー制御子はある項目に関する排他的な選択肢群から1つ選ぶ場合や、 ある項目に関して選択肢群からいくつか選ぶ場合に限って使うべきです。
悪い例: 複数のアカウントに個別に設定できる設定画面で 「現在設定対象アカウント」を選択するのはリスト表示制御子や木表示制御子 (や場合によってはタブ) のようなものを使うべきです。 プルダウン・メニュー制御子を使うとアカウントを1つ選択するかのような印象を利用者に与えてしまいます。
(名無しさん [sage])
[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