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

概要

カテゴリー

• Flow content
• Phrasing content
• Interactive content
• Form-associated element
  • Listed element
  • Labelable element
  • Submittable element
  • Resettable element
  • Autocapitalize-inheriting element
• Palpable content

配置できる場所

• 上記カテゴリーの要素が置ける場所。

内容モデル

• 下記のいずれか。混在も可。
  • 0個以上のoption要素。
  • 0個以上のoptgroup要素。
  • 0個以上のhr要素。
• 上記に、0個以上のScript-supporting contentの混在も可。
• 下記の条件をすべて満たす場合は、プレースホルダーラベルオプションを含まなければならない。
  • required属性が指定されている。
  • multiple属性が指定されてない。
  • size属性値が1である（デフォルトで1である場合も含む）。
• 補足：プレースホルダーラベルオプションとは、下記の条件をすべて満たすoption要素である。
  • 親要素がoptgroup要素ではない。
  • select要素による選択肢セットの中の最初の選択肢である。
  • 当該option要素の送信値が空文字列である。

属性

• グローバル属性
• name→送信用名前文字列。選択されたoption要素の送信値とセットでフォーム送信される。属性値にisindexを指定してはならない。
• autocomplete→on、off、その他。デフォルトは、所属フォームの設定値、それがない場合は、on。自動補完機能の設定。
• disabled→ブーリアン属性。指定されたフォームコントロールは無効となる（操作できなくなり、送信値はフォーム送信されない）。この状態は、スクリプトを用いないと解除できない。
• form→同一HTML文書内にあるform要素のid属性値。所属フォームを指定する。
• multiple→ブーリアン属性。複数の選択肢を選択可能とする場合に指定。
• required→ブーリアン属性。その項目の入力が必須の場合に指定。
• size→0を除く非負整数。表示する選択肢数を指定。デフォルトは、multiple属性がある場合は4、そうでなければ1。1の場合は通常はドロップダウンリストになる。

HTML構文におけるタグの省略

• 省略不可。

WAI-ARIA

• multiple属性が指定されてなく、かつ、size属性値が1である（デフォルトで1である場合も含む）場合は、
  • デフォルトroleは、combobox。デフォルトroleをrole属性値に指定することは、推奨されない。
  • デフォルトrole以外では、menuを指定可。
• そうでない場合は、
  • デフォルトroleは、listbox。デフォルトroleをrole属性値に指定することは、推奨されない。
  • デフォルトrole以外のroleは、指定不可。
• disabled属性が指定されている場合は、aria-disabled属性を指定すべきではない。
• disabled属性が指定されている場合は、aria-disabled属性値にfalseを指定してはならない。
• required属性が指定されている場合は、aria-required属性を指定すべきではない。
• required属性が指定されている場合は、aria-required属性値にfalseを指定してはならない。
• aria-multiselectable属性を指定すべきではない。

視覚系ブラウザのデフォルトとして期待される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;
    appearance: auto;
  }
  select:autofill {field-sizing: fixed !important;}
  

視覚系ブラウザにおいて期待されるレンダリング

• field-sizingプロパティの適用が期待される。
• multiple属性がある場合は、複数選択リストボックスを、inline-blockボックスで表示。
• size属性値が1より大きくて、かつ、multiple属性がない場合は、単数選択リストボックスを、inline-blockボックスで表示。
• リストボックスの場合は、幅は選択項目の最大ラベル幅を表示するにたる分に加えてスクロールバーの幅分。
• リストボックスの場合、その高さは
  • field-sizingプロパティの計算値がcontentの場合は、すべての項目を表示できる行数分。
  • size属性がない場合及びsize属性値が非妥当値の場合は、４行分。
  • 前二項以外の場合は、size属性値で指定された行数分。
• size属性値が1で、かつ、multiple属性がない場合は、高さ一行分のinline-blockのドロップダウンボックスを表示。
• ドロップダウンボックスの場合、その表示幅は
  • field-sizingプロパティの計算値がcontentの場合は、選択項目のラベルテキストの文字幅。
  • 前項以外の場合は、すべての選択項目のラベルテキストのうち最大のものの文字幅。
• 選択項目においては、optgroup要素、option要素のラベルを表示する。
• optgroup要素がある場合は、その子であるoption要素のラベルは、親optgroup要素のラベルの下に字下げして表示する。
• select要素の子として一つ以上の連続したhr要素がある場合は、単一の区切りとしてレンダリングされてもよい。

制約検証

• 原則として、制約検証の対象。
• disabled属性があれば、制約検証の対象から除外。
• required属性があれば、必須の入力がなされてるかどうかチェック。この場合、プレースホルダーラベルオプションのみが選択されている場合は、必須の入力がされているとはみなされない。

ユーザーエージェントに対する特記事項

• ユーザーがその選択にしたがってautocomplete属性による設定を無視することができるようにすることができる。

意味・用法

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

アクセシビリティ関連

• autocomplete属性値のその他は、ユーザーエージェントが入力目的を機械的に特定するためにも有用である（Techniques for WCAG 2.1 : H98）。

私見・補足

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

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

表示確認

ソース１

  <label>select要素→
  <select>
    <option selected="selected">optionその１</option>
    <optgroup label="optgroupその１">
      <option>optionその２</option>
      <option>optionその３</option>
      <option>optionその４</option>
    </optgroup>
  </select>
  </label>
  

表示結果１

select要素→ optionその１ optionその２ optionその３ optionその４

ソース２

  <label>select要素→
  <select multiple="multiple">
    <option selected="selected" label="optionその１" value="op1"></option>
    <option label="optionその２" value="op2"></option>
    <option label="optionその３" value="op3"></option>
    <option label="optionその４" value="op4"></option>
    <option label="optionその５" value="op5"></option>
  </select>
  </label>
  

表示結果２

select要素→

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

ソース３：disabled属性の指定

  <label>select要素１→
  <select>
    <optgroup label="optgroupその１">
      <option selected="selected">optionその１</option>
      <option disabled="disabled">optionその２</option>
      <option>optionその３</option>
    </optgroup>
    <optgroup label="optgroupその２" disabled="disabled">
      <option>optionその４</option>
      <option>optionその５</option>
      <option>optionその６</option>
    </optgroup>
  </select>
  </label>
  <label>select要素２→
  <select disabled="disabled">
    <option selected="selected">optionその１</option>
    <option>optionその２</option>
    <option>optionその３</option>
  </select>
  </label>
  

表示結果３

select要素１→ optionその１ optionその２ optionその３ optionその４ optionその５ optionその６ select要素２→ optionその１ optionその２ optionその３