フォーム - プルダウンメニュー
select
プルダウンメニュー
2008/3/26
構文
<select> ～ </select>
説明
select要素は、プルダウンメニューを示すインライン要素です。
select要素内には、optgroup要素またはoption要素が1回以上出現する必要があります。
単一選択型（select-one）と複数選択型（select-multiple）の2タイプがあります。 デフォルトは、単一選択ですが、multiple属性を指定することで複数選択型になります。 multiple属性を指定した場合、複数選択しやすいようにsize属性に2以上の数値を指定するようにしてください。
属性
| 属性="値" | 説明 | サポート状況 | 必須・任意 | 代替 | |
|---|---|---|---|---|---|
| XHTML 1.0 | XHTML 1.1 | ||||
| 一般属性 | - | STF | S | 任意 | style属性はCSSで代替。 |
| name="%CDATA" | プルダウンメニューの名前を指定 | S | 任意 | ||
| size="%Number | プルダウンメニューの行数を指定。 | S | 任意 | ||
| multiple="multiple" | プルダウンメニューの選択肢を複数選択できるようにするかの有無。 | S | 任意 | ||
| disabled="disabled" | 入力要素の無効化の有無を指定。デフォルトは有効。 | S | 任意 | ||
| tabindex="%Number | タブインデックスを指定。 | S | 任意 | ||
| onfocus="%Script" | フォーカスが当たった時に実行する処理を指定。 | S | 任意 | ||
| onblur="%Script" | フォーカスが外れた時に実行する処理を指定。 | S | 任意 | ||
| onchange="%Script" | 選択肢が変更された時に実行する処理を指定。 | S | 任意 | ||
サンプル
単一選択型プルダウンメニュー
<form action="#"> <label for="myjob">あなたの職業は？</label> <select id="myjob" name="myjob"> <option value="" selected="selected">▼ひとつ選択してください</option> <option value="government-employee">公務員</option> <option value="manager">経営者・役員</option> <option value="company-employee">会社員</option> <option value="self-employed">自営業</option> <option value="free-lance">自由業</option> <option value="housewife">専業主婦</option> <option value="part-time">パート・アルバイト</option> <option value="student">学生</option> <option value="other">その他</option> </select> </form>
複数選択型プルダウンメニュー
<form action="#"> <label for="myspot">よく遊びに行く街は？（複数選択可）</label><br> <select id="myspot" name="myspot" multiple="multiple"> <option value="shimokitazawa" selected="selected">下北沢</option> <option value="omotesando">表参道</option> <option value="roppongi">六本木</option> <option value="shibuya">渋谷</option> <option value="ebisu">恵比寿</option> <option value="azabu" selected="selected">麻布</option> <option value="shinjyuku">新宿</option> <option value="other">その他</option> </select> </form>
option
プルダウンメニューの選択肢をグループ化
2008/3/26
構文
<optgroup label=”ラベル名”> ～ </optgroup>
説明
option要素は、select要素の「選択肢」を表すインライン要素です。
option要素は、select要素内に記述します。
option要素をグループ化する場合は、optgroup要素を使用します。
属性
optgroup
プルダウンメニューの選択肢をグループ化
2008/3/26
構文
<option> ～ </option>
説明
optgroup要素は、プルダウンメニューの選択肢をグループ化するインライン要素です。
optgroup要素は、select要素内に記述します。
optgroup要素内には、option要素が1回以上出現する必要があります。
選択肢が多い場合、optgroup要素を使用して、カテゴリ毎にグループ化することで、ユーザーが選択しやすくなります。
optgroup要素のlabel属性（必須）には、グループの名前を指定します。
label属性に指定した値は、一般的なブラウザで太字＋斜体で表示されます。
属性
| 属性="値" | 説明 | サポート状況 | 必須・任意 | 代替 | |
|---|---|---|---|---|---|
| XHTML 1.0 | XHTML 1.1 | ||||
| 一般属性 | - | STF | S | 任意 | style属性はCSSで代替。 |
| disabled="disabled" | 入力要素の無効化の有無を指定。デフォルトは有効。 | S | 任意 | ||
| label="%Text" | 選択肢のグループの名前を指定。 | S | 必須 | ||
サンプル
<form action="#"> <dl> <dt><label for="myenv">あなたのPC環境は？</label></dt> <dd> <select id="myenv" name="myenv"> <option value="" selected="selected">▼ひとつ選択してください</option> <optgroup label="Windows"> <option value="windows95">Windows 95</option> <option value="windows98">Windows 98</option> <option value="windows98SE">Windows 98 Secound Edition</option> <option value="windowsNT">Windows NT</option> <option value="windowsME">Windows ME</option> <option value="windows2000">Windows 2000</option> <option value="windowsXP">Windows XP</option> <option value="windowsVista">Windows Vista</option> </optgroup> <optgroup label="Macintosh"> <option value="puma">Mac OS 10.0 (Puma)</option> <option value="cheetah">Mac OS X 10.1 (Cheetah)</option> <option value="jagar">Mac OS X 10.2 (Jaguar)</option> <option value="panther">Mac OS X 10.3 Panther</option> <option value="tiger">Mac OS X 10.4 Tiger</option> <option value="leopard">Mac OS X 10.5 Leopard</option> <option value="mac_other">それ以外のMac OS</option> </optgroup> <option value="other">その他</option> </select> </dd> </dl> </form>