selectタグとoptionタグについて解説！

こんちには！
フロントエンドエンジニア・マークアップエンジニアのリクです！

今回の記事では、選択ボックスを作成する際に使用する、「selectタグ」と、「optionタグ」について解説します。

• 聞いたことがない…
• 記述方法がわからない…
• 関係性も特徴もわからない…

上記のように疑問に思っていることを解決できる記事となっています。

プルダウンの選択するメニューをWeb上で見たことがあるかと思います。

選択メニューは、HTMLで作成する際に、「selectタグ」と、「optionタグ」を使用して作成します。

この2つについての特徴や関係性がわからないまま使用している人も多いかと思います。

selectタグとoptionタグとは？

selectタグとは、Web上でセレクトボックスを表示させるタグです。

optionタグとは、selectタグ内で使用することで、選択肢の1つを作成が可能になるタグです。

<select>タグと、<option>タグはセットと考えていただければ問題ございません。

2つをセットで使用することにより、入力フォームで使用される選択式のメニューを作成することがきます。

<select>タグでフォーム自体を作成し、<option>タグで、選択する値（項目）を作成できます。

選択された値は、<select>タグのname属性と<optinon>タグのvalue属性がセットで送信されます。

下記のHTMLを参考に、今回の場合ユーザーは「area」が「1」（1〜6のいずれか）という情報を選択して送信するということになります。

選択式メニューを作ってみる

下記のHTMLを参考に実際に選択式メニューを作ってみてください。下記のHTMLをコピーアンドペーストで簡単に作成できます。

selected属性を使用することで、初期値をカスタマイズすることも可能です。

下記のHTMLを参考にselected属性を好きな項目に記載してみてください。初期値に表示される項目が変わります。

<option>タグは、MacとWindowsとでデザインに相違があり、CSSで背景色を変えたりなどの指定をすることができません。

<select name="area">
  <option value="1">青森県</option>
  <option value="2">岩手県</option>
  <option value="3">秋田県</option>
  <option value="4" selected>宮城県</option>
  <option value="5">山形県</option>
  <option value="6">福島県</option>
</select>

最後に

選択式メニューを作成する際に必須となる知識となりますが、上記2つのタグの関係性や特徴を理解できておらず、制作の途中でつまずく方がいるかと思います。

このようなちょっとした知識を身につけておくことで、効率的に制作を進めることができますし、知っておいて損はないので、これを機に理解しておきましょう！