select要素 フォームの選択部品 (option selector)

 
インライン要素
ホーム > HTML Note > select要素
H2- ie1- N1-

説明

<select>-</select> 開始タグ:必須 終了タグ:必須
select要素は、メニューを作成する要素です。メニュー内の各選択項目はoption要素によって指定します。表示形式は各ブラウザに依存しますが、一般的にはプルダウンメニューで表示され、size属性に2以上が指定された際はリストボックスとして表示されます。

通常ユーザーは1つのオプションを選択します。select要素のname属性と選択されたoption要素のvalue属性は「名前/値」のペアとしてフォームとともにサーバーに送信されます。複数選択時はアンパサンド[&]で区切られたデータが送信されます。

HTMLの定義やIEでの実装では、<select>を<form>-</form>で囲まなくても良いのですが、N4まででは<form>-</form>で囲まないと<select>が無視されてしまうので注意が必要です。
 

属性 (W3C)

<selectH2- ie1- N1-
一般属性 id class style title lang dir %events;
name="名前" H2- ie1- N1-
送信される部品名
size="数字" H2- ie1- N1-
高さ
行数で指定 (初期値1)。
multiple H2- ie1- N1-
複数選択可
disabled H4- ie4- N6-
無効化
スクリプトとの併用が必要です。
tabindex="数字" H4- ie4- N6-
タブインデックス [0-32767]
([tab]キーを押したときに切り替わるフォーカスの順序を指定)
onfocus="スクリプト" H4- ie3- N2-
選択時
onblur="スクリプト" H4- ie3- N2-
選択解除時
onchange="スクリプト" H4- ie3- N2-
内容変更時
datasrc="URI" H4 ie4-
未調査
datafld="CDATA" H4 ie4-
未調査
dataformatas=
"(plaintext|html)"
H4 ie4-
未調査
>(optgroup|option)+</select>

ブラウザ独自の属性 (ie N)

accesskey="文字" ie4-
アクセスキー
(Win[Alt]+[文字]、Mac[ctrl]+[文字]でフォーカス)
align="位置" ie4-
文字との位置関係
top部品上部と文字一行を揃えて表示
middle部品中央と文字一行を揃えて表示
bottom部品下部と文字一行を揃えて表示 (初期値)
left左に部品を浮動、右に文字を回り込み表示
right右に部品を浮動、左に文字を回り込み表示
sdaform="" H2
未調査
sdapref="" H2
未調査
width="" N4
未調査

使用例



<form action="cgi-bin/act.cgi">
<select name="OS">
  <option value="win">Windows</option>
  <option value="mac">Macintosh</option>
  <option value="unix">UNIX</option>
  <option value="linax">Linax</option>
  <option value="other">その他</option>
</select><br>
<select size="3" name="BROWSER">
  <option value="IE6">Internet Explorer 6.X</option>
  <option value="IE5">Internet Explorer 5.X</option>
  <option value="IE4">Internet Explorer 4.X</option>
  <option value="IE3">Internet Explorer 3.X</option>
  <option value="N7">Netscape 7.X</option>
  <option value="N6">Netscape 6.X</option>
  <option value="N4">Netscape Communicator 4.X</option>
  <option value="N3">Netscape Navigator 3.X</option>
  <option value="other">その他</option>
</select><br>
<input type="submit" value="送信">
<input type="reset" value="リセット">
</form>
これはサンプルなので、送信ボタンのtype属性にbuttonを指定し無効化しています。
 
関連要素: form > label>input | select>optgroup|option| textarea | fieldset>legend | button
トップページ HTML Note ページトップ
 2003/07/11発行 2008/01/01更新