<select>要素

Technical Summary

Definition / Categories

項目	仕様上の整理
意味	optionの集合から値を選ぶためのコントロール
Context	phrasing contentが期待される場所
Categories	flow、phrasing、interactive、listed、labelable、submittable、resettable、form-associated、palpable
Content model	drop-down boxでは0個または1個の先頭のbutton、続いてoption、optgroup、hr、script-supporting、noscript、divなど
Tag omission	開始タグ・終了タグとも省略不可

実装者向けの最新のselect拡張では、先頭のbuttonやselectedcontentが関係する境界があります。本ページの初期Coverageでは、従来から広く使われるoption・optgroupを中心に整理し、カスタマイズされたselectの実装差はOpen Issuesに残します。

単一選択・複数選択・表示サイズ

条件	意味 / 表示上の境界	主な帰結
multipleなし	単一選択	選択されたoptionは通常1つ。別のoptionが選択されると、他のoptionのselectednessはfalseになる
multipleあり	複数選択	0個以上のoptionを選択でき、複数の値が送信対象になる
sizeが1より大きい	list boxとして表示されうる	複数行の選択UIとアクセシビリティマッピングが関係する
size省略	単一選択では表示サイズ1、multipleでは実装上の既定表示サイズが関係する	size属性の値とIDLの既定値を混同しない

multipleは単なる表示切替ではなく、選択できる値の数、操作、フォーム送信、アクセシビリティ上の役割境界に影響します。

Option listとselectedness

selectのoption listは、子孫のoptionを仕様上の順序で集めたものです。optgroupは選択肢を整理するグループであり、選択できる対象はoptionです。

概念	意味	確認点
selected属性	HTMLに記録された初期選択の指定	リセット時の基準になるdefault selectednessと関係する
selectedness	現在そのoptionが選択されているかという状態	ユーザー操作やDOM APIで変化する
selectedIndex	選択されたoptionのうち、最初のもののindex	選択がない場合は-1
value	最初に選択されているoptionの値	選択がない場合は空文字列

<select id="format" name="format">
  <option value="html">HTML</option>
  <option value="markdown" selected>Markdown</option>
</select>

属性のselectedと、ユーザーが現在選んでいるselectednessは同じものではありません。DOMで現在値を読むときは、select.value、select.selectedIndex、select.selectedOptionsを目的に応じて使います。

主要属性とフォーム関連性

属性	役割	条件 / 境界
name	フォーム送信とform.elements APIで使う名前	送信対象として意味のある値を持たせる
multiple	0個以上のoptionを選べるようにする	送信される値の数とUI・AAMの境界を変える
size	表示するoption数の目安	正のvalid non-negative integer。表示とアクセシビリティの状態に関係する
required	値の選択を必須にする	placeholder label optionと組み合わせた単一選択で境界がある
disabled	コントロールを操作不可にする	constraint validationとフォーム送信から除外される条件に関係する
form	form ownerを明示的に指定する	祖先formの外に置く場合でも、同じdocument内のformと関連付けられる
autocomplete	autofillのヒント	フォームコントロール共通のautocomplete処理で解釈される

labelとの関連付けは、labelのforとselectのidを一致させる明示的な方法、またはlabelの子孫にselectを置く暗黙的な方法で行います。

<label for="country">国</label>
<select id="country" name="country">
  <option value="jp">日本</option>
  <option value="us">米国</option>
</select>

Requiredとplaceholder label option

単一選択で、requiredがあり、display sizeが1の場合、最初のoptionがselectの直接の子で、値が空文字列なら、そのoptionはplaceholder label optionになり得ます。この状態のままでは、選択がmissingとしてconstraint validationに失敗します。

<select name="plan" required>
  <option value="">選んでください</option>
  <option value="basic">ベーシック</option>
  <option value="pro">プロ</option>
</select>

multipleまたはdisplay sizeが1より大きい場合には、単一選択のplaceholder label optionと同じ条件をそのまま適用できません。requiredの有無だけでなく、選択モード・表示サイズ・optionの位置と値を合わせて確認します。

Form submission

selectがdisabledでなく、送信に必要な条件を満たす場合、nameと選択されたoptionの値がformのentry listに関係します。単一選択では通常1つ、複数選択では選択されたoptionごとの複数のentryが同じ名前で作られます。

この処理は、選択値の取得だけでなく、successful controls、disabled、form owner、entry list構築、encoding、サーバー側の解釈と一緒に確認する必要があります。ブラウザーのconstraint validationはサーバー側検証の代替ではありません。

DOM Interface

select要素はHTMLSelectElementとして公開されます。選択肢の集合、現在の選択、フォーム検証、labelとの関係を同じインターフェースから扱えます。

const select = document.querySelector('select');

select.value;
select.selectedIndex;
select.selectedOptions;
select.options;
select.form;
select.labels;
select.validity;
select.checkValidity();

API	概要
options	option listを表すHTMLOptionsCollection
selectedOptions	selectednessがtrueのoptionのHTMLCollection
selectedIndex	最初に選択されたoptionのindex。設定も可能
value	最初に選択されたoptionの値。設定も可能
willValidate / validity	constraint validationへの参加と現在の状態
checkValidity() / reportValidity()	制約検証の結果確認とユーザーへの報告
showPicker()	該当するpicker UIを表示するAPI。activation・security条件を伴う

Fact / Evidence（主張 / 根拠）

主要Factを、適用条件・確認状態・仕様上の根拠位置と対応付けています。ブラウザー実装や支援技術の観測は、仕様上の主張とは別に下のImplementation Evidenceへ分けています。

Evidence

1. HTML Standard: The select element — 意味、category、content model、属性、選択処理、DOM interface
2. HTML Standard: The option element — optionのvalue、selectedness、selected attribute、option list
3. HTML Standard: The optgroup element — optionのグループ化とlabel
4. HTML Standard: Form control infrastructure — form owner、disabled、constraint validation、フォームコントロール共通基盤
5. HTML Accessibility API Mappings — list box / drop-down boxとしてのselectのアクセシビリティAPI境界

Implementation Evidence

仕様上の主張とは別に、ブラウザー実装・WPT・アクセシビリティ観測を記録します。未実施の項目は確認済みとは扱いません。

共通fixture / 実行環境: <form id="evidence-form" method="get">内に、label付きの単一select、空値のplaceholder label option、required、multiple select、disabled option、submit buttonを配置。Chrome 152.0.0.0 / Windows NT 10.0 / 確認日 2026-09-13。

WPTの対応付けにはWPT repository、アクセシビリティの基準にはHTML-AAMを参照します。

Coverage / Open Issues

• 確認済みselectの意味、category、content model、single / multiple、option list、主要属性、HTMLSelectElement APIの概要
• 確認済みrequiredとplaceholder label option、selected attributeとselectednessの基本境界
• 未完了form submission algorithm、entry list、disabled option、encoding、formdata eventの全分岐
• 未完了customized select、先頭button、selectedcontent、picker UI、ブラウザー別の実装差
• 未完了今回の実装・AX観測はChrome 1環境のみ。HTML-AAMの全mapping、支援技術ごとの観測、WPT実行、歴史的変更、互換性、Expert-gap Reviewは未登録

このページは初期Coverageです。確認済みの範囲を示すものであり、select要素全体の検証完了、すべてのブラウザーで同じ表示・操作になること、または支援技術で同じ結果になることを主張しません。

Related surface

初心者向けのoptionの作り方、表示名と送信値、selected / disabledの使い方はYugienのoption要素ページを参照してください。選択肢のグループ化とdisabledの継承境界はAtlasのoptgroup要素、selectの選択モデル全体はAtlasのselect要素、送信とconstraint validationの共通処理はAtlasのform要素、フォームコントロールとの関連付けはAtlasのlabel要素、他のフォーム部品との境界はinput要素とbutton要素でも確認できます。