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>