セレクトボックス（プルダウン）の作り方｜HTMLタグや属性の使い方を解説
Webサイトやアンケート、Excelなどでよく見かける選択肢のことを「セレクトボックス」と言います。
アンケートでもExcelでも、セレクトボックスがあることで一気に業務の効率があがったり、データを収集しやすくなったりした経験が誰しもあるはずです。
本記事では、セレクトボックスの基本概念とそこに含まれるタグ、プルダウンメニューの作り方を詳しく解説します。
セレクトボックスの使い方を覚えることで、Webサイト制作やアプリケーション開発の幅が広がるので、ぜひ参考にしてください。
セレクトボックスとは
セレクトボックスとは、いくつかの選択肢から1つを選択する際に使われるボックスのことです。
プルダウンメニューと呼ばれることもあります。
各種Webサイトのお問い合わせフォームには、ユーザーが選択肢から出身地や年齢、問い合わせ内容などが選べるようにセレクトボックスが設置されていることが多いです。
セレクトボックスはラジオボタンにも似た機能であり、リスト形式で表示することができます。
単純に見やすい形で表示できるため、Webサイトの使いやすさや利便性が高まります。
なお、ブラウザやプラットフォームで表示形式が多少異なるため、公開前にはそれぞれの場面において適切に表示されるかの確認は必要です。
たとえば、iOS（iPhone）だとスクロールして自分が選びたい選択肢を枠に合わせる形になります。
Androidの場合、セレクトボックスは選択ウィンドウが開く形であり、丸いボタンで選択肢の横に表示されています。
selectタグとは
selectタグとは、セレクトボックスを作成するためのタグです。
ユーザーにプルダウンメニューの項目から選択させたい時に使います。
selectタグを使い、セレクトボックスの1つのまとまりを囲みながら、囲みのなかに選択肢を入れていきます。
selectタグと一緒に使う属性
selectタグと一緒に使う属性は、主に5つあります。
1つ目は、name属性です。
指定した要素に名前をつける属性です。
JavaScriptやPHPなどのプログラミング言語では、情報を操作するときに使われます。
セレクトボックスに関しては、name属性は名前を付けるのに使われます。
<select name=””>の””内に名前を付けます。
たとえば、<select name=”number”>は、このセレクトボックスの名前がnumberであることを表しています。
次にmultiple属性ですが、multiple属性を使うことでセレクトボックスの値を複数指定することができるようになります。
<select name=”” multiple>といった風に、selectタグにmultiple属性を追加することができます。
3つ目は、disabled属性です。
セレクトボックスを選択できないようにします。
4つ目は、required属性です。
セレクトボックスの指定を必須にする属性です。
5つ目は、size属性です。
セレクトボックスに表示するメニューの数を指定できる属性です。
- セレクトボックスはいくつかの選択肢から1つを選ぶときに使われる
- name属性はセレクトボックスに名前を付けるのに使われる
- multiple属性は複数指定を可能にする
関連記事
HTMLとCSSとは？違いや関係性・書き方から学習方法まで初心者向けに解説
セレクトボックスの作り方
セレクトボックスの設置には、selectタグとoptionタグを使います。
selectタグで全体を囲み、そのなかにoptionタグを入れていく方法になります。
optionタグ1つにつき、選択肢が1つ追加されます。
基本的な構文
セレクトボックスを使用するときには、value属性とname属性が使われます。
value属性は、セレクトボックスの値となります。
<option value=””>の””内が値となります。
name属性は前述の通り、指定した要素に名前をつけるために使われます。
応用：プルダウンメニューの作り方
前述の基本的な構文と属性を把握しておけば、おおかたの条件に合ったプルダウンメニューは作れるようになります。
selectタグで全体を囲い、optionタグで選択肢を追加し、name属性で名前を付け、value属性で値を決定したら、次はデフォルトの選択を決める必要があります。
なお、値や属性を何も指定しない場合、最上段にあたる部分がデフォルト値として設定される仕組みとなっています。
加えて、selected属性をoptionタグに設定すれば、その部分がデフォルト値として設定されることを覚えておきましょう。
<option value=”three” selected>3</option>のように、value属性の後にselectedを追加すれば完了です。
デフォルト値を決めたくないときは、<option value=””>数字を選択</option>のように“”内を空白にすれば問題ありません。
テキストをそのプルダウンメニューの選択にしておくと、誰が見てもすぐにわかるので便利です。
無回答を避けたい、すなわち、なにかしらの選択肢を選んでほしいときには、<select name=”number” required>のようにselectタグにrequired属性を指定します。
これにより、空白のままフォームを送信しようとするとエラーが表示されるようになります。
前述の「selectタグと一緒に使う属性」で説明した通り、selectタグにmultiple属性を指定すれば、複数のオプションが選択可能になります。
選択肢をわかりやすく整理したいときには、optgroupタグが便利です。
<select name="food">
<option value="">好きな食べ物を選択</option>
<optgroup label="肉類">
<option value="beef">牛肉</option>
<option value="chicken">鶏肉</option>
</optgroup>
<optgroup label="魚類">
<option value="tuna">マグロ</option>
<option value="salmon">サケ</option>
</optgroup>
</select>のように、まとめたいoptionをoptgroupタグで囲み、labelを指定するとそれぞれのグループに名前を付けられます。
- タグはselectタグとoptionタグの2つ
- セレクトボックスの値はvalue属性で設定する
- required属性を使って選択必須の項目を作る
関連記事
HTMLのtableタグの書き方と表のカスタマイズ方法
セレクトボックスを表示してみよう
こちらでは、本記事で今まで学習したことを活かし、実際にセレクトボックスを表示するやり方を紹介していきます。
プログラミングは文章を読むよりも、実際に手を動かした方が覚えやすいので、以下に従ってやってみてください。
エディタでHTMLファイルを作成
実際に「select.html」というファイルを作成して、以下を記述してみてください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<form action="#" method="GET">
<select name="food" id="name" required>
<option value="">好きな食べ物を選択</option>
<optgroup label="肉類">
<option value="beef">牛肉</option>
<option value="chicken">鶏肉</option>
</optgroup>
<optgroup label="魚類">
<option value="tuna">マグロ</option>
<option value="salmon">サケ</option>
</optgroup>
</select>
<input type="submit" name="submit" value="送信" />
</form>
</body>
</html>ブラウザで表示
作成したHTMLファイルをダブルクリックするとブラウザが立ち上がるので、そこで出力されたセレクトボックスを確認してみてください。
肉類と魚類にグループ化されていることや、何も選択せずに送信ボタンを押したらエラーが出ることを確認しましょう。
確認したら、今度はselectタグ内を一旦消し、本記事で学習したタグや属性を使って、自分で新しくセレクトボックスを作ってみてください。
- 文章を読むだけではプログラミングは覚えづらい
- プログラミングは実際に手を動かしながらの方が覚えやすい
- 作成したHTMLファイルをダブルクリックするとブラウザで開ける
関連記事
PHPとは？初心者向けに特徴やHTMLとの違い、できることをわかりやすく解説
HTMLを学ぶならプログラミングスクールがおすすめ
プログラミングの独学に成功するのは、10人に1人ほどと言われています。
HTMLはプログラミングの基礎中の基礎なので、誰しもここで挫折はしたくないはずです。
そうなると、HTMLを効率的に、継続的に学ぶならやはりプログラミングスクールがおすすめです。
こちらではおすすめのプログラミングスクールを種類別にご紹介します。
1つ目は、株式会社侍が運営する侍エンジニア塾です。
こちらのスクールの一番のポイントは、転職コースにあります。
通常は29,800円の入学金と128,000円（4週間）の授業料を払わなければいけないのですが、こちらのコースは最初から全額払うのではなく、デポジットを支払えば受講可能となっています。
同社の人材紹介サービスを使って転職に成功した場合は、受講料は無料となります。
プログラマーへの転職を考えている方には、最もおすすめしたいスクールです。
2つ目は、コードキャンプ株式会社が運営するCodeCampです。
こちらのスクールは年中無休で、朝の7:00から夜の11:40分までレッスンが受講できるオンラインスクールです。
1レッスンあたり40分なので、隙間時間などを利用してプログラミングを学習できます。
個人のレベルに合わせたマンツーマン指導なので、自分のペースで進められます。
また、通過率10％という非常に低い倍率を通った現役エンジニアが講師を務めているので、レッスンのクオリティも担保されています。
朝早くから夜遅くまで受講可能なので、忙しい学生や仕事終わりに勉強して転職に活かそうとしている社会人におすすめです。
関連記事
Photoshopの画像の切り抜き方法3選！髪の毛も綺麗に切り抜くコツ
まとめ
セレクトボックスは、Webサイトやフォームで選択肢を提供する重要な要素です。
selectタグとoptionタグを組み合わせることで、様々な条件のボックスを作ることが可能です。
HTMLはプログラミングのなかでも基礎中の基礎の部分なので、初心者でも比較的簡単に挑戦できます。
今までプログラミングを経験したことがない方、HTMLの基礎をほとんど抑えたという方は、本記事の内容を参考に実際に手を動かしてみるのがおすすめです。
セレクトボックスの自作を通じて、Web制作の楽しさをぜひ実感してください。
セレクトボックスに関するよくある質問
よくある質問
value属性とは何ですか？
入力コントロールの初期値を設定したり、値を指定したりできる属性です。基本的には送信される値を決める役割があります。セレクトボックスでは、ユーザーが選択したときにサーバーに送信されるデータの内容を指定するために使用されます。
name属性の役割は何ですか？
要素に名前を指定するときに用いられる属性です。サーバー側でデータを受け取る際、どの項目のデータかを判別するために重要な役割を果たします。また、JavaScriptでフォーム要素を操作する際にも、この名前を使って特定の要素にアクセスすることができます。
複数の選択肢を選べるようにするにはどうすればよいですか？
selectタグにmultiple属性を追加することで、複数の選択肢を選択できるようになります。ユーザーはCtrlキー（Windowsの場合）やCmdキー（Macの場合）を押しながらクリックすることで、複数のオプションを選択できます。
