<select> …… セレクトボックスを表す

<select>タグは、セレクトボックスを表す際に使用します。

select要素は、選択肢のリストから選択するためのコントロール（セレクトボックス）を表します。 選択肢の項目は、option要素で指定します。 選択肢の項目をグループ化するには、option要素のリストをoptgroup要素の子要素として配置します。

■属性

■使用例

以下のサンプルは、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属性を指定すると、選択肢のリストから複数選択が可能となります。 select要素にmultiple属性が無ければ、選択肢を1つ選択するためのコントロールとなります。

■使用例

以下のサンプルは、select要素にmultiple属性を指定して複数選択可にしています。 multiple属性を指定、かつ、size属性を指定していないので、ユーザーに表示する選択肢の数は4となります。 すべてのoption要素にselected属性をしているので、デフォルトではすべての選択肢が選択された状態になります。

<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つ以上の項目を選択することを求めています。 multiple属性を指定、かつ、size属性を指定していないので、ユーザーに表示する選択肢の数は4となります。

<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>

</option> の省略について

option要素の直後に別のoption要素が続く場合や、 親要素にそれ以上のコンテンツがない場合には、 option要素の終了タグ </option> は、省略可能です。

■関連項目

Sponsors