最終更新日 2021年4月7日

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>

参考文献：W3C HTML5「4.10.12 The option element」

ザマワンにエントリーしました！

『ザマワン』は「座間ワンミニッツ」の略称であり、座間市の魅力を１分にギュッと詰め込む動画コンテストです。