中年おっちゃんでも出来た ウェブページ作成講座 with ? mark

option SELECTor

SELECT要素は、セレクトボックスを表示して選択肢を入力する、フォームコントロール部品要素。

• 要素の内容は、１個以上の OPTGROUP要素 又は、１個以上の OPTION要素です。

  OPTGROUP要素 - グループ分け

  OPTion GROUP

  OPTGROUP要素は、OPTION要素をグループに分けます。

  • 要素の内容は、１個以上の OPTION要素です。

  OPTION要素 - 選択肢

  OPTION

  OPTION要素は、要素の内容に選択項目を記述します。

  • 要素の内容は文字列（PCDATA）のみです。

W3C → XHTML 1.0 → Multi-part XHTML file → DTDs → XHTML-1.0-Strict より

<!ELEMENT select (optgroup|option)+>  <!-- option selector -->
<!ATTLIST select
  %attrs;
  name        CDATA          #IMPLIED
  size        %Number;       #IMPLIED
  multiple    (multiple)     #IMPLIED
  disabled    (disabled)     #IMPLIED
  tabindex    %Number;       #IMPLIED
  onfocus     %Script;       #IMPLIED
  onblur      %Script;       #IMPLIED
  onchange    %Script;       #IMPLIED  >
<!ELEMENT optgroup (option)+>   <!-- option group -->
<!ATTLIST optgroup
  %attrs;
  disabled    (disabled)     #IMPLIED
  label       %Text;         #REQUIRED  >
<!ELEMENT option (#PCDATA)>     <!-- selectable choice -->
<!ATTLIST option
  %attrs;
  selected    (selected)     #IMPLIED
  disabled    (disabled)     #IMPLIED
  label       %Text;         #IMPLIED
  value       CDATA          #IMPLIED  >

HTML記述

<p>
<label>八百屋
<select name="商品" size="8" tabindex="1">
<optgroup label="野菜">
<option>大根</option>
<option>人参</option>
</optgroup>
<optgroup label="果物">
<option>桃</option>
<option>栗</option>
<option>柿</option>
</optgroup>
<option selected="selected">その他</option>
</select>
</label>
</p>

表示例

八百屋 大根 人参 桃 栗 柿 その他

上記例を元に、各属性を検証して行きます。

name        CDATA          #IMPLIED

FORM要素を使用してサーバーにデータを送信する場合やスクリプトで使用し、データの項目になる名前を付けます。

• 同じページ内にname属性値は重複出来ません。
• id属性値と違ってもかまいません。

size        %Number;       #IMPLIED

<select name="商品" size="1" tabindex="2">

セレクトボックスの表示行を指定します。省略した場合、ブラウザで決定されますが、ほとんどのブラウザで " 1 " です。

disabled    (disabled)     #IMPLIED

該当要素を無効にして選択できないようにします。省略可。

<select name="商品" disabled="disabled">

<optgroup label="野菜" disabled="disabled">

<option disabled="disabled">栗</option>

tabindex    %Number;       #IMPLIED

ページ内で、『 Tab 』 キーが押下された場合の要素の選択順を指定します。省略可。

• 値は 0〜32764 です。
• tabindex属性が指定されていない場合は、ページの先頭から順に選択されていきます。
• 選択された要素を動作させる場合は、『 Enter 』 キーを押下します。

Web Content Accessibility Guidelines 1.0 → Guideline 9. Design for device-independence. → 9.4 より

9.4 Create a logical tab order through links, form controls, and objects. [Priority 3]
For example, in HTML, specify tab order via the "tabindex" attribute or ensure a logical page design.

9.4 リンク、フォームコントロール部品、OBJECT要素には、タブの順序を論理的に設定してください。[優先度3]
例えば、HTMLでは、tabindex属性を使用するか、ページ設計を論理的矛盾の無いようにして下さい。

onfocus     %Script;       #IMPLIED

要素が選択された場合に動作させるスクリプト名。省略可。

onblur      %Script;       #IMPLIED

要素の選択が外れた場合に動作させるスクリプト名。省略可。

onchange    %Script;       #IMPLIED

要素の選択が外れた時に、選択肢が選択された時と比べて、変化していた場合に動作させるスクリプト名。省略可。

label       %Text;         #REQUIRED

要素にラベルを付けます。省略可。

• OPTGROUP要素で使用した場合、グループの項目になります。

selected    (selected)     #IMPLIED

この属性が記述されている要素の選択肢が初期値の選択肢となります。省略不可。

• 1つの選択肢を選択済みにする必要があります。

value       CDATA          #IMPLIED

項目が選択された時のデータ。省略可。

• value属性省略時は、option要素の内容がデータになります。