サイトの読者に選択肢を与えて回答させたい、そんな時に役立つタグをご存じですか？
HTMLでセレクトボックスを設置する方法は？
今回は、optionタグの
・基本的な使い方
・optionタグと類似タグ＜select＞タグとの違いについて
・optionタグの応用的な使い方
についてご紹介します。また、ユーザビリティを向上させる属性の使い方についても解説します。
目次
optionタグとは
optionタグの読み方
optionタグは「オプションタグ」と読みます。optionは英語で『選択』という意味を持ちます。
optionタグの説明
optionタグはWebページのフォーム内で使用されるタグで、複数の選択肢から回答を選択するセレクトボックスの選択肢を作成します。
optionタグで利用できる属性
optionタグではグローバル属性に加え、以下の属性を使うことができます。
| 属性 | 説明 |
|---|---|
| disabled | ユーザーによる操作を無効にするかどうかを指定する属性です。 |
| label | ユーザーが読める形で表示するタイトルを指定する属性です。 |
| selected | ページ読込時に、対象要素を選択状態にする属性です。 |
| value | フォームで送信する値を設定します。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 1 |
| Edge | 12 |
| Firefox | 1 |
| nternet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 4 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
optionタグの基本的な使い方
optionタグの使い方
optionタグはselectタグと一緒に使用します。まずは<select>でセレクトボックスを配置し、その中に<option>を設置して、セレクトボックスの選択肢を作成します。
value属性を使用することで、ユーザーが選択した値をサーバーに送信する設定を作成しました。最後は必ず</select>でセレクトボックスと閉じましょう。
See the Pen
option基本 by rabbittyu (@rabbittyu)
on CodePen.
optionタグと類似するselectタグとの違い
少し混同しやすいですが、selectタグとoptionタグは全くの別物。selectタグはセレクトボックスを作成し、optionタグはそのセレクトボックスに選択肢を与えるタグです。
実際にセレクトボックスを作成することで、整理しやすくなると思うので、まずは自分でコードを作成してみましょう。
optionタグの応用的な使い方
特定の値を選択済みにする
多くのユーザーが選択する値を、あらかじめ選択済みにしておく操作も、属性と組み合わせることで簡単に実現できます。
ここでは居住国を日本人のユーザーに選択してもらいます。多くの日本人ユーザーの居住国は日本なので、optionタグの日本の要素のところに、selected属性を設定しました。
この手間を加えることで、多くの日本人ユーザーにとって数々の選択肢の中から、日本を選ぶ時間を削減してあげることができましたね！
See the Pen
option応用③ by rabbittyu (@rabbittyu)
on CodePen.
labelタグと結びつけて使いやすくする
これはselectタグに関連する操作ですが、label要素と関連付けることでユーザビリティやアクセシビリティの向上につながります。
試しにサンプルコードの”好きな果物は？”をクリックしてみてください。文字をクリックしたのにもかかわらず、セレクトボックスがフォーカスされました。
これはselectタグで設定したidに対して、labelタグのfor属性で関連付けを行ったからです。こうすることで、ユーザーは小さなセレクトボックスに対する操作も容易に行えるようになりました。
See the Pen
vYKQWVY by rabbittyu (@rabbittyu)
on CodePen.
まとめ
今回はセレクトボックスの値を設定するoptionタグをご紹介しました。ポイントは3つ。
- optionタグは必ずselectタグの中で使う
- value属性に設定した値が、サーバーに送信される
- より使いやすくするために、labelタグでクリックできる範囲を広げる
この3点のみを抑えておけば、セレクトボックスの作成はほとんど完璧！ただセレクトボックスを作成するだけでなく、ユーザーにとって扱いやすいフォームであることを心がけると、より見やすいページが作成できるでしょう。
参考文献：
MDN web docs <option>: HTML 選択肢要素
HTML5タグリファレンス
Accessible & Usable
