HTMLタグでフォームのプルダウンメニューを設定する方法

フォームにおけるプルダウンとは、複数の選択肢から1つの選択肢だけ表示させる入力項目です。
フォームでプルダウンを活用すると、フォームの表示内容が減るため、ユーザーの回答負担を下げる効果があります。

しかし、HTMLでオリジナルのフォームを作成する場合、どうやってWebページにプルダウンを埋め込めかわからない方もいるでしょう。

本記事では、HTMLタグでフォームにプルダウンメニューを設定する方法を解説します。選択しやすいプルダウンのポイントも解説するので、ユーザーがストレスなく入力できるフォームを作成しましょう。

Webサイトにプルダウンを作成したいが、デザイン性や機能、セキュリティが気になる方は「formrun」がおすすめです。

120種類以上のデザイン性の高いテンプレートがそろっており、必要な項目を選択するだけでフォームが完成します。サイトへの埋め込みも専用のHTMLコードをコピーするだけで可能です。

HTMLやCSSを自由にカスタマイズできるコード型フォームもご用意しています。
まずは、無料でフォームを作成してみてください。

formrunでフォームを作成する

コード型フォームについて詳しく知りたい方はこちら
>> ヘッドレスフォーム（コード型フォーム）

目次 [非表示]

フォームのプルダウンとは
HTML：selectタグでフォームのプルダウンを作成する
HTML：optionでフォームのプルダウンの詳細を設定する
選択しやすいフォームのプルダウンをHTMLで作成するポイント
formrunならプルダウンメニューの設定も簡単

フォームのプルダウンとは

フォームに設置するプルダウンとは、複数の選択肢から1つの回答を選ぶ入力項目です。ボタンをクリックすると選択肢が表示され、回答を選べるようになります。

プルダウンの一例

プルダウンを設置するメリットは以下の通りです。

入力の手間が省ける
選択肢を絞れる
入力漏れを防げる
誤入力を防げる
データ管理しやすい
レイアウトの調整が簡単

フォームでプルダウンを利用するメリットを詳しく知りたい方は、以下の記事をご参照ください。
>>フォームのプルダウンとは？他選択項目との違いや活用時の3つのポイントを解説

HTML：selectタグでフォームのプルダウンを作成する

HTMLでプルダウンを作成するには、selectタグを入力します。selectタグはプルダウンを作成するコードであり、以下の属性を入力すれば詳細の設定が可能です。

name
size
required
multiple

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>

multiple：複数選択に設定する

プルダウンでは、選択肢の中から複数の回答を選択することはできません。

選択肢からユーザーが複数選択できるようしたい場合には、「multiple属性」を使用します。ただし、プルダウンメニューではなくなるため、一覧で表示されるようになります。項目が多いほど表示数も増えてユーザーの視認性を悪くする可能性が高くなるため、注意が必要です。

<select name="job" multiple size="2">
 <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で文字の大きさや色などを変更し、Webページ内での視認性を上げましょう。

また、プルダウンに表示させる選択肢の量が膨大だと、ユーザーが自身に該当する選択肢を探すのに手間がかかり、入力の負担をかけてしまいます。選択肢の量を検討するとともに、sizeタグやselectedタグなども活用して、ユーザーが選びやすくなるよう工夫することが重要です。

formrunならプルダウンメニューの設定も簡単

弊社が提供するformrunなら、非エンジニアでもマウスだけの簡単な操作中心で、ユーザーが入力しやすいフォームを作成できます。

同じフォーム作成ツールのGoogleフォームと比べてもセキュリティ条件が高く、細かい設定まで機能が豊富となっているため、ビジネス利用目的では、 formrunのユーザーのうち7割がGoogleフォームから変更しています。

メールアドレスがあればすぐに利用できます。無期限で無料プランが利用できるのでformrunでぜひフォームを作成してみてください。

無料でフォームを作成する

formLab編集部

formrunやフォーム作成や顧客管理に関する情報を発信しております。

EFO（エントリーフォーム最適化）や問い合わせ対応など、
フォームに関するお悩みを解決します。