選択メニューを定義するselect要素
<select>……</select>

 select要素は「option selector」の略で、フォームのコントロールの1つとして選択メニューを生成します。通常は都道府県など、決まった項目を入力する際に、ユーザーの手間を省くためテキスト入力欄ではなく選択式のメニューを使用します。

 また、通常は選択メニューのなかで1つしか選択できませんが、multiple属性によって複数の項目を選択できるようになり、用途の幅が広がります。

<html>
<head>
<title>select要素のサンプル</title>
</head>
<body>
<div>
<form action="example.cgi" method="post">
<p>
<select>
<option>赤</option>
<option>青</option>
<option>黄</option>
</select>
</p>
<p><input type="submit" value="送信" /></p>
</form>
</div>
</body>
</html>

DOMでの参照方法

[window.]document.formName.selectName
[window.]document.forms[i].elements[j]
[window.]document.getElementById("【ID属性値名】")

オプション属性

属性 機能 入力例 DOM参照
disabled "disabled" 選択メニュー
の操作を禁止
※データも
送信されない
<select disabled="disabled">……</select> [window.]document.formName.selectName.disabled
[window.]document.forms[i].elements[j].disabled
[window.]document.getElementById("【ID属性値名】").disabled
multiple "multiple" 選択メニューの
中から複数
の項目を
選択可能に
<select multiple="multiple" size="4">……</select> [window.]document.formName.selectName.multiple
[window.]document.forms[i].elements[j].multiple
[window.]document.getElementById("【ID属性値名】").multiple
[window.]document.formName.selectName.type
[window.]document.forms[i].elements[j].type
[window.]document.getElementById("【ID属性値名】").type
name 文字列 どの項目に対する
回答なのかが
分かるように
選択メニューに
名前を付ける
<select name="sample">……</select> [window.]document.formName.selectName.name
[window.]document.forms[i].elements[j].name
[window.]document.getElementById("【ID属性値名】").name
size 整数 選択メニューリスト
の行数を指定
<select size="4">……</select> [window.]document.formName.selectName.size
[window.]document.forms[i].elements[j].size
[window.]document.getElementById("【ID属性値名】").size

追加が可能なイベントハンドラ属性

onclick、ondblclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onkeypress、onkeydown、onkeyup

有限会社タグパンダ
喜安 亮介

6/10

 INDEX
Web標準HTMLタグリファレンス(最終回)
フォームや入力部品を表す9つの正しいXHTMLタグ
フォーム
  form フォームを定義するform要素
  label ラベルを定義するlabel要素
  input 入力部品を定義するinput要素
  textarea 複数行のテキスト入力欄を定義するtextarea要素
select 選択メニューを定義するselect要素
  optgroup 選択メニューの項目のグループを定義するoptgroup要素
  option 選択可能な項目を定義するoption要素
  fieldset テーマとして関連があるラベルとコントロールをグループ化するfieldset要素
  legend fieldset要素に対する説明文や表題を定義するlegend要素



HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

注目のテーマ

デザインハック 記事ランキング

本日 月間