HTML

select 要素

　select要素は、セレクトボックスを作成する際に使用します。一般的なブラウザでは、ドロップダウン式のセレクトボックスや、スクロール式のセレクトウィンドウとして表示されます。

　<select>～</select> でセレクトボックス全体を定義して、その中に option要素を配置して個々の選択肢リストを作成します。option要素で作成した選択肢を <optgroup>～</optgroup> で囲むと、選択肢をグループ化することができます。

　multiple属性は、選択肢を複数選択できるようにする際に使用します。multiple属性を指定しない場合には、選択肢を1つだけ選択できるようになります。

　size属性は、ユーザーに向けて表示する選択肢の数を指定する際に使用します。size属性の値として指定できるのは、1以上の正の整数です。size属性の初期値は、multiple属性を指定している場合には4、multiple属性を指定していない場合には1となります。

　尚、選択肢をあらかじめ選択状態にするには、option要素にselected属性を指定します。

　※メモ：select要素は必ずボックスとして表示されるわけではありません。従って“セレクトボックス”という表現は正確ではありませんが、分かりやすさを優先しています。正確に解説するなら、「select要素は、選択肢リストから選択するための操作機能を表す要素です。」となります。

HTML4.01から HTML5へのバージョンアップによる変更点

　select要素は、HTML5では autofocus属性・form属性が新たに追加されています。

属性

autofocus属性

自動フォーカスを指定する（autofocus）

disabled属性

操作を無効にする（disabled）

form属性

どのフォームと関連付けるかを<form>のid名で指定

multiple属性

選択肢を複数選択できるようにする（multiple）

name属性

セレクトボックスの名前を指定

size属性

表示する選択肢の数を指定（1以上の正の整数）

使用例

<p>
	<label for="language">言語を選択してください：</label>
	<select id="language" name="language">
		<option value="en">英語</option>
		<option value="de">ドイツ語</option>
		<option value="fr">フランス語</option>
		<option value="ja" selected>日本語</option>
		<option value="zh">中国語</option>
	</select>
</p>
<p>
	<label for="contact">ご希望の連絡方法（複数選択可）：</label>
	<select id="contact" name="contact" multiple size="5">
		<option value="email" selected>電子メール</option>
		<option value="tel" selected>電話</option>
		<option value="fax" selected>ファックス</option>
		<option value="postal" selected>郵便</option>
		<option value="office">ご来店時に係員より説明</option>
	</select>
</p>