select要素
Updated / Published
select
要素(option selector)はフォームのコントロール部品の1つとして選択メニューを作ります。選択項目(選択肢)は option
要素で作成し、option
要素1つの定義が1つの選択肢となります。さらに複数の選択肢を optgroup
要素でグループ化することもできます。通常は、選択メニューの中で1つの選択肢しか選択できませんが、multiple
属性を加えることで複数選択が可能になります。
- バージョン
- HTML4.01(S,T,F)
- XHTML1.0(S,T,F)
- XHTML1.1
- 要素型
- インライン要素
- 開始タグ
- 必須
- 終了タグ
- 必須
- 非推奨
- -
- 内容モデル
- 1個以上の option要素, optgroup要素
disabled属性
- バージョン
- HTML4.01(S,T,F)
- XHTML1.0(S,T,F)
- XHTML1.1
- 指定要素
- 必須
- -
- 非推奨
- -
- 属性値
- disabled
- disabled="disabled"(XHTML)
ユーザによる選択メニューの操作を禁止します。選択が禁止されたコントロール部品の値(この場合は option
要素の value
属性の値)は選択できないため、データ送信時にも送信されません。HTML4.01 では disabled
、XHTML では属性値を省略できないため disabled="disabled"
と記述します。
multiple属性
- バージョン
- HTML4.01(S,T,F)
- XHTML1.0(S,T,F)
- XHTML1.1
- 指定要素
- select
- 必須
- -
- 非推奨
- -
- 属性値
- multiple
- multiple="multiple"(XHTML)
選択肢の中から複数項目を選択することを可能にします。送信されるデータは、選択した内容がカンマ (,) 区切りで送信されます。この属性が無い場合は、select
要素1つに対して1つの選択肢しか選択できません。HTML4.01 では multiple
、XHTML では属性値を省略できないため multiple="multiple"
と記述します。
複数選択の操作方法はOSやUAになって異なり、Windows では Ctrl を、Mac では Cmd を押下状態で、さらにポインティングデバイス(マウスやノートパソコン付属のトラックパッドなど)の左ボタンを押下、または UA に設定されているフォームのコントロールの選択キー(例 Window版Firefox : Space)を押下することでフィールド上の複数選択が可能になります。
name属性
- バージョン
- HTML4.01(S,T,F)
- XHTML1.0(S,T,F)
- XHTML1.1
- 指定要素
- select
- 必須
- -
- 非推奨
- -
- 属性値
- 文字列
フォームのコントロール部品である選択メニューに名前を指定します。データ送信時にユーザがどの選択肢を選んだかは、この select
要素の name
属性の値と option
要素の value
属性の値がセットになって送信されます。どの項目に対する回答なのかがわかるように name
属性の値で質問の内容を示しておきます。name
属性の値は半角アルファベットの大文字・小文字が区別されません(case-insensitive)。
size属性
- バージョン
- HTML4.01(S,T,F)
- XHTML1.0(S,T,F)
- XHTML1.1
- 指定要素
- select
- 必須
- -
- 非推奨
- -
- 属性値
- 整数
選択メニューリストの高さ(行数)を指定します。size
属性の指定がない場合は、プルダウン式のメニューで表示され、値を "2
"以上に指定すると項目一覧がスクロール機能つきのリストで表示されます。つまり、スクロールせずに一度に表示できる選択肢の項目数を指定します。
その他の属性
select要素のサンプル
<select name="kt" size="9" multiple="multiple">
<option value="" selected="selected">--指定しない--</option>
<option value="01_01">Web制作:アシスタント</option>
<option value="01_02">Web制作:デザイナー</option>
<option value="01_03">Web制作:コーダー</option>
<option value="01_04">Web制作:プログラマー</option>
<option value="01_05">Web制作:ディレクター</option>
<option value="01_06">Web制作:プロデューサー</option>
</select>