<select> セレクトボックスを作成する

<select>タグの説明

<select>は、送信フォームに用いる選択式のメニューを作成する際に使用します。このようなインターフェイスのことを、ここではセレクトボックスと言います。

<select>は単なるメニューの外枠を表す物なので、基本的には選択される項目を表す<option>をいくつも内包します。場合によっては、選択項目を階層化するために<optgroup>を用います。

<select>タグの特徴

• レイアウトの初期値はインラインです。文章の改行には影響を与えません。
• 視覚的な効果として、ユーザーが操作可能なインターフェイスを表示します。多くの場合、<option>で指定された項目をプルダウン式のメニューにします。
• 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。

<select>に指定できる主な属性

autocomplete

自動補完機能のヒントを提供します。

autofocus

ページが読み込まれた時に、あらかじめフォーカスさせておきたい項目に与えます。これは論理属性です。ページの中に一箇所しか置けません。

disabled

セレクトボックスをユーザー側で操作不能にする場合に指定します。これは論理属性です。

form

関連付けたい<form>のid属性と同じ値にします。この属性で関連付けられた<select>は、例え親子関係がない配置の仕方でも、データー送信時に連動します。

multiple

選択項目を複数選べるようにします。これは論理属性です。この属性が指定されている場合、多くのブラウザーは単一行のドロップダウンメニューではなく、スクロールできるリストボックスを表示します。

name

セレクトボックスの名前を指定します。

required

選択必須項目であることを示します。これは論理属性です。

size

セレクトボックスの行数を指定します。通常は一行で表示されます。

グローバル属性

全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。

イベントハンドラ

全てのHTML要素に指定できるコンテンツ属性です。

<select>の使い方とサンプル

このタグは、主に<option>とセットで使います。一般的なセレクトボックスは、以下のように作成します。size属性で行数を増やすと、項目が一覧で表示されます。

<select name="blood">
	<option value="A">A型</option>
	<option value="B">B型</option>
	<option value="O">O型</option>
	<option value="AB">AB型</option>
</select>

<select name="blood" size="4">
	<option value="A">A型</option>
	<option value="B">B型</option>
	<option value="O">O型</option>
	<option value="AB">AB型</option>
</select>

セレクト項目をグループ化して階層を与えた例です。実際にサンプルを動かして見栄えを確認してみましょう。

<form action="#####" method="post">
	機材を選んで下さい。<br>
	<select name="studio">
	<optgroup label="ギターアンプ">
		<option value="marshall" label="マーシャル">マーシャル</option>
		<option value="mesa" label="メサブギー">メサブギー</option>
		<option value="fender" label="フェンダー">フェンダー</option>
		<option value="roland" label="ローランド">ローランド</option>
	</optgroup>

	<optgroup label="ベースアンプ">
		<option value="ampeg" label="アンペグ">アンペグ</option>
		<option value="gibson" label="ギブソン">ギブソン</option>
		<option value="hartke" label="ハートキー">ハートキー</option>
		<option value="peavey" label="ピーヴィー">ピーヴィー</option>
	</optgroup>
	</select><br>
	<input type="submit" value="決定">
</form>