にある使用例では、 [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] 選択されている選択肢があれば (成功していれば)、
メニュー制御子の名前と選択肢の初期値の組がフォーム処理エージェントに提出されます。
選択されているものが無ければ、何も送られません。
詳しくはフォームの[[提出]]の説明をご覧ください。
[[#comment]]
*** メモ
[[#comment]]
** レンダリング
[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]]
[[#comment]]
** 実装
[4] [[NC]] は [CODE(HTMLe)[[[form]]]] 要素外の [CODE(HTMLe)[select]] 要素を、
地の文と同じようにレンダリングします。[WEAK[素直に表現すれば、[Q[対応していません]]。]]
[[#comment]]
** 不思議解釈
[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つ選択するかのような印象を利用者に与えてしまいます。
([[名無しさん]] [sage])
[[#comment]]
* メモ