cman.jpWEBページ作成
広告
<option> 「入力の選択肢」[読み方：オプション]
<option>タグは、<select>タグの選択肢や<datalist>タグの入力候補を指定します。
<optgroup>タグ内に記述することで、関連するものをグループ化できます。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | ○ | ○ |
広告
<option> の仕様
| カテゴリー | 使用できる場所（親要素） | コンテンツモデル（子要素） | タグ省略 |
|---|---|---|---|
| 無 | <select>、<datalist>、<optgroup> | テキスト | 直後が<option>、<optgroup>の場合、 親要素内の最終コンテンツの場合、 終了タグ省略可 |
<option>の属性
【構文】
<select name="セレクト名">
<option value="1">選択肢１</option>
<option value="2" selected>選択肢２</option>
<option value="3" disabled>選択肢３</option>
</select>
<option value="1">選択肢１</option>
<option value="2" selected>選択肢２</option>
<option value="3" disabled>選択肢３</option>
</select>
<option>のサンプル
セレクトボックスのサンプル
<p>該当するものを選択してください</p>
<select name="sample1">
<option value="1">選択肢１</option>
<option value="2" selected>選択肢２</option>
<option value="3" disabled>選択肢３</option>
<option value="4">選択肢４</option>
<option value="5">選択肢５</option>
</select>
<select name="sample1">
<option value="1">選択肢１</option>
<option value="2" selected>選択肢２</option>
<option value="3" disabled>選択肢３</option>
<option value="4">選択肢４</option>
<option value="5">選択肢５</option>
</select>
該当するものを選択してください
データリストのサンプル
（safariはデータリスト未対応です）
ブラウザにより見た目は変わります。イメージは、<datalist>を参照ください。
ページTOP
（safariはデータリスト未対応です）
<input type="text" name="test" list="samplelist">
<datalist id="samplelist">
<option value="BP-RED" label="ボールペン（赤）"></option>
<option value="BP-BLACK" label="ボールペン（黒）"></option>
<option value="BP-OTHER" label="ボールペン（その他）"></option>
</datalist>
<datalist id="samplelist">
<option value="BP-RED" label="ボールペン（赤）"></option>
<option value="BP-BLACK" label="ボールペン（黒）"></option>
<option value="BP-OTHER" label="ボールペン（その他）"></option>
</datalist>
ブラウザにより見た目は変わります。イメージは、<datalist>を参照ください。
留意事項
- <select>～</select>の間に記載された<option>が選択肢として表示されます。
- <datalist>～</datalist>の間に記載された<option>が候補として表示されます。
- <option>は、<optgroup>でグループ化できます。グループ化は、<select>タグ内に記述の場合のみ可能です。
広告