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

こんにちは!CodeClub965で講師をしているKです!

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

使うのはselect(セレクト)タグです。

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

selectタグの使い方

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

コード例

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

ブラウザでの表示結果


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

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

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

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

以下で紹介します!

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

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

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

コード例

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

ブラウザでの表示結果


上記を解説すると、multiple属性を使うことで複数選択が可能になっています。

そして、size属性を「3」にすることで3桁だけ選択項目を表示します。

最後に

どうでしたか?
selectタグを使うことでセレクトボックス を簡単に実装できましたね!

あとは自分が好きなデザインをcssで装飾したり、JavaScriptと組み合わせて複雑な動きを付けたりといろいろなことができます。

今回紹介したのが基本形なのでぜひ覚えてみてください!

ではまた!