この記事ではHTMLでセレクトボックスを作る方法について解説します！セレクトボックスはselectタグで作ることができて、属性で細かい設定をすることができます。この記事では、
といった方に向けて、
- セレクトボックスとは
- selectタグとは
- selectタグの使い方（selectタグ、optionタグ）
について解説していきます。易しいサンプルコードも掲載していくのでぜひご覧ください！
セレクトボックスとは
セレクトボックスとはどういったものなのかを見てみましょう。こちらをご覧ください。
こちらはよく見かける、都道府県を選択するためのセレクトボックスになります。このセレクトボックスでは一行のものから複数行のものも作ることができて、それも同じタグで設定をすることができます。
このセレクトボックスで選ばれた値はフォームからPHPなどで動くプログラムに値が渡されて、サーバーに送信されます。この記事ではフォームのタグも使われていますが、formタグについてはこちらの記事をご覧ください。
selectタグとは
セレクトボックスで使われているselectタグは単体でも使うことができますが、基本的にはformタグで囲んで使われます。selectタグでセレクトボックスの基本的な外観を設定して、optionタグでそれぞれの値を設定します。
selectタグはinputタグとは違って、optionタグを囲むための閉じタグが必要になるので注意しましょう。
selectタグの使い方
それではselectタグの使い方と併せて使われるoptionタグの使い方を見ていきましょう。
selectタグ
selectタグの使い方を見てみましょう。こちらのコードをご覧ください。
<html>
<form action="/form.php" method="post">
<div>
<label for="pref">都道府県</label>
<select size="1" id="pref" name="pref">
</select>
</div>
<input type="submit" value="送信する">
</form>
</html>
実行結果
こちらのコードではlabelタグでラベルを設定して、そのあとにselectタグを置き、それをformタグで囲いました。
ここでは「size=”1″」としていますが、これは1行だけを見せた状態をデフォルトに設定して、セレクトボックスをクリックするとすべてが見えるように設定しています。ちなみにselectタグのidは、labelタグのfor属性と紐ついています。
optionタグ
次はセレクトボックスの中で表示させる値を作っていきましょう。こちらのコードをご覧ください。
<html>
<form action="/form.php" method="post">
<div>
<label for="pref">都道府県</label>
<select size="1" id="pref" name="pref">
<option value="hokkaido">北海道</option>
<option value="aomori">青森県</option>
<option value="iwate">岩手県</option>
<option value="miyagi">宮城県</option>
<option value="akita">秋田県</option>
</select>
</div>
<input type="submit" value="送信する">
</form>
</html>
実行結果
こちらのコードではselectタグの中にoptionタグで囲んだ実際の値を入れました。optionタグのvalue属性は、実際に値がクリックされたときに送信される値を指定しています。
また、先程のselectタグの使い方で解説した、「size=”1″」を「size=”5″」に変更してみましょう。
実行結果
値の数とsize属性の数字を同じものにすると、値と同じ行数のボックスが出てきます。またsize属性の数字が値の数よりも小さければ、スクロールすることで見えない部分の値を選ぶことができるようになります。
まとめ
この記事ではselectタグの使い方とoptionタグについて解説してきました。selectタグで何ができるのかについて、分かって頂けたでしょうか？
フォームを作るときに重要な部品の一つになるので、ぜひ使い方を知っておきましょう。また、フォームそのものの作り方については、解説のときにも紹介したリンクで解説しているのでぜひ、ご覧ください。
