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

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

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

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

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

  <select>
    <option>赤</option>
    <option>白</option>
  </select>

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

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

スクリーンショット 2016-06-28 15.27.45

表示サンプル

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

  <select>
    <option>赤</option>
    <option selected>白</option>
  </select>
スクリーンショット 2016-06-28 15.41.34

表示サンプル

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

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


イベント

2017/12/05(火)
Design Thinking Square