プルダウンメニューを表す

select要素は、プルダウンメニューを表します。メニューの選択肢は、この要素内に配置するoption要素で示すことになります。

name属性について

name属性は、フォーム部品を識別するための名前を指定します。

この属性の値は、選択されたoption要素の値とセットで送信されます。

<select name="pref">
<option value="Tokyo">東京</option>
<option value="Osaka">大阪</option>
<option value="Fukuoka">福岡</option>
</select>

例えば、上記のメニューで東京が選択された場合は、pref=Tokyo といった感じで送信されることになります。

size属性について

size属性は、表示される選択肢の数を指定します。

この属性の既定値は、multiple属性が指定されている場合は 4、指定されていない場合は 1 になります。

次の例では、右側のメニューに size="5" を指定しています。（左側はデフォルトのまま）

1つの選択肢を表示 選択肢のサンプル2 選択肢のサンプル3 選択肢のサンプル4 選択肢のサンプル5 選択肢のサンプル6 選択肢のサンプル7 5つの選択肢を表示 選択肢のサンプル2 選択肢のサンプル3 選択肢のサンプル4 選択肢のサンプル5 選択肢のサンプル6 選択肢のサンプル7

<select name="example2" size="5">
<option value="">5つの選択肢を表示</option>
<option>選択肢のサンプル2</option>
<option>選択肢のサンプル3</option>
<option>選択肢のサンプル4</option>
<option>選択肢のサンプル5</option>
<option>選択肢のサンプル6</option>
<option>選択肢のサンプル7</option>
</select>

multiple属性について

multiple属性は、複数の選択が可能であることを指定します。

• Windowsの場合は、Ctrl キーを押しながらクリックすると、複数を選択することができます。

選択肢のサンプル1 選択肢のサンプル2 選択肢のサンプル3 選択肢のサンプル4 選択肢のサンプル5

<select name="example3" size="5" multiple>
<option>選択肢のサンプル1</option>
<option selected>選択肢のサンプル2</option>
<option>選択肢のサンプル3</option>
<option selected>選択肢のサンプル4</option>
<option>選択肢のサンプル5</option>
</select>

この属性を指定しない場合は、1つしか選択することができません。

form属性について

form属性は、そのフォーム部品をどのform要素に関連付けるかを指定します。この属性の値には、対応するform要素に指定したID名を記述します。

• この属性は、部品をform要素の外に配置する場合に使用します。（form要素の中に配置する場合は不要です）

<p>都道府県：<select name="pref" form="example">
<option value="Tokyo">東京</option>
<option value="Osaka">大阪</option>
<option value="Fukuoka">福岡</option>
</select></p>

<form method="post" action="example.cgi" id="example">
<p><input type="submit" value="送信する"></p>
</form>

• 古いブラウザでは、この機能に対応していない場合があります。
• form属性の使用例は、form要素のページでご覧になれます。

autocomplete属性について

autocomplete属性は、オートコンプリート機能（入力内容の自動補完）を有効にするかどうかを指定します。

値には on（有効にする）または off（無効にする）を指定します。この属性を省略した場合は、form要素の設定内容が使用されます。（form要素にも指定されていない場合は on の状態が適用されます）

<select name="example" autocomplete="off">
<option>選択肢のサンプル1</option>
<option>選択肢のサンプル2</option>
<option>選択肢のサンプル3</option>
</select>

• フォーム部品のautocomplete属性には、on / off 以外の値（詳細トークン）も指定することができます（詳しくは仕様書をご覧ください）。これにより、詳細な設定を行うことができます。
• オートコンプリートの動作については、form要素のautocomplete属性のページでご確認いただけます。

disabled属性について

disabled属性は、フォーム部品の無効化を指定します。

この属性が指定された部品は、選択することができなくなり、データも送信されなくなります。

<select name="example" disabled>
<option>選択肢のサンプル1</option>
<option>選択肢のサンプル2</option>
<option>選択肢のサンプル3</option>
</select>

• この属性が指定されたフォーム部品は、妥当性のチェックから除外されます。

required属性について

required属性は、そのフォーム部品が入力必須であることを指定します。

次の例では、2番目以降の選択肢（value属性の値が空でない選択肢）を選択する必要があります。

<select name="example" required>
<option value="">選択してください</option>
<option value="選択肢1">選択肢のサンプル1</option>
<option value="選択肢2">選択肢のサンプル2</option>
<option value="選択肢3">選択肢のサンプル3</option>
</select>

プレースホルダ・ラベル・オプションについて

プレースホルダ・ラベル・オプションとは、簡単に言ってしまえば値が設定されていないメニュー項目のことです。例えば、▼選択してくださいといった感じで表示される項目がそれにあたります。

<select name="example" required>
<option value="">▼選択してください</option>
<option>選択肢のサンプル1</option>
<option>選択肢のサンプル2</option>
<option>選択肢のサンプル3</option>
</select>

プレースホルダ・ラベル・オプションの条件は次のようになります。

1. select要素にrequired属性が指定されていて、かつmultiple属性が指定されておらず、
2. select要素のsize属性が 1 の状態であって、（既定値は 1）
3. select要素の直下にoption要素が置かれており、（optgroup要素を使用していない）
4. select要素内の最初のoption要素に空のvalue属性が指定されている場合は、

その最初のoption要素はプレースホルダ・ラベル・オプションになります。

そして、

1. select要素にrequired属性が指定されていて、かつmultiple属性が指定されておらず、
2. select要素のsize属性が 1 の状態である場合は、

そのselect要素にプレースホルダ・ラベル・オプションを配置しなければなりません。

option要素間の区切りについて

select要素内にhr要素を入れると、option要素間の区切りを表すことができます。

文字コード：
<select name="code">
<option value="auto">自動判定</option>
<hr>
<option value="utf8">UTF-8</option>
<option value="sjis">Shift-JIS</option>
<option value="euc">EUC-JP</option>
</select>