【HTML】セレクトボックスの項目を表すoption要素を解説します

こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在4社経験している、11年目エンジニアです。

この記事では、 HTMLでセレクトボックスの項目を表すoption要素について

  • option要素とは
  • option要素を使ったサンプルプログラム

と、丁寧に解説していきます。

前提条件:実行環境について

実行環境は以下の通りです。

OS Windows10

option要素とは

option要素とは、セレクトボックスの項目を表す要素です。
option要素は、select要素の子供の要素として使います。
詳しくはこちらの記事をご参考ください。

option要素を使うと
HTMLのoption要素を解説
というようにセレクトボックス内の項目を表すことができます。

書き方は

とselect要素の子供の要素としてoption要素を使ってセレクトボックスの項目を表します。

option要素には指定することができる属性が1つあります。

属性名 説明 書き方例
selected 最初に選択している項目を指定
label 選択肢として表示するラベルを指定
value 選択されたとき送信する値を指定
disabled その項目が使用できるかどうかを指定
指定しない場合は使用できる

では、次の章で実際に使ってみます。

option要素を解説するプログラムの概要

option要素を解説するプログラムでは、HTMLファイル内でselect要素を使ってセレクトボックスを5つ作成します。
作成するセレクトボックスに指定するoption要素はそれぞれ

  • 属性の指定なし
  • selected属性のみ指定
  • label属性のみ指定
  • value属性のみ指定
  • disabled属性のみ指定

という5つのセレクトボックスを作成して、表示させます。

サンプルプログラム

実行結果

作成したHTMLをブラウザで開きます。
HTMLのoption要素を解説

それぞれのセレクトボックスをデベロッパーツールで確認します。
属性の指定なしのセレクトボックスは指定した項目がセレクトボックスに表示され、属性には何も指定されていないことが確認できました。
HTMLのoption要素を解説

selected属性のみ指定のセレクトボックスは指定した項目が最初に選択されていることが確認できました。
HTMLのoption要素を解説

label属性のみ指定のセレクトボックスは指定した値が選択肢として表示されていることが確認できました。
HTMLのoption要素を解説

value属性のみ指定のセレクトボックスは指定した値がvalueに設定されていることが確認できました。
HTMLのoption要素を解説

disabled属性のみ指定のセレクトボックスは指定した項目のみが使用不可となっていることが確認できました。
HTMLのoption要素を解説

まとめ:option要素を使ってみよう!

以上がHTMLのoption要素についての解説でした!

あなたのご参考になったのなら、とても嬉しいです(*´▽`*)
ではでは~(・ω・)ノシ

コメント

タイトルとURLをコピーしました