最終更新日 2021年4月7日

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コンテンツを子にできる要素	option、optgroup

属性	値	説明
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」

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。