※当サイトではアフィリエイト広告を利用しています

HTML / CSS

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

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

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

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

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

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

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

クリックできる目次

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

必要なタグ

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

  • labelタグ (質問部分)
  • selectタグ (回答項目の親要素)
  • optionタグ (回答項目)

ラジオボタンやチェックボックスでは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つです。

  • name属性：
    データが送信されたときに、なんの項目なのか識別するための属性。
  • id属性：
    labelタグと関連付けをさせるための属性。
<select name="fruit" id="fruit">
  タグ内に選択項目のoptionタグが入る。
</select>

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

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

value属性：
データ送信時、選択されたoptionタグの内容を識別するための属性。

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

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

・value=”banana”

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

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

for属性：
selectタグと関連付けさせるための属性

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

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

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

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

参考：MDN web docs HTML <select>

【フォーム】ラジオボタンの作りかた
【HTMLフォーム】ラジオボタンの作り方今回はお問い合わせフォームなどで見られる、 ラジオボタンの作りかたをまとめてみたいと思います。...
フォーム】チェックボックスの作りかた
【HTMLフォーム】チェックボックスの作り方今回はお問い合わせフォームなどにあるチェックボックスの作りかたについてまとめてみたいと思います。...
関連する記事