5.1 <select> 要素
<select>、<option>、<optgroup> の要素は、HTMLフォームでドロップダウンリストや複数選択リストを作成するために使うよ。これを使うと、ユーザーは事前に決められた値の中から1つまたは複数の選択肢を選べるんだ。
<select> 要素はドロップダウンリストを作成するために使うんだ。その中に1つ以上の <option> 要素があって、選択肢として表示されるよ。
使用例:
<label for="country">Choose a country:</label>
<select id="country" name="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="mx">Mexico</option>
</select>
<select> の主な属性
属性 name: フォームの要素の名前を設定して、選択された値と一緒にサーバーに送信されるよ。
<select name="country"></select>
属性 id: <label> 要素と関連付けるためのユニークな識別子を設定するんだ。
<select id="country" name="country"></select>
属性 multiple: ユーザーが複数の選択肢を一度に選べるようにする。リストは見た目が複数行になるよ。
<select name="fruits" id="fruits" multiple>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
</select>
属性 size: ドロップダウンリストで表示される行の数を設定するんだ。スクロール可能なリストを作るのに便利だよ。
<select name="cities" size="4">
<option value="ny">New York</option>
<option value="la">Los Angeles</option>
<option value="chicago">Houston</option>
</select>
5.2 <option> 要素
<select> 内で、<option> 要素はユーザーが選べるそれぞれの選択肢を定義するために使うんだ。
使用例:
<select name="color">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
<option> の主な属性:
属性 value: この選択肢が選択された場合、サーバーに送信される値を設定するよ。
<option value="red">Red</option>
属性 selected: デフォルトでこの選択肢を選択するかどうかを決める。
<option value="green" selected>Green</option>
属性 disabled: この選択肢を選べなくする。
<option value="blue" disabled>Blue</option>
5.3 <optgroup> 要素
<optgroup> 要素は、<select> 内で関連する選択肢をグループ化するために使うよ。それにより、選択肢をカテゴリーごとに分けて、リストをもっと整理されたわかりやすいものにするんだ。
使用例:
<select name="car">
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
</optgroup>
<optgroup label="Japanese Cars">
<option value="toyota">Toyota</option>
<option value="honda">Honda</option>
<option value="nissan">Nissan</option>
</optgroup>
</select>
<optgroup> の主な属性:
属性 label: グループのタイトルを設定する。
<optgroup label="German Cars"></optgroup>
属性 disabled: このグループ内のすべての選択肢を選べなくする。
<select name="car">
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
</optgroup>
<optgroup label="Japanese Cars" disabled>
<option value="toyota">Toyota</option>
<option value="honda">Honda</option>
<option value="nissan">Nissan</option>
</optgroup>
</select>
<select>, <option>, <optgroup> のための役立つヒント
- 論理的なグループ化:
<optgroup>を使って関連する選択肢を論理的にグループ化するんだ。これにより、ユーザーにとってフォームがもっと使いやすくなるよ。 - 複数選択: ユーザーに複数の選択肢を選んでもらう必要がある場合、
<select>に属性multipleを使おう。 - アクセシビリティ:
idとlabelの属性を使ってフォーム要素のアクセシビリティを向上させよう。正しいlabelの使い方は、支援技術を使っている人を含め、すべてのユーザーにとってフォームとのやり取りを改善するよ。 - スタイリング: CSS を使ってドロップダウンリストや複数選択リストの見た目をよくするんだ。例えば:
select {
width: 200px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
GO TO FULL VERSION