cman.jpWEBページ作成
広告
<option> 「入力の選択肢」[読み方：オプション]
<option>タグは、<select>タグの選択肢や<datalist>タグの入力候補を指定します。
<optgroup>タグ内に記述することで、関連するものをグループ化できます。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | ○ | ○ |
広告
<option> の仕様
| カテゴリー | 使用できる場所（親要素） | コンテンツモデル（子要素） | タグ省略 |
|---|---|---|---|
| 無 | <select>、<datalist>、<optgroup> | labelとvalueがある場合、なし labelありvalueなしまたは、labelなし<datalist>の子要素の場合、テキスト labelなし<datalist>の子要素でない場合、要素間の空白ではないテキスト | 直後が<option>、<optgroup>、<hr>の場合、 親要素内の最終コンテンツの場合、 終了タグ省略可 |
<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>
| 属性 | 意味 | 値のサンプルなど |
|---|---|---|
| disabled | 使用不可の指定 | - |
| label="名称" | ラベル名を指定 | - |
| selected | ページ表示時に選択状態とする指定 | - |
| value="値" | 送信する値を指定 | - |
| 廃止された属性 |
|
|
| グローバル属性 |
| |
| イベント属性 |
| |
<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>タグ内に記述の場合のみ可能です。
広告