【HTML】セレクトボックスを使ってみた

#プログラミング勉強日記
2020年10月21日
今までHTMLを勉強してきたが、セレクトボックスを使ったことがなかったので使い方をまとめる。

#セレクトボックスの基本的な書き方
　select要素でセレクトボックスを作成することができる。メニューの選択肢はselect要素内に配置するoption要素で作成する。
　select要素はname属性には部品の名前を指定し、size属性で表示行数を指定する(初期値は1)、multiple属性は複数選択を可能にする。
　option要素はvalue属性には送信される文字列を指定し、label属性は選択肢として表示されるテキストを指定し、selected属性では選択された状態を指定する。

　基本的な書き方は以下のようになる。

html

<select name="example">
  <option value="サンプル1">サンプル1</option>
  <option value="サンプル2">サンプル2</option>
  <option value="サンプル3">サンプル3</option>
</select>

実行結果(矢印をクリックするとサンプル2とサンプル3が出る)

#特定の選択肢を選択済みにするサンプルコード
　option要素にselected属性を指定する。

html

<select name="example">
  <option value="サンプル1">サンプル1</option>
  <option value="サンプル2"  selected>サンプル2</option>
  <option value="サンプル3">サンプル3</option>
</select>

実行結果(サンプル2がすでに選択されていて、クリックすると3つ表示される)

#リスト形式で表示させるサンプルコード
　select要素にsize属性を指定する。

html

<select name="example" size="3">
  <option value="サンプル1">サンプル1</option>
  <option value="サンプル2">サンプル2</option>
  <option value="サンプル3">サンプル3</option>
</select>

実行結果(以下のようにリストになる)

#参考文献
HTMLでのselectedによる初期値の設定方法を現役エンジニアが解説【初心者向け】
セレクトボックスを作る