select-html5

<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へのバージョンアップによる変更点

output要素は、HTML5から新たに追加された要素です。

■属性

autofocus属性
　　　自動フォーカスを指定する（autofocus）
disabled属性
　　　操作を無効にする（disabled）
form属性
　　　どのフォームと関連付けるかを<form>のid名で指定
multiple属性
　　　選択肢を複数選択できるようにする（multiple）
name属性
　　　セレクトボックスの名前を指定
size属性
　　　表示する選択肢の数を指定（1以上の正の整数）

■使用例

HTMLソース
<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>

↓↓↓

ブラウザ上の表示

言語を選択してください：

ご希望の連絡方法（複数選択可）：