HTML の select タグ – ドロップダウンメニュー (コンボリスト) の作成方法

原文: HTML Select Tag – How to Make a Dropdown Menu or Combo List

ユーザーが値を選択できるドロップダウンメニューを作成するには、HTML の select タグを使用します。これは、サーバーに送るデータを収集するのに役立つ機能です。

通常、select タグは form 要素内に置かれ、別のタグ <option> 内に選択肢の項目を置きます。select タグ単独で配置することもできますが、その場合も、特別な属性の一つである form を使用して form 要素と関連付けます。

このチュートリアルでは、コーディングプロジェクトでのデータ収集に使用できるように、select タグでドロップダウンメニューを作成する方法について紹介します。スタイリングが難しいことで有名な select タグのスタイリング方法についても触れます。

Select タグの属性

select タグを使ってドロップダウンメニューを作成する方法を説明する前に、select タグがとる属性について説明しておく必要があります。

以下がその属性です。

• name: サーバーに送信された後にデータを参照するのに使用されるため、form control には全て名前を付ける必要があります。
• multiple: この属性により、ユーザーはドロップダウンメニューから複数のオプションを選択できます。
• required: 通常、検証に使用されます。これにより、ユーザーがドロップダウンから少なくとも一つのオプションを選択しない限り、フォームは送信されません。
• disabled: この属性により、ユーザーはオプションを操作できなくなります。
• size: 数値で表される size 属性は、一度に表示されるオプションの数を指定するために使用されます。
• autofocus: この属性は、select を含むすべてのフォーム入力で使用され、ページの読み込み時に入力がフォーカスされるように指定します。

Select タグを使ってドロップダウンメニューを作成する方法

select タグを使ってドロップダウンメニューを作成するには、まず form 要素が必要です。なぜなら、データをサーバーに送信するためには、form 要素内に送信ボタン (submit) も必要になるからです。

<form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

この例では、ドロップダウンとボタンを中央揃えにし、body の背景をライトグレーにするための簡単な CSS を追加します。

body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh;
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

より洗練され、アクセスしやすいものにするために、セレクトボックスを label 要素と関連付け、label テキストをクリックしたときにフォーカスするようにすることもできます。次のコードでそれを実現できます。

<form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

送信ボタンをクリックしたときに 404 エラーが表示されないように、action 属性の値として番号記号 (#) を入力します。

そして、CSS を少し変更する必要があります。

 body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh; 
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

label {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

select {
     margin-bottom: 10px;
     margin-top: 10px;
   }

最終的に次のような結果が得られます。

これで終わりではありません。ページを開いてすぐ送信ボタンをクリックした場合、ドロップダウン項目のうちの一つがデフォルトで表示されており、選択されてしまいます。

しかし、ユーザーエクスペリエンスの観点から、これは好ましくありません。「言語を選択 (select a language)」をドロップダウンの最初の項目に設定することで、これを避けることができます。

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="select">Select a language</option>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

また、ユーザーが項目を選択するためにセレクトボックスをクリックするときも、ドロップダウンが送信ボタンに重なって表示されます。これもユーザーエクスペリエンスを低下させる原因になり得ます。

これを解決するには、ドロップダウン内にデフォルトで決まった数の項目を表示し、その他の項目をスクロール表示するようにする size 属性が使用できます。

これにより、一部の項目が自動的にユーザーに表示されるため、ダミーの最初の項目を取り除くこともできます。

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang" size="4">
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

multiple 属性を使用すると、ユーザーがドロップダウンから複数の項目を選択できるようになります。

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang" multiple>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

multiple 属性により、デフォルトで四つの項目が表示されます。複数の項目を選択するには、Shift キーまたは Ctrl キーを押しながらマウスで選択する必要があります。

select タグと <option> タグでできることはこれだけではありません。<select> タグ内に <optgroup> 要素を使用して、複数階層のセレクトボックスを作成することもできます。

次のように、先ほど作成したドロップダウンを複数階層のセレクトボックスに変換できます。

<form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <optgroup label="first-choice">
          <option value="select">Select a language</option>
          <option value="javascript">JavaScript</option>
          <option value="php">PHP</option>
          <option value="java">Java</option>
          <option value="golang">Golang</option>
        </optgroup>
        <optgroup label="second-choice">
          <option value="python">Python</option>
          <option value="c#">C#</option>
          <option value="C++">C++</option>
          <option value="erlang">Erlang</option>
        </optgroup>
      </select>
      <input type="submit" value="Submit" />
</form>

Select 要素をスタイリングする方法

select 要素のスタイル設定は分かり辛く、ブラウザー内での表示方法も一貫しないことが多いです。しかし、次のような設定を試してみることもできます。

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="select">Select a Language</option>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

 select {
        margin-bottom: 10px;
        margin-top: 10px;
        font-family: cursive, sans-serif;
        outline: 0;
        background: #2ecc71;
        color: #fff;
        border: 1px solid crimson;
        padding: 4px;
        border-radius: 9px;
      }

上記の CSS コードスニペットでは、セレクトボックス内のテキストに次の外観を付与しました。

• フォントファミリー「cursive」と色「白」
• アウトライン「0」: フォーカスされたときの不恰好なアウトラインを削除
• 背景「緑色」
• 境界線「1px、深紅色」
• 境界半径「4px」: 全辺にわずかに丸みを帯びた境界線を付与
• パディング「4px」: 少し間隔を空ける

これによりセレクトボックスの見栄えが良くなりました。

結論

select タグは、HTML でドロップダウンやコンボリストを作成する場合に非常に便利です。ラジオボタンとチェックボックスを一つのパッケージにまとめたようなものです。

ラジオボタンではリストから一つの項目しか選択できませんが、チェックボックスでは複数の項目を選択できることを覚えているでしょうか。select は、単一のアイテムのみまたは複数のアイテムを受け付けるようにも設定できるため、より柔軟です。

select タグの問題の一つは、スタイルが非常に難しいことです。合理的な解決策は、優れたユーティリティ クラスを提供する CSS ライブラリを使用して、select 要素やフォームのスタイルを設定することです。

このチュートリアルで select タグに慣れ、プロジェクトで使用できるようになったのであれば嬉しいです。

読んでいただきありがとうございます。引き続きコーディング頑張ってください。