optionタグ
optionは、セレクトボックス等の要素を定義するタグです。
解説
optionタグは、selectタグや、datalistの子要素として使用します。
コンテンツ・モデル
| カテゴリー (自カテゴリ) | なし |
| コンテキスト (親カテゴリ) | selectタグ、optgroupタグ、datalistタグ |
| コンテンツ・モデル (子カテゴリ) | 空またはテキスト |
属性
optionタグには以下の属性が指定できます。
| 属性 | 説明 |
|---|---|
| disabled | 非活性にする （例）disabled="disabled" ※disableのみでもOKです。 |
| label | リストのラベルを指定する ラベルは以下のどちらの方法でも定義できます <option>ラベル</option> <option label="ラベル"> |
| selected | 選択状態にする （例）selected="selected" ※selectedのみでもOKです。 ※複数のoptionに指定された場合は一番最後のものが選択状態となります。 |
| value | 値を指定する （例）value="1" |
| 属性 | 説明 |
|---|---|
| class | クラスを指定する （例）class="hoge" |
| id | IDを指定する （例）id="foo" |
| style | スタイルを指定する （例）style="color:red;" |
その他のグローバル属性値については、グローバル属性をご覧ください。
サンプル
みかん、りんご、ぶどうをリストにして、りんごを選択状態にする
<select>
<option value="1">みかん</option>
<option value="2" selected="selected">りんご</option>
<option value="3">ぶどう</option>
</select>
みかん、りんご、ぶどうをリストにして、りんごを非活性にする
<select>
<option value="1" label="みかん">
<option value="2" label="りんご" disabled="disabled">
<option value="3" label="ぶどう">
</select>
非活性にすると選択できなくなります。
備考
- value属性値を省略した場合は、ラベルに使用されている値がvalue値として使用されます。
