HTML5における＜option＞タグの使い方

<option>タグは、<select>タグを使用して、セレクトメニューを作成する際の、選択肢を指定するのに使用するタグです。今回は、HTML5における<option>タグの使い方についてご紹介します。

HTML5における<option>タグの使い方

<option>タグは、<select>タグを利用してセレクトメニューを作成する際に、選択肢を作る時に使用するタグです。そのため<select>タグとセットで使用します。

下記はサンプルコードです。

<select>〜</select>内に<option>〜</option>を配置します。そして、<option>〜</option>内に、追加したい選択肢を記述します。選択肢の数だけ配置します。

これに、属性などを追加してより場面に適したセレクトメニューを作成します。

表示サンプル

selected属性を指定すると、好きな選択肢を最初から選択された状態にすることができます。下記はサンプルコードです。

表示サンプル

赤が一番上の選択肢になっているため、デフォルトでは赤が選択された状態になっているメニューが、最初から白が選択された状態になりました。

基本的な使い方は以上です。