option

optionタグの概要

optionタグは、セレクトボックス(ドロップダウンリスト)内の選択肢を定義するためのタグです。ユーザーが選択できる値をリストアップする際に使用されます。

基本の書き方(構文)

<select>
  <option value="value1">Option 1</option>
  <option value="value2">Option 2</option>
  <option value="value3">Option 3</option>
</select>

主な属性とその説明

value: オプションの値を指定します。フォーム送信時にこの値が送信されます。

selected: 選択した状態を示す属性で、指定されたオプションが初期選択状態となります。

使用例

<select>
  <option value="apple">りんご</option>
  <option value="banana" selected>バナナ</option>
  <option value="orange">オレンジ</option>
</select>

<select multiple>
  <option value="red">赤</option>
  <option value="green" selected>緑</option>
  <option value="blue" selected>青</option>
</select>

よくある注意点・間違い

optionタグは、セレクトボックス内の選択肢を定義するためのものであり、その他の場面で使用するべきではありません。また、選択肢が多すぎる場合は他のUIパターンを検討することが望ましいです。