<select> 要素
は、一連の項目の中から選択するためのコントロール(メニューまたはリストボックス)を表します。各項目は、<option> 要素
がひとつの選択肢を表します。
- カテゴリー
- フロー・コンテンツ、パルパブル・コンテンツ、フレージング・コンテンツ、インタラクティブ・コンテンツ
- 配置場所
- フレージング・コンテンツが置ける場所。
- 内容
- 0個以上の
<option> 要素
、<optgroup> 要素
、またはスクリプトサポート・エレメント。 - 属性
-
autofocus[="autofocus"]
HTML5で追加- ページがロードされると自動的にフォーカスされます。
disabled[="disabled"]
- 指定することでコントロール無効の使用不可の状態にします。
form="ID"
HTML5で追加- 関連付ける
<form> 要素
のid 属性
を指定します。この属性でフォームを指定することで、<form> 要素
に含まれていなくてもフォームの部品として機能させることができます。 multiple[="multiple"]
- 指定することで、複数の項目を選択できるようになります。
name="パラメータ名"
- フォーム送信とform.elements APIに使用されるこのメニューの名前を指定します。
required[="required"]
HTML5で追加- 指定することで、項目の選択を必須にすることができます。
size="表示行数"
- 表示させる項目の数を0より大きい数値で指定します。2以上を指定した場合、一般的にはメニューではなくリストボックスとして表示されます。デフォルトでは1、
multiple 属性
が指定されている場合は4です。 - グローバル属性
accesskey
,autocapitalize
,autofocus
,class
,contenteditable
,data-*
,dir
,draggable
,enterkeyhint
,hidden
,id
,inputmode
,is
,itemid
,itemprop
,itemref
,itemscope
,itemtype
,lang
,nonce
,spellcheck
,style
,tabindex
,title
,translate
サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>HTML5 › select</title>
</head>
<body>
<h1>HTML5 › select</h1>
<form method="post">
<p>自分について該当すると思うものをを全て選択して下さい。</p>
<select multiple>
<option value="しょうゆ顔">しょうゆ顔</option>
<option value="服はナウい方">服はナウい方</option>
<option value="ボンタンよりドカン派">ボンタンよりドカン派</option>
<option value="タイマンはったらダチ">タイマンはったらダチ</option>
</select>
<input type="submit" value="送信">
</form>
</body>
</html>