HTML要素辞書 by Sentaro

<select>

選択リスト要素。ドロップダウンリスト（プルダウンメニュー）または複数選択リストを作成します。

info

概要

<select> 要素は、ユーザーが複数の選択肢の中から一つ、または複数を選択できるドロップダウンリストやスクロールリストを作成します。
選択肢は、子要素の <option> 要素によって定義されます。フォーム送信時に、選択された <option> の value 属性の値が、<select> の name 属性とセットで送信されます。

play_circle

デモ (静的表示)

HTML (Source)

Preview (Result)

list

属性 (Attributes)

属性名	説明
name	フォーム送信時に使用される要素の名前。必須属性です。
disabled	リストを無効にし、ユーザーが操作できないようにします。フォーム送信もされません。
multiple	この属性が存在する場合、ユーザーは `<option>` のリストから複数の項目を選択できます（通常はCtrl/Cmdキーを押しながらクリック）。
size	一度に表示される行数（オプションの数）を指定します。デフォルト値は 1 です。`multiple` が指定された場合は、1より大きな値を推奨します。
required	フォーム送信時に選択を必須にします。
autofocus	ページロード時に自動的にこの要素にフォーカスを合わせます。

code

実用例

1. オプションのグループ化（<optgroup>）

<select name="language">
 <optgroup label="フロントエンド">
  <option value="js">JavaScript</option>
  <option value="css">CSS</option>
 </optgroup>
 <optgroup label="バックエンド">
  <option value="php">PHP</option>
  <option value="py">Python</option>
 </optgroup>
</select>

2. 複数選択と必須入力（required）

<label for="hobby">趣味（複数選択可、必須）:</label>
<select name="hobby" multiple size="4" required>
 <option value="music">音楽鑑賞</option>
 <option value="movie">映画</option>
 <option value="game">ゲーム</option>
 <option value="read">読書</option>
</select>

lightbulb

知っておくべき重要事項

link

ラベル（<label>）の使用
<select> 要素は、必ず <label> 要素と関連付けてください。これにより、ユーザーがラベルをクリックするだけでドロップダウンにフォーカスできるようになり、アクセシビリティが向上します。<label for="ID名"> と <select id="ID名"> を対応させます。

accessibility_new

デフォルト値の設定
ドロップダウンリストでは、常に何らかのオプションが選択された状態になります。ユーザーが意図せず最初のオプションを選んだままにしないよう、最初の <option> に disabled 属性と selected 属性を両方設定して「選択してください」といったプレースホルダー的な項目を入れるのが一般的です。

<option value="" disabled selected>選択してください</option>

私について利用規約プライバシーポリシー