プログラミング勉強日記
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>
実行結果(以下のようにリストになる)
