【HTMLフォーム】セレクトボックスの作り方

今回はお問い合わせフォームなどでよく見る
セレクトボックスの作り方についてまとめてみたいと思います。

こんなかんじのサンプルをつくってみました。

See the Pen
OJMELXO by notebook (@orange-notebook)
on CodePen.

クリックすると4つの選択肢がドロップダウンで出てきます。

では早速、作り方をみていきましょう。

セレクトボックスの作り方

必要なタグ

セレクトボックスを作るには以下の3つのタグが必要です。

ラジオボタンやチェックボックスではinputタグだったところが、
selectタグとoptionタグになります。

またselectタグもoptionタグもinputタグとちがい、閉じタグがあります。

デモのHTMLはこんなかんじになっています。

<div class="container">
  <label for="fruit">好きな果物を選んでください。</label>
  <select name="fruit" id="fruit">
    <option value="">--- 選んでください ---</option>
    <option value="banana">バナナ</option>
    <option value="orange">オレンジ</option>
    <option value="strawberry">いちご</option>
    <option value="grape">ぶどう</option>
  </select>
</div>

HTML構造

HTML構造としては、
selectタグの中に回答項目となるoptionタグが入れ子になっています。

<label></label>
<select>
  <option></option>
  <option></option>
  <option></option>
</select>

selectタグ、optionタグ、labelタグには必要な属性があるので、
もう少し詳しくみていきたいと思います。

selectタグに必要な属性

回答項目の親要素となる、selectタグに必要な属性は以下の2つです。

<select name="fruit" id="fruit">
  タグ内に選択項目のoptionタグが入る。
</select>

optionタグに必要な属性 (タブを開いたときの回答項目)

回答項目となるoptionタグに以下の属性が必要です。

今回もデモの選択肢となっているバナナを例にみていきたいと思います。

<option value=”banana”>バナナ</option>

labelタグに必要な属性 (質問部分)

labelタグには以下の属性が必要です。

for属性はselectタグのid属性と同じ値にすることが必要です。

今回は質問をクリックすると、セレクトタブにフォーカスが当たるようになっています。

<label for="fruit">好きな果物を選んでください。</label>

これで基本的なセレクトボックスの完成です！

参考：MDN web docs HTML <select>

【HTMLフォーム】ラジオボタンの作り方今回はお問い合わせフォームなどで見られる、 ラジオボタンの作りかたをまとめてみたいと思います。...

【HTMLフォーム】チェックボックスの作り方今回はお問い合わせフォームなどにあるチェックボックスの作りかたについてまとめてみたいと思います。...