最終更新日 
option要素
option要素は、select要素、datalist要素、optgroup要素内で、個々の選択肢項目を示します。
label属性を指定すると、option要素の内容ではなくlabel属性の値がラベルとなります。label属性を指定していなければ、option要素の内容がラベルを表します。
value属性では、サーバーに送信される値を指定できます。value属性を指定していなければ、option要素の内容が値として送信されます。
selected属性を指定すると、ページの表示時にその選択肢の項目が選択されている状態で表示されます。
option要素は、disabled属性が指定された場合や、親要素のoptgroup要素のdisabled属性が指定されている場合に使用不可となります。option要素の終了タグは、直後に別のoption要素かまたはoptgroup要素がある場合、もしくはoption要素が親要素内の最終コンテンツの場合に省略可能です。
HTML5での変更点
・name、datasrc、dataformatasの各属性は廃止されました。
| カテゴリ | タグの省略 | 親要素 | 子要素 |
|---|---|---|---|
| なし | 終了タグのみ省略可能 | select、datalist、optgroup | テキスト |
| 属性 | 値 | 説明 |
|---|---|---|
| label | 文字列 | option要素のラベルを指定します。 |
| value | 文字列 | option要素の送信値を表します。 |
| disabled | disabled | 論理属性。option要素の項目が使用不可になります。 |
| selected | selected | 論理属性。項目が選択された状態で表示されます。 |
| グローバル属性 | - | - |
| イベント属性 | - | - |
サンプルコード
<body>
<p>お好みの商品を選択して下さい。</p>
<select name="product" required multiple>
<option disabled>商品一覧</option>
<option value="plain">ハンバーガー</option>
<option value="cheese">チーズバーガー</option>
<option value="fileo">フィレオフィッシュ</option>
<option value="teriyaki">てりやきバーガー</option>
<option value="bacon">ベーコンレタスバーガー</option>
</select>
</body>
当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。