<select> セレクトボックスを作成する
取り扱い | 現行の標準 |
カテゴリ |
フロー・コンテンツ フレージング・コンテンツ インタラクティブ・コンテンツ |
親にできる要素 | フレージング・コンテンツを受け入れる要素 |
子にできる要素 | 任意個数の<option> または<optgroup> |
対応ブラウザ | caniuseで確認 |
<select>タグの説明
<select>
は、送信フォームに用いる選択式のメニューを作成する際に使用します。このようなインターフェイスのことを、ここではセレクトボックスと言います。
<select>
は単なるメニューの外枠を表す物なので、基本的には選択される項目を表す<option>
をいくつも内包します。場合によっては、選択項目を階層化するために<optgroup>
を用います。
<select>タグの特徴
- レイアウトの初期値はインラインです。文章の改行には影響を与えません。
- 視覚的な効果として、ユーザーが操作可能なインターフェイスを表示します。多くの場合、
<option>
で指定された項目をプルダウン式のメニューにします。 - 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<select>に指定できる主な属性
- autocomplete
- 自動補完機能のヒントを提供します。
- autofocus
- ページが読み込まれた時に、あらかじめフォーカスさせておきたい項目に与えます。これは論理属性です。ページの中に一箇所しか置けません。
- disabled
- セレクトボックスをユーザー側で操作不能にする場合に指定します。これは論理属性です。
- form
- 関連付けたい
<form>
のid
属性と同じ値にします。この属性で関連付けられた<select>
は、例え親子関係がない配置の仕方でも、データー送信時に連動します。 - multiple
- 選択項目を複数選べるようにします。これは論理属性です。この属性が指定されている場合、多くのブラウザーは単一行のドロップダウンメニューではなく、スクロールできるリストボックスを表示します。
- name
- セレクトボックスの名前を指定します。
- required
- 選択必須項目であることを示します。これは論理属性です。
- size
- セレクトボックスの行数を指定します。通常は一行で表示されます。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<select>の使い方とサンプル
このタグは、主に<option>
とセットで使います。一般的なセレクトボックスは、以下のように作成します。size
属性で行数を増やすと、項目が一覧で表示されます。
HTML
<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>
表示確認
セレクト項目をグループ化して階層を与えた例です。実際にサンプルを動かして見栄えを確認してみましょう。
HTML
<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>
表示確認
<select>に関連するHTMLタグ
入力・送信フォームに関連する要素 | |
---|---|
<form> | フォームを作成する |
<fieldset> | フォームの入力項目をグループ化する |
<legend> | 入力項目のグループにキャプションを与える |
<input> | フォームを構成する部品を作成する |
<label> | 入力項目にキャプションを与えて関連付ける |
<textarea> | 複数行に渡るテキスト編集項目を作成する |
<button> | ボタンを設置する |
<select> | セレクトボックスを作成する |
<option> | セレクトボックスの選択肢を作成する |
<optgroup> | セレクトボックスの選択肢をグループ化する |
<datalist> | フォームの入力欄に入力候補となる選択肢を提供する |