HTML Living Standard/select

SELECT要素

<select>要素は、ドロップダウンリストや複数選択リストを作成するためのフォームコントロールを定義します。選択肢をリスト形式で提供し、ユーザーがその中から1つまたは複数を選択できるようにします。

定義

• <select>要素は、選択可能なリストを表示するためのコンテナ要素です。
• その子要素として<option>要素を使用します。
• 1つのフォームの中で複数選択肢を提供する際に便利です。

使用方法

以下は、<select>要素の基本的な例です。

単一選択

<label for="fruits">好きな果物を選んでください:</label>
<select id="fruits" name="fruit">
  <option value="apple">りんご</option>
  <option value="banana">バナナ</option>
  <option value="orange">オレンジ</option>
  <option value="grape">ぶどう</option>
</select>

複数選択

<label for="colors">好きな色を選んでください:</label>
<select id="colors" name="color" multiple>
  <option value="red">赤</option>
  <option value="blue">青</option>
  <option value="green">緑</option>
  <option value="yellow">黄</option>
</select>

属性

以下は、<select>要素で使用される主要な属性です。

name

• <select>要素の名前を指定します。
• フォーム送信時に使用されるキーとなります。

<select name="gender">
  <option value="male">男性</option>
  <option value="female">女性</option>
</select>

multiple

• 複数の選択肢を選べるようにする場合に使用します。

<select name="colors" multiple>
  <option value="red">赤</option>
  <option value="blue">青</option>
</select>

size

• 表示されるリストの行数を指定します。
• ドロップダウンリストではなく、スクロール可能なリストにする際に便利です。

<select name="fruits" size="3">
  <option value="apple">りんご</option>
  <option value="banana">バナナ</option>
  <option value="orange">オレンジ</option>
  <option value="grape">ぶどう</option>
</select>

disabled

• リスト全体を無効化する場合に使用します。

<select name="cars" disabled>
  <option value="toyota">トヨタ</option>
  <option value="honda">ホンダ</option>
</select>

required

• フォーム送信時に必須項目として指定します。

<select name="country" required>
  <option value="japan">日本</option>
  <option value="usa">アメリカ</option>
</select>

使用例

初期値の設定

<select name="plan">
  <option value="basic" selected>基本プラン</option>
  <option value="standard">標準プラン</option>
  <option value="premium">プレミアムプラン</option>
</select>

グループ化

<optgroup>要素を使用して選択肢をグループ化できます。

<select name="food">
  <optgroup label="フルーツ">
    <option value="apple">りんご</option>
    <option value="banana">バナナ</option>
  </optgroup>
  <optgroup label="野菜">
    <option value="carrot">にんじん</option>
    <option value="potato">じゃがいも</option>
  </optgroup>
</select>

注意事項

1. <select>要素内に<option>要素がない場合、ユーザーは何も選択できません。
2. スタイリングにはCSSを使用できますが、ブラウザのデフォルトスタイルに依存する部分があります。
3. 複数選択（multiple）の場合、ユーザーインターフェースはOSやブラウザにより異なります。

スタイリング

• デフォルトのドロップダウンスタイルをカスタマイズするには、appearanceプロパティを使用します。

select {
  appearance: none;
  border: 1px solid #ccc;
  padding: 5px;
}

利用シーン

• ユーザーに選択肢を提供したい場合
• フォームで制限された選択肢を指定したい場合
• カテゴリ別の選択肢を提供する場合

関連項目

• HTML Living Standard/option
• HTML Living Standard/optgroup
• HTML Living Standard/form

関連仕様

• HTML Living Standard - select
• MDN Web Docs - select