【HTML】selectでセレクトボックス（プルダウンメニュー）

ウェブサイトを作っていると、重要になってくるのがフォームです。

フォームは、閲覧者とコンタクトを取るために、なくてはならないページの一つと言えるでしょう。

何かにエントリーを促したり、資料請求や問い合わせページ、ビジネスには欠かせないフォームを構成する部品の一つにセレクトボックス（プルダウンメニュー）があります。

性別や都道府県など、決まったリスト項目から一つ、あるいは複数、選んでもらうのに使われることが多いと思います。

今回はそんなセレクトボックス（プルダウンメニュー）をHTMLで作成する方法を解説いたします。

実際に使うタグは「select」と「option」。

2段階に分けて、見ていきたいと思います。

selectタグ
optionタグ
実践編（具体例）

selectタグ

まず、selectタグは、最初の外枠になります。

selectタグにはいくつか属性がありますので、一つずつ解説していきます。

name属性

その要素に名前をつけます。文字列で指定します。

size属性

セレクトボックス（プルダウンメニュー）の行数を指定します。数値で指定します。指定しない場合、デフォルトでは1となります。

multiple属性

値は必要としません。セレクトボックス（プルダウンメニュー）で複数の行を選択することが可能になります。

disabled属性

こちらも値は必要としません。この属性を指定すると要素の無効化、つまり何も反応しなくなります。

optionタグ

次はoptionタグですが、このタグはselectタグの内側に指定していきます。

実際のセレクトボックス（プルダウンメニュー）の選択肢として表示される文字列をoptionタグで囲みます。

optionタグにも、いくつか属性があります。

value属性

実際にPOST送信される値を指定します。文字列で指定します。

POST送信については、下の記事で解説しています。

【HTML/PHP】POSTとGETを使ってサーバーにリクエスト

フォームはウェブサイトに必要不可欠なものです。そんなフォームを制作していく上で、理解が必要になってくるのが、リクエストとレスポンスの違い、またGET送信とPOST送信の違いと使い方です。この記事ではGET送信、POST送信について、解説しています。

label属性

セレクトボックス（プルダウンメニュー）の選択肢として表示される値を文字列で指定します。

ただ、この属性を設定しない場合、optionタグで囲まれた文字列が選択肢としてセレクトボックス（プルダウンメニュー）に表示されます。

ですので、label属性を使うよりoptionタグで文字列を囲んで選択肢項目をリスト化していく方が、コードの見た目、読みやすさという観点でもわかりやすいと思います。

selected属性

値を必要としません。

この属性が指定されていると、optionタグで囲まれた文字列の選択肢が最初に選択された状態になります。

disabled属性

こちらも値は必要としません。

この属性を指定すると要素の無効化、つまり何も反応しなくなります。

実践編（具体例）

以下、いくつか具体例を見ていきます。

まずは、何の属性も指定していない例から。

コードの下に実際のセレクトボックス（プルダウンメニュー）を載せましたので、操作してみてください。

<select>
    <option>エリアを選択</option>
    <option>東京都</option>
    <option>神奈川県</option>
    <option>千葉県</option>
    <option>埼玉県</option>
    <option>茨城県</option>
</select>

属性を何も指定しなくても、それなりの形にはなります。

エリア選択セレクトボックス（プルダウンメニュー）を作成していますが、東京、神奈川、千葉、埼玉、茨城以外にお住まいの皆様にはリスト化されておらず、申し訳ございません。

全都道府県をリスト化するのが、大変だったので、このような形にさせていただきました。

全く悪気はございません。悪く思わないでください…

話しが逸れましたが、次の具体例に進みたいと思います。

下の例では、POST送信のためにselect要素に名前をつけるため、name属性を追加しています。

また、6行でリストが表示されるようにsize属性も追加してみました。

<select name="sample" size=6>
    <option>エリアを選択</option>
    <option>東京都</option>
    <option>神奈川県</option>
    <option>千葉県</option>
    <option>埼玉県</option>
    <option>茨城県</option>
</select>

今度はmultiple属性を追加してみます。

<select name="sample" multiple>
    <option>エリアを選択</option>
    <option>東京都</option>
    <option>神奈川県</option>
    <option>千葉県</option>
    <option>埼玉県</option>
    <option>茨城県</option>
</select>

CtrlキーやShiftキーを使って複数選択が可能になりました。

下の例は、disabled属性を使った例になります。

使用不可となり、全ての要素が無効化されます。

<select name="sample" disabled>
    <option>エリアを選択</option>
    <option>東京都</option>
    <option>神奈川県</option>
    <option>千葉県</option>
    <option>埼玉県</option>
    <option>茨城県</option>
</select>

optionタグの属性も追加してみます。

POST送信するために、それぞれの選択肢に対応した値（0～5）をvalue属性で指定。

さらに、選択肢の初期値（デフォルト値）として、「東京都」を選択してみます。

<select name="sample">
    <option value="0">エリアを選択</option>
    <option value="1" selected>東京都</option>
    <option value="2">神奈川県</option>
    <option value="3">千葉県</option>
    <option value="4">埼玉県</option>
    <option value="5">茨城県</option>
</select>

今回、解説したセレクトボックス（プルダウンメニュー）は見かける頻度が高いフォームの一つだと思います。

それだけ、あると便利で必要不可欠な要素なんだということです。

selectタグ、optionタグの使い方をマスターしておいて、損はないでしょう。

フォームを作成する時に必要な知識として、リクエストやレスポンス、さらにGET送信とPOST送信について、もし興味がありましたら、下の記事もご参照ください。