【HTML】セレクトボックスの簡単な実装方法

2020年11月8日 2024年4月1日

こんにちは！Kです！

今回は、HTMLにおけるセレクトボックスの作り方を紹介します。

使うのはselect（セレクト）タグです。

ユーザーにセレクトボックスの項目から選択させたいときにこのタグを使います。

selectタグの使い方

selectタグの基本的な使い方は、option（オプション）タグをselectタグで囲むことでプルダウンメニューを作成することができます。

コード例

<select name="sample" id="sample">
  <option value="1">選択１</option>
  <option value="2">選択２</option>
  <option value="3">選択３</option>
</select>

ブラウザでの表示結果

これだけでプルダウンメニューを作成できます。

見た目を変えたければcssで装飾も可能です。

補足として、上記のコードではデフォルトで選択できる項目は一つです。
また、表示される選択肢も一つだけ表示されます。

では複数選択や項目の表示数を変更したい場合はどうしたらいいのでしょうか。

以下で紹介します！

プルダウンメニューの複数選択や表示数を変更してみる

プルダウンメニューで複数選択できるようにしたい場合は、「multiple属性」を指定してあげるだけです。

また、選択項目の表示数を変更したい場合は「size属性」で表示数を指定すれば変更できます。

コード例

<select name="sample" id="sample" multiple size="3">
  <option value="1">複数選択できるよ１</option>
  <option value="2">複数選択できるよ２</option>
  <option value="3">複数選択できるよ３</option>
　　<option value="4">複数選択できるよ4</option>
　　<option value="５">複数選択できるよ5</option>
</select>