<select>タグは、セレクトボックスを表す際に使用します。
select要素は、選択肢のリストから選択するためのコントロール(セレクトボックス)を表します。 選択肢の項目は、option要素で指定します。 選択肢の項目をグループ化するには、option要素のリストをoptgroup要素の子要素として配置します。
select要素にmultiple属性を指定すると、選択肢のリストから複数選択が可能となります。 select要素にmultiple属性が無ければ、選択肢を1つ選択するためのコントロールとなります。
select要素のsize属性には、ゼロより大きい正の整数を指定します。 この数値は、ユーザーに表示する選択肢の数を表します。
size属性を指定しない場合、 multiple属性があればユーザーに表示する選択肢の数は4となり、 multiple属性が無ければユーザーに表示する選択肢の数は1となります。
以下のサンプルは、select要素でユーザーが選択肢を1つを選択するためのコントロールを作成しています。 option要素の1つには、selected属性を指定して初期選択されるように指定しています。
<form method="post" action="step2.cgi">
<p>
<label for="course">ご希望のコース:</label>
<select id="course" name="course">
<option value="1">お試しコース</option>
<option value="2">ライトコース</option>
<option value="3" selected>ベーシックコース</option>
<option value="4">ビジネスコース</option>
<option value="5">プロフェッショナルコース</option>
</select>
</p>
<p><input type=submit value="次へ"></p>
</form>
以下のサンプルでは、select要素にrequired属性を指定して選択必須にしています。
<form method="post" action="step2.cgi">
<p>
<select name="course" required>
<option value="">ご希望のコースを選択してください</option>
<option value="1">お試しコース</option>
<option value="2">ライトコース</option>
<option value="3">ベーシックコース</option>
<option value="4">ビジネスコース</option>
<option value="5">プロフェッショナルコース</option>
</select>
</p>
<p><input type=submit value="次へ"></p>
</form>
以下のサンプルでは、select要素にmultiple属性を指定して複数選択可にしています。 デフォルトでは、5つの選択肢がすべて選択されています。
<p>
<label for="side">サイドメニューを選択:</label>
<select id="side" name="side" multiple>
<option value="1" selected>みそ汁</option>
<option value="5" selected>玉子</option>
<option value="2" selected>生野菜サラダ</option>
<option value="3" selected>お新香</option>
<option value="4" selected>のり</option>
</select>
</p>
以下のサンプルは、select要素にmultiple属性とrequired属性を指定して、 ユーザーに最低1つ以上の項目を選択することを求めています。 尚、option要素の終了タグ </option> は、省略可能です。
<form method="post" action="play.cgi">
<label>
<div>再生リストに入れる曲を選択してください:</div>
<select multiple required name="playlist">
<option value="s1">It Sucks to Be Me (Reprise)
<option value="s2">There is Life Outside Your Apartment
<option value="s3">The More You Ruv Someone
<option value="s4">Schadenfreude
<option value="s5">I Wish I Could Go Back to College
<option value="s6">The Money Song
<option value="s7">School for Monsters
<option value="s8">The Money Song (Reprise)
<option value="s9">There's a Fine, Fine Line (Reprise)
<option value="s10">What Do You Do With a B.A. in English? (Reprise)
<option value="s11">For Now
</select>
</label>
<p><input type=submit value="再生"></p>
</form>