[html]セレクトボックスを作ってみよう

今回は、htmlでセレクトボックスを作ってみようと思います。セレクトボックスは入力フォームを作る際には、一般的な入力フォームになります。基本的なことなので、ぜひ覚えていってください。一般的なセレクトボックスだけでなく、分類分けしたセレクトボックスの作り方もご紹介していこうと思います。

HTMLでセレクトボックスを作ってみよう

HTMLでセレクトボックスを作るためには、selectタグとoptionタグを使用します。この２つのタグを使って簡単なセレクトボックスを作ってみましょう。

サンプルコードと実装例は次の通りです。

<select id="sample_select" name="sample_select">
 <option value="">選択肢しない</option>
  <option value="sample1">セレクトボックス</option>
  <option value="sample2">HTML</option>
   <option value="sample3">selectタグ</option>
  <option value="sample4">optionタグ</option>
</select>

HTMLでセレクトボックスを作ってみたサンプル実装例

HTMLで作ったセレクトボックスにデフォルト値を設定しよう

上述のHTMLで作成したセレクトボックスでは、最初の選択肢が選択状態になっております。これを例えば２番目のものをデフォルトにする、３番目のものをデフォルトの値として設定する方法をご紹介させていただきます。

作り方は非常に簡単です。selectedとoptionタグにつけてください。
これを記述することで選択状態になります。
下記にサンプルコードと実装例をご紹介します。

<select id="sample_select" name="sample_select1">
 <option value="">選択肢しない</option>
  <option value="sample1" selected>セレクトボックス</option>
  <option value="sample2">HTML</option>
   <option value="sample3">selectタグ</option>
  <option value="sample4">optionタグ</option>
</select>

２番目の選択肢にselectedをつけて選択状態にしたサンプル実装例

上記のように２番目のセレクトボックスのoptionにselectedを記述することで、選択状態にすることができました。

HTMLでセレクトボックスに分類を設けてみよう

次は、選択肢に分類を設けていこうと思います。
地域やブランドなどを分類するときには、非常に便利なオプションとなります。

optgroupというタグを使って、グループ分けすることができます。
こちらのoptgroupを使って分類分けしたサンプルコードと実装例は次のようになります。

<select id="sample_select" name="sample_select1">
<optgroup label="選択肢なんてないよ">
 <option value="">選択肢しない</option>
</optgroup>
<optgroup label="グループ分けできました">
  <option value="sample1">セレクトボックス</option>
  <option value="sample2">HTML</option>
</optgroup>
<optgroup label="optgroupを使う">
   <option value="sample3">selectタグ</option>
  <option value="sample4">optionタグ</option>
</optgroup>
</select>

optgroupを使ってグループ分けしてみたサンプル実装例

上記のように選択肢ごとにグループ名を設定することができました。

まとめ

今回は入力フォームを作る際に使われるセレクトボックスの作り方をご紹介させていただきました。基本的な作り方から、デフォルト値の設定方法、選択肢の分類を分ける方法を一通りサンプルを交えてご紹介させていただきました。セレクトボックスを使って、あなたのサイトがより良いものになりますように。