セレクトボックスを表示する<select>タグの使い方を解説!類似タグ<option>との違いは?

HTMLのフォーム内でセレクトボックスを作成したい!そんな時に便利な<select>タグをご存じですか?

<select>タグとは?実際の使い方を知りたい!

今回は、selectタグの

・基本的な使い方
・類似タグ<option>タグとの違い

・selectタグの装飾方法(CSS)

について説明します。さらに細かな設定を行うためのサンプルコードを多数掲載!

selectタグとは

selectタグの読み方

selectタグは「セレクトタグ」と読みます。

selectタグの説明

selectタグはフォーム内の、セレクトボックスを作成するためのタグです。初期値が決まっていますが、CSSで装飾し、選択肢の表示行数などの詳細を設定することも可能です。

selectタグで利用できる属性

selectタグではグローバル属性に加え、以下の属性を使うことができます。

属性 説明
autocomplete  要素に入力される内容をブラウザ側で自動補完するのを許可するかどうかを指定する属性です。
autofocus  ブラウザが読み込みをしたときに、要素に自動でフォーカスをあてるかどうかを決める事ができる属性です。
disabled  ユーザーによる操作を無効にするかどうかを指定する属性です。
form  input要素が所属するform要素を指定する属性です。
 multiple  複数の値を指定出来るかどうかを定義する属性です。
 name  要素の名前を定義する属性です。
 required  入力が必須の要素かどうかを定義する属性です。
 size  要素の幅を指定する属性です。要素のtype 属性がtextもしくはpasswordのときは、文字数を指定します。
MEMO
グローバル属性は、HTMLの全要素で使用できる属性のことです。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 12
Firefox  1
nternet Explorer  完全対応
Opera  完全対応
Safari  完全対応
スマートフォン用ブラウザ 対応状況
Android webview  完全対応
Android版Chrome  完全対応
Android版Firefox  4
Android 版 Opera  完全対応
iOS版Safari  完全対応
Samsung Internet  完全対応

selectタグの基本的な使い方

selectタグの使い方

selectタグはフォーム内で、セレクトボックスを生成するための要素です。必ずoptionタグとセットで使用します。

selectタグの中にoptionタグを書き、optionタグにはセレクトボックス内の選択肢を記載します。optionタグのvalue属性は、実際にサーバに送信される値を設定しました。一番先頭の「–選択」は、選択肢ではないため、valueの値は設定していません。

See the Pen
select基本
by rabbittyu (@rabbittyu)
on CodePen.

selectタグと類似する<option>タグとの違い

ここで混同しやすいポイントをご紹介します。selelctタグとoptionタグはセットで使用するタグですが、selelctタグはセレクトボックス自体を生成するタグで、optionタグは選択肢を記述するタグです。

セレクトボックスを扱うタグという点では似ていますが、混同しないように注意しましょう。

selectタグの実用的な装飾方法(CSS)

セレクトボックスの設定は、JavaScriptとCSSの両方を用いることでより動的な変更を加えられますが、ここでは簡単に見た目だけを変更してみました。

セレクトボックスの配置設定はdiv要素を使って行います。位置が設定できたら、続いてセレクトボックス本体の設定をしましょう。

セレクトボックス本体のサイズ、背景色、文字色を変更する際は、selectタグを指定してください。class要素を用いて、任意の名前をつけることもできます。ここでは特に指定していませんが、複数のセレクトボックスがあるときはこのclass属性を用い、CSSを適用する範囲を細かく設定することができます。

See the Pen
select 応用①
by rabbittyu (@rabbittyu)
on CodePen.

まとめ

今回はselectタグについて解説しました。

  • selectタグはセレクトボックスの本体を生成する
  • selectタグの中にoptionタグを入れて、選択肢を作成する

以上の2点がポイントになります。セレクトボックスはデフォルトでも十分実用的ですが、ユーザーにとって見やすいようにサイズを大きくしたり、フォームのデザインに合わせて色を変化させたり、装飾次第で自由自在にアレンジできます。

selectタグをマスターし、実際にフォームを作成するという段階にいる方は、ぜひ装飾にも挑戦してみてくださいね。

参考文献:
MDN web docs <select>:HTML 選択要素
TECH ACADEMY
〔 〕選択プルダウン(SELECT~OPTION)をおしゃれにするCSSスニペット13選