「Webサイトにプルダウンを埋め込みたいけれども、どうすればいいのかわからない」
「プルダウンを自分好みの設定に編集したい」
そのようにお困りではありませんか。
本記事では、HTMLタグでフォームにプルダウンメニューを設定する方法を解説します。選択しやすいプルダウンのポイントも解説するので、ユーザーがストレスなく入力できるフォームを作成しましょう。
Webサイトにプルダウンを作成したいが、デザイン性や機能、セキュリティが気になる方は「formrun」がおすすめです。
120種類以上のデザイン性の高いテンプレートがそろっており、必要な項目を選択するだけでフォームが完成します。サイトへの埋め込みも専用のHTMLコードをコピーするだけで可能です。
HTMLやCSSを自由にカスタマイズできるコード型フォームもご用意しています。
まずは、無料でフォームを作成してみてください。
コード型フォームについて詳しく知りたい方はこちら
>>ヘッドレスフォーム（コード型フォーム）
目次 [非表示]
フォームのプルダウンとは
フォームに設置するプルダウンとは、複数の選択肢から1つの回答を選ぶ入力項目です。ボタンをクリックすると選択肢が表示され、回答を選べるようになります。
プルダウンを設置するメリットは以下の通りです。
・入力の手間が省ける
・選択肢を絞れる
・入力漏れを防げる
・誤入力を防げる
・データ管理しやすい
・レイアウトの調整が簡単
プルダウンについてさらに知りたい方はこちらをご覧ください。
>> フォームのプルダウンとは？他選択項目との違いや活用時の3つのポイントを解説
HTML：selectタグでフォームのプルダウンを作成する
HTMLでプルダウンを作成するにはselectタグを入力します。単独でも作動するものの、Navigator4以前のブラウザでは<form>～</form>内に記述しないと無視されるという報告があるため、使用環境には注意しましょう。
selectタグはプルダウンを作成するコードであり、以下の属性を入力すれば詳細の設定が可能です。
・name
・size
・required
・autofocus
それぞれ詳しく解説します。
name：選択肢の名前を決める
name属性は、選択肢に名前をつけて参照できるようにする役割があります。
プルダウンを作成した際は、名前がないとデータを参照できないため、name属性の入力は必須です。選択肢全体を示すようなわかりやすい名前をつけましょう。
【記入例】
<select name="job">
<option value="自営業">自営業</option>
<option value="会社員">会社員</option>
<option value="パート">パート</option>
</select>
size：表示できる数を決める
size属性を使用すると、画面に一度に表示させる選択肢の行数を設定できます。
初期値は1になっており、数値を設定しないと選択肢が1つしか表示されず、使いにくいプルダウンメニューになります。
sizeタグを使用する際は1以上の数値を入力しましょう。
【記入例】
<select name="job" size="3">
<option value="">選択してください</option>
<option>自営業</option>
<option>会社員</option>
<option>パート</option>
<option>アルバイト</option>
<option>学生</option>
</select>
required：必須項目に設定する
required属性では、選択されていないとエラーが表示されるように設定できます。
エラーの表示は使用しているブラウザによって変わります。
また、空白の表示項目を用意しておかないと、初めに表示されている選択肢をそのまま選択してしまう恐れがあります。optionタグで空白の表示項目を作成しましょう。
【記入例】
<select name="job" required>
<option value="">選択してください</option>
<option value="自営業">自営業</option>
<option value="会社員">会社員</option>
<option value="パート">パート</option>
</select>
autofocus：ページ表示時にフォーカスさせる
autofocus属性は、ページを表示した際にプルダウンの位置を表示するように設定できます。
選択の優先度を上げたい場合や、意図して選択位置までスクロールさせたい場合などに使用しましょう。
複数のautofocusタグを設定すると、通常は最初に設定したautofocusが優先されます。
【記入例】
<input type="text" autofocus>【番外編】複数選択できるようにするには？
プルダウンでは、選択肢の中から複数の回答を選択することはできません。
選択肢からユーザーが複数選択できるようしたい場合には、「multiple属性」を使用します。ただし、プルダウンメニューではなくなるため、一覧で表示されるようになります。項目が多いほど表示数も増えてユーザーの視認性を悪くする可能性が高くなるため、注意が必要です。
【記入例】
<select name="job" multiple>
<option>自営業</option>
<option>会社員</option>
<option>パート</option>
</select>
複数選択をユーザーにさせたい場合は、sizeタグを使って表示させる選択肢を絞るか、multipleよりもcheckboxの使用を検討しましょう。
チェックボックスについてさらに知りたい方はこちらをご覧ください。
>>フォームにおけるチェックボックスの作り方｜HTMLやフォーム作成ツールを紹介
HTML：optionでフォームのプルダウンの詳細を設定する
プルダウンが出力されるように設定したら、optionタグで表示項目を入力し、以下のタグ・属性で選択肢の詳細を設定可能です。
・value
・selected
・optgroup
それぞれ詳しく解説します。
value：表示項目を設定する
optionタグにvalue属性を入力すると、選択肢として表示するテキストを設定できます。
選択肢が増えればそのぶんだけvalueタグも必要になるため、設定する要素は増えていきます。
初期値を空白にして「選択してください」などのテキストを設定すれば、ユーザーにプルダウンによる選択の必要を知らせられるため、入力ミスを防止できます。
【記入例】
<option value="自営業">自営業</option>selected：あらかじめ選択された状態にする
optionタグにslected属性を入力すると、ページが表示された時点でプルダウン内に選択されている選択肢を設定できます。
selected属性を使用すれば、記載順関係なしに選択された状態を表示可能です。
【記入例】
<option value="自営業" selected>自営業</option>optgroup：選択肢をグループわけする
optionタグにoptgroupタグを入力すると、選択肢をグループ分けできます。選択肢の視認性を高められるため、選択肢が多い時に活用しましょう。
【記入例】
<optgroup label="関東地方">
<option value="東京都">東京都</option>
<option value="埼玉県">埼玉県</option>
<option value="神奈川県">神奈川県</option>
</optgroup>
選択しやすいフォームのプルダウンをHTMLで作成するポイント
プルダウンメニューを作成する際には、ユーザーフレンドリーになっているかどうかが重要です。以下のポイントを意識しましょう。
・プルダウンメニューを見つけやすい
・選びたい選択肢が含まれている
・選択肢が膨大でない
・選択肢を選びやすい
・入力漏れしにくい
プルダウンを選んでもらうには、ユーザーにそこにプルダウンがあることに気づいてもらう必要があります。CSSを用いて文字の大きさや色などの変更してユーザーの視認性を上げたり、autofocusタグを活用しましょう。
また、プルダウンに表示させる選択肢の量が膨大になりすぎると、ユーザーが選択肢の中から該当するものを探し出すのに手間がかかってしまいストレスになります。選択肢の量を検討するとともに、sizeタグやselectedタグなども活用して、ユーザーが選びやすくなるよう工夫しましょう。
formrunならプルダウンメニューの設定も簡単
弊社が提供するformrunなら、非エンジニアでもマウスだけの簡単な操作中心で、ユーザーが入力しやすいフォームを作成できます。
同じフォーム作成ツールのGoogleフォームと比べてもセキュリティ条件が高く、細かい設定まで機能が豊富となっているため、ビジネス利用目的では、formrunのユーザーのうち7割がGoogleフォームから変更しています。
メールアドレスがあればすぐに利用できます。無期限で無料プランが利用できるのでformrunでぜひフォームを作成してみてください。
formrunやフォーム作成や顧客管理に関する情報を発信しております。
EFO（エントリーフォーム最適化）や問い合わせ対応など、
フォームに関するお悩みを解決します。
