HTMLフォームでよく見かけるプルダウン式の選択メニューには<select>タグが使われています。
この記事では、<select>タグについて初心者の方を対象にわかりやすく解説していきたいと思います。
セレクトボックスはHTMLフォームでは非常によく使う部品となっていますので、記述方法などについて理解しておきましょう。
<select>タグとは
<select>タグはセレクトボックスを作成するために使用するタグです。
HTMLフォームではお馴染みのプルダウン式選択メニューなどで使われています。
また<select>タグに限った話ではありませんが、JavaScriptとの組み合わせも実際のサイトではよく見かけます。
タグの分類はインライン要素で、属性には”name”、”size”、”multiple”、”desabled”があります。
また、<select>タグは単体で使われることはなく、<select>タグ内に<option>タグをネストして使います。
<select>の基本的な使い方
<select>タグは以下のコードのように記述します。
<select>内にネストした開始タグの<option>と終了タグの</option>でテキストを挟むことでプルダウン式メニューを作成できます。
<select id="fruit" name="fruit"> <option value="イチゴ">イチゴ</option> <option value="みかん">みかん</option> <option value="りんご">りんご</option> <option value="メロン">メロン</option> <option value="バナナ">バナナ</option> </select>
グループ項目を作る
<optgroup></optgroup>は<select>と一緒に組み合わせることで選択項目群として表示させることが出来ます。
<optgroup>タグで作成した項目は選択することは出来ませんが、セレクト内の項目をカテゴリー毎に分類することでユーザビリティの向上に繋がります。
使い方
<optgroup>は<select>タグ内に<optgroup>タグをネストし、更に<optgroup>タグ内に<option>タグをネストすることで使用できます。
<optgroup>タグの具体的な使い方については以下のコードを参照してください。
<select id="name" name="name"> <optgroup label="fruit"> <option value="イチゴ">イチゴ</option> <option value="みかん">みかん</option> <option value="りんご">りんご</option> <option value="メロン">メロン</option> <option value="バナナ">バナナ</option> </optgroup> <optgroup label="vegetable"> <option value="ダイコン">ダイコン</option> <option value="はくさい">はくさい</option> <option value="きゅうり">きゅうり</option> <option value="レタス">レタス</option> <option value="キャベツ">キャベツ</option> </optgroup> </select>
複数選択可能にする
<select>タグはデフォルトでは単一選択となっていますが、サイトで使う場合には複数選択が必要となる事もあるでしょう。
セレクトボックスを複数選択式にするには、<select>タグの属性に”multiple”を指定することで可能です。
詳しい記述は以下のコードを参照してください。
<select id="name" name="name" multiple> <optgroup label="fruit"> <option value="イチゴ">イチゴ</option> <option value="みかん">みかん</option> <option value="りんご">りんご</option> <option value="メロン">メロン</option> <option value="バナナ">バナナ</option> </optgroup> <optgroup label="vegetable"> <option value="ダイコン">ダイコン</option> <option value="はくさい">はくさい</option> <option value="きゅうり">きゅうり</option> <option value="レタス">レタス</option> <option value="キャベツ">キャベツ</option> </optgroup> </select>
複数選択式のセレクトボックスで複数の項目を選択する場合には、「Shift+左クリック」若しくは「Ctrl+左クリック」を使用します。
Shift+左クリックは複数項目を一度に選択でき、Ctrl+左クリックは項目を一つずつ選択することが出来ます。
初期状態での選択
プルダウンメニューの選択肢の中で特定の項目を予め選択状態にしておきたい場合があるかもしれません。
そういった場合には”selected”を使用することで可能となります。
“selected”は<select>タグの属性ではないため、注意してください。
<option>に属性追加することで該当する項目を予め選択状態に変更できます。
詳しい記述は以下のコードを参照してください。
<select id="name" name="name" multiple> <optgroup label="fruit"> <option value="イチゴ">イチゴ</option> <option value="みかん">みかん</option> <option value="りんご">りんご</option> <option value="メロン" selected>メロン</option> <option value="バナナ">バナナ</option> </optgroup> <optgroup label="vegetable"> <option value="ダイコン">ダイコン</option> <option value="はくさい">はくさい</option> <option value="きゅうり">きゅうり</option> <option value="レタス">レタス</option> <option value="キャベツ">キャベツ</option> </optgroup> </select>
まとめ
いかがでしたか？
今回はHTMLフォームでよく使われる<select>タグについて解説してみました。
<select>タグはJavaScriptなどとの組み合わせで使われることが多いタグですが、使い方自体は基本的な使い方がほとんどです。
この記事を読んで基本的な使い方をしっかりとマスターし、サイトを作成する際に戸惑わないようにしておきましょう。
またCSSと組み合わせることで表示もガラリと変えることが出来るため、色々と試してみましょう。
