<select>タグの解説
<select>は、ユーザーが操作可能な選択式のメニューを作成します。複数の項目を一箇所に並べて、その中から任意のものを選べるインターフェイスを提供します。
<select>は選択式メニューの外枠を表します。この中に項目を追加するには、子要素に<option>を配置して内容と値を定義する必要があります。場合によっては、項目を分類するために<optgroup>を用います。
<select>タグの特徴
- レイアウトの初期値はインラインです。文章の改行には影響を与えません。
- 視覚的な効果として、ユーザーが操作可能なインターフェイスを表示します。多くの場合、
<option>で指定された項目をプルダウン式のメニューにします。 - 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<select>要素に指定できる属性
autocomplete- 自動補完機能のヒントを提供します。この属性の値はオートフィルに関するトークンを半角スペース区切りで指定します。
autofocus- ページが読み込まれた時に、あらかじめフォーカスさせておきたい項目に与えます。これは値のない論理属性です。ページの中に一箇所しか置けません。
disabled- ユーザーの操作を受け付けない状態にします。既定値ではインターフェイスの色が薄くなり、クリックやフォーカスなどのイベントに反応しなくなります。これは値のない論理属性です。
form- 関連付けたい
<form>のid属性と同じ値にします。この属性で関連付けられた<select>は、例え親子関係がない配置の仕方でも、データー送信時に連動します。 multiple- 選択項目を複数選べるようにします。この属性が指定されている場合、多くのブラウザーは単一行のドロップダウンメニューではなく、スクロールできるリストボックスを表示します。これは値のない論理属性です。
name- セレクトボックスの名前を指定します。
required- 選択必須項目であることを示します。これは値のない論理属性です。
size- セレクトボックスの行数を指定します。通常は一行で表示されます。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<select>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。通常、選択式のメニューは複数の<option>を子要素に持ち、その中から一つを選ぶインターフェイスを表示します。この要素で情報をやりとりする場合、<select>のname属性に指定した値が項目のキーを表し、<option>のvalue属性に指定した値が選択した内容を表します。
<select name="key">
<option value="1">メニュー項目１</option>
<option value="2">メニュー項目２</option>
<option value="3">メニュー項目３</option>
</select>
size属性で複数の選択肢を表示する
size属性の値で行数を指定すると、選択肢の項目を始めから一覧で表示させることができます。選択できる項目数が限られており、必ず選ばなければいけないようなメニューに向いています。この値に指定した行数よりも項目の数が多い場合は、スクロールバーが表示されます。
<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>
multiple属性で複数の項目を選択できるようにする
一つのメニューの中で複数の項目を選べるようにするには、multiple属性を与えます。この属性が指定された場合、多くのブラウザはスクロール可能な複数行のメニューを表示します。行数をあらかじめ定義しておきたい場合はsize属性を併記します。複数の項目を選ぶ方法は、クリックしたままドラッグする、ShiftキーやCtrlキーを押しながら選択する、など環境に応じた操作になります。
<select name="like" multiple>
<option value="novel">小説</option>
<option value="movie">映画</option>
<option value="drama">ドラマ</option>
<option value="manga">マンガ</option>
<option value="anime">アニメ</option>
<option value="game">ゲーム</option>
</select>
disabled属性でユーザーの操作を受け付けないようにする
disabled属性を追加すると、<select>はユーザーの操作を受け付けなくなります。既定のインターフェイスでは、項目を変更できないことを表すために色が薄くなります。デザインや装飾を変更する場合は、状態が分かるように工夫しましょう。
<select name="key" disabled>
<option value="1">メニュー項目１</option>
<option value="2">メニュー項目２</option>
<option value="3">メニュー項目３</option>
</select>
<optgroup>で選択肢の項目をグループ化する
メニューの選択肢をグループ化したりカテゴリーごとに分類する場合は、<optgroup>を使用します。この要素に指定したlabel属性の値が選択できない見出しとなります。
<form class="sample">
<p>機材を選んで下さい。</p>
<select name="studio">
<optgroup label="ギターアンプ">
<option value="marshall">マーシャル</option>
<option value="mesa">メサブギー</option>
<option value="fender">フェンダー</option>
<option value="roland">ローランド</option>
</optgroup>
<optgroup label="ベースアンプ">
<option value="ampeg">アンペグ</option>
<option value="gibson">ギブソン</option>
<option value="hartke">ハートキー</option>
<option value="peavey">ピーヴィー</option>
</optgroup>
</select><br>
<button type="submit">決定</button>
</form>