目次に戻る

select要素:HTML Living Standard各要素別メモ

概要

カテゴリー

W3C : HTML5.3Reassociateable elementにも属していた。

W3C : HTML5.3Autocapitalize-inheriting element自体が存在してなかった。

配置できる場所
内容モデル
  • 下記のいずれか。混在も可。
  • 上記に、0個以上のScript-supporting contentの混在も可。
  • 下記の条件をすべて満たす場合は、プレースホルダーラベルオプションを含まなければならない。
    • required属性が指定されている。
    • multiple属性が指定されてない。
    • size属性値1である(デフォルト1である場合も含む)。
  • 補足:プレースホルダーラベルオプションとは、下記の条件をすべて満たすoption要素である。
    • 親要素optgroup要素ではない。
    • select要素による選択肢セットの中の最初の選択肢である。
    • 当該option要素送信値空文字列である。
属性
  • グローバル属性
  • name送信用名前文字列。選択されたoption要素送信値とセットでフォーム送信される。属性値isindexを指定してはならない。
  • autocompleteonoffその他デフォルトは、関連付けられているform要素の設定値、それがない場合は、onオートコンプリート機能の設定。
  • disabledブーリアン属性。指定されたフォームコントロールは無効となる(操作できなくなり、送信値フォーム送信されない)。この状態は、スクリプトを用いないと解除できない。
  • form→同一HTML文書内にあるform要素id属性値。当該フォームに関連付ける。
  • multipleブーリアン属性。複数の選択肢を選択可能とする場合に指定。
  • requiredブーリアン属性。その項目の入力が必須の場合に指定。
  • size→0を除く非負整数。表示する選択肢数を指定。デフォルトは、multiple属性がある場合は4、そうでなければ11の場合は通常はドロップダウンリストになる。
  • W3C : HTML5.3name属性値isindexを指定してはならないとはされてなかった。
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • multiple属性が指定されてなく、かつ、size属性値1である(デフォルト1である場合も含む)場合は、
    • デフォルトroleは、comboboxデフォルトroleは、role属性値に指定すべきでない。
    • デフォルトrole以外では、menuを指定可。
  • 上記以外の場合は、
    • デフォルトroleは、listboxデフォルトroleは、role属性値に指定すべきでない。
    • デフォルトrole以外のroleは、指定不可。
  • required属性が指定されてる場合は、aria-required属性値trueでなければならない。
  • disabled属性が指定されてる場合は、aria-disabled属性は指定すべきではない。
視覚系ブラウザデフォルトとして期待されるCSS

  select {
    letter-spacing: initial;
    word-spacing: initial;
    line-height: initial;
    text-transform: initial;
    text-indent: initial;
    text-shadow: initial;
    text-align: initial;
    box-sizing: border-box;
  }
  
視覚系ブラウザにおいて期待されるレンダリング
  • size属性値1で、かつ、multiple属性がない場合は、高さ一行分かつ幅は選択項目の最大ラベル幅を表示するにたる分の、ドロップダウンボックスを表示。
  • multiple属性がある場合は、複数選択リストボックスを、inline-blockボックスで表示。
  • size属性値1より大きくて、かつ、multiple属性がない場合は、単数選択リストボックスを、inline-blockボックスで表示。
  • リストボックスの場合は、高さはsize属性値の行数分、幅は選択項目の最大ラベル幅を表示するにたる分に加えてスクロールバーの幅分。
  • 選択項目においては、optgroup要素option要素ラベルを表示する。
  • optgroup要素がある場合は、そのであるoption要素ラベルは、optgroup要素ラベルの下に字下げして表示する。
制約検証
  • 原則として、制約検証の対象。
  • disabled属性があれば、制約検証の対象から除外。
  • required属性があれば、必須の入力がなされてるかどうかチェック。この場合、プレースホルダーラベルオプションのみが選択されている場合は、必須の入力がされているとはみなされない。
  • multiple属性がなければ、複数の選択肢が選択されてないかどうかチェック。
ユーザーエージェントに対する特記事項
  • ユーザーがその選択にしたがってautocomplete属性による設定を無視することができるようにすることができる。
  • W3C : HTML5.3autocomplete属性に基づいてオートコンプリート機能を動作させる前に、当該入力コントロールが表示領域内に表示されていることを確認すべきであるとされていた。
HTML extension

属性に下記を追加。詳細は、HTML Form HTTP Extensionsを参照。

  • payload→値は下記のとおり。フォーム及び送信ボタンによる指定を無視して、当該要素送信値フォーム送信形式を指定する。
    • _actionURLの一部としてフォーム送信
    • _headerHTTP通信のヘッダデータとしてフォーム送信
    • _bodyHTTP通信の本体データとしてフォーム送信
意味・用法

選択肢のセットの中から選択させるためのフォームコントロールを表す。

私見・補足

プレースホルダーラベルオプションの趣旨は充分に理解できるけど、選択肢の一つが完全に「無」というのは気味が悪い。

disabledの状態のときのレンダリングについては、HTML Living Standardには明記がないようなのだが、HTML4.01仕様フォーム関連の規定では、ユーザーエージェントによるものとされていたので、それに基づいて実装しているブラウザが多いと思われる。

表示確認

ソース1

  <label>select要素→
  <select>
    <option selected="selected">optionその1</option>
    <optgroup label="optgroupその1">
      <option>optionその2</option>
      <option>optionその3</option>
      <option>optionその4</option>
    </optgroup>
  </select>
  </label>
  
表示結果1
IE5.5表示のスクリーンショット(表示結果1)
IE5.5表示:optgroup要素のラベルが選択肢に表示されてなく、option要素による表示だけがされている
ソース2

  <label>select要素→
  <select multiple="multiple">
    <option selected="selected" label="optionその1" value="op1"></option>
    <option label="optionその2" value="op2"></option>
    <option label="optionその3" value="op3"></option>
    <option label="optionその4" value="op4"></option>
    <option label="optionその5" value="op5"></option>
  </select>
  </label>
  
表示結果2

option要素label属性に対応してないブラウザもあるようだ。

IE6表示のスクリーンショット(表示結果2)
IE6表示:option要素のラベルが表示されてない。
ソース3:disabled属性の指定

  <label>select要素1→
  <select>
    <optgroup label="optgroupその1">
      <option selected="selected">optionその1</option>
      <option disabled="disabled">optionその2</option>
      <option>optionその3</option>
    </optgroup>
    <optgroup label="optgroupその2" disabled="disabled">
      <option>optionその4</option>
      <option>optionその5</option>
      <option>optionその6</option>
    </optgroup>
  </select>
  </label>
  <label>select要素2→
  <select disabled="disabled">
    <option selected="selected">optionその1</option>
    <option>optionその2</option>
    <option>optionその3</option>
  </select>
  </label>
  
表示結果3