【HTML】プルダウン式メニューの作成方法。SELECTについて初心者にもわかりやすく解説。
  • facebookページ
  • twitterページ
  • 2020.03.11

    【HTML】プルダウン式メニューの作成方法。SELECTについて初心者にもわかりやすく解説。

    HTMLフォームでよく見かけるプルダウン式の選択メニューには<select>タグが使われています。

    この記事では、<select>タグについて初心者の方を対象にわかりやすく解説していきたいと思います。

    セレクトボックスはHTMLフォームでは非常によく使う部品となっていますので、記述方法などについて理解しておきましょう。

    <select>タグとは

    <select>タグはセレクトボックスを作成するために使用するタグです。

    HTMLフォームではお馴染みのプルダウン式選択メニューなどで使われています。

    また<select>タグに限った話ではありませんが、JavaScriptとの組み合わせも実際のサイトではよく見かけます。

    タグの分類はインライン要素で、属性には”name”、”size”、”multiple”、”desabled”があります。

    また、<select>タグは単体で使われることはなく、<select>タグ内に<option>タグをネストして使います。

    <select>の基本的な使い方

    <select>タグは以下のコードのように記述します。

    <select>内にネストした開始タグの<option>と終了タグの</option>でテキストを挟むことでプルダウン式メニューを作成できます。

    グループ項目を作る

    <optgroup></optgroup>は<select>と一緒に組み合わせることで選択項目群として表示させることが出来ます。

    <optgroup>タグで作成した項目は選択することは出来ませんが、セレクト内の項目をカテゴリー毎に分類することでユーザビリティの向上に繋がります。

    使い方

    <optgroup>は<select>タグ内に<optgroup>タグをネストし、更に<optgroup>タグ内に<option>タグをネストすることで使用できます。

    <optgroup>タグの具体的な使い方については以下のコードを参照してください。

    複数選択可能にする

    <select>タグはデフォルトでは単一選択となっていますが、サイトで使う場合には複数選択が必要となる事もあるでしょう。

    セレクトボックスを複数選択式にするには、<select>タグの属性に”multiple”を指定することで可能です。

    詳しい記述は以下のコードを参照してください。

    複数選択式のセレクトボックスで複数の項目を選択する場合には、「Shift+左クリック」若しくは「Ctrl+左クリック」を使用します。

    Shift+左クリックは複数項目を一度に選択でき、Ctrl+左クリックは項目を一つずつ選択することが出来ます。

    初期状態での選択

    プルダウンメニューの選択肢の中で特定の項目を予め選択状態にしておきたい場合があるかもしれません。

    そういった場合には”selected”を使用することで可能となります。

    “selected”は<select>タグの属性ではないため、注意してください。

    <option>に属性追加することで該当する項目を予め選択状態に変更できます。

    詳しい記述は以下のコードを参照してください。

    まとめ

    いかがでしたか?

    今回はHTMLフォームでよく使われる<select>タグについて解説してみました。

    <select>タグはJavaScriptなどとの組み合わせで使われることが多いタグですが、使い方自体は基本的な使い方がほとんどです。

    この記事を読んで基本的な使い方をしっかりとマスターし、サイトを作成する際に戸惑わないようにしておきましょう。

    またCSSと組み合わせることで表示もガラリと変えることが出来るため、色々と試してみましょう。

     



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE