最終更新日

select要素

リストボックスや、プルダウン形式のメニューなど、選択肢から選べる形式のメニューを作ります。選択肢の各項目は、子要素としてoption要素で指定します。または、select要素の子要素としてoptgroup要素、その下にoption要素を含めて指定できます。

multiple属性を指定すると、選択肢の一覧から複数の項目の選択が可能になります。multiple属性が指定されていない場合には、選択肢から選択できる項目は1つのみです。

size属性では、メニュー上に表示する選択肢項目の数を、1以上の整数で指定できます。multiple属性が指定されている場合のsize属性の既定値は「4」、multiple属性が指定されていない場合のsize属性の既定値は「1」です。size属性が1の場合、プルダウン形式のメニューとして表示されます。

required属性が指定されている場合、ユーザーは送信前に値の選択が必須となります。

select要素は、Phrasingコンテンツの記述箇所で使用できます。

HTML5での変更点
・autofocus、form、requiredの各属性が新たに追加されました。
・datasrc、datafld、dataformatasの各属性は廃止されました。
カテゴリ タグの省略 親要素 子要素
Flowコンテンツ
Phrasingコンテンツ
Interactiveコンテンツ
フォーム関連要素
省略不可 Phrasingコンテンツを子にできる要素 optionoptgroup
属性 説明
autofocus autofocus 論理属性。ページ表示時に項目がフォーカスされます。
disabled disabled 論理属性。フォームコントロールが使用不可になります。
form ID form要素のid属性の値を指定します。
multiple multiple 論理属性。複数の値を選択可能になります。
name 文字列 select要素の名前を指定します。
required required 論理属性。入力が必須となる項目に指定します。
size 数値 表示する選択肢の数を指定します。
グローバル属性 - -
イベント属性 - -
サンプルコード
<body>
  <p>お好みの商品を選択して下さい。</p>
  <select name="product" size="3" autofocus required multiple>
    <option value="plain">ハンバーガー</option>
    <option value="cheese">チーズバーガー</option>
    <option value="fileo">フィレオフィッシュ</option>
    <option value="teriyaki">てりやきバーガー</option>
    <option value="bacon">ベーコンレタスバーガー</option>
  </select>
</body>
参考文献:W3C HTML5「4.10.9 The select element」外部リンク
HOME