<select> - フォーム部品：セレクト

目次

概要

形式
<select>～</select>/dd>
サポート
https://caniuse.com/mdn-html_elements_select
カテゴリ
フローコンテンツ
フレージングコンテンツ
インタラクティブコンテンツ
リステッド, ラベラブル, サブミッタブル, リセッタブル, リアソシエイタブル(HTML 5.2) フォーム関連要素
パルパブルコンテンツ
親要素
フレージングコンテンツ を子要素に持てるもの
子要素
1つ以上の option, optgroup または スクリプトサポート要素
タグの省略
開始タグ:必須 / 終了タグ:必須
属性
グローバル属性
autocomplere
disabled
form
multiple
name
required
size

説明

<select> は、<form> で作成されるフォーム内の選択部品(セレクトボックス)を表示します。それぞれの選択肢を記述するには <option> を用います。

属性

重要属性

グローバル属性
詳細は グローバル属性 を参照してください。
name=name
LS/H5
名前を指定します。

固有属性

autocomplete
LS
オートコンプリートを使用するか否かを on または off で指定します。
disabled
LS/H4/e4/Ch/Fx/Sa/Op/N6
この部品を無効にし、入力できない状態にします。
form=id
LS/H5
関連付けたい form要素のidを指定します。
multiple
LS/H2/e2/Ch/Fx/Sa/Op/N2/i2
複数行選択を可能にします。Windows の場合は、Ctrl キーや Shift キーを押しながらマウスでクリックすることで複数選択が可能になります。
required
LS/H5/e/Ch/Fx/Op
この情報が必須であることを示します。
size=n
LS/H2/e2/Ch/Fx/Sa/Op/N2/i1
画面に一度に表示する選択肢の行数を指定します。通常は 1 です。
align=align
[非推奨] e4
表示位置を指定します。
autofocus
LS/H5/e/Ch/Sa/Op
自動的にフォーカスを合わせます。初期の HTML Living Standard では <select> 等の属性として定義されていましたが、どの要素でも使用できるよう、グローバル属性 に移動しました。

データバインド関連

datafld=datafld
[非推奨] e4
データバインド機能を用いる際の、データソースの列名を指定します。
datasrc=datasrc
[非推奨] e4
データバインド機能を用いる際の、データソースの ID を指定します。

使用例

HTML
<form method="POST" action="xxx.cgi">
  <select name="OS">
    <option value="Win">Windows</option>
    <option value="Mac">MacOS</option>
    <option value="Lin">Linux</option>
    <option value="OTHER">その他</option>
  </select>
  <input type="submit" value="OK">
</form>
表示

表示桁数(size)

size 属性を指定すると、選択肢を表示する行数を指定できます。

HTML
<form method="POST" action="xxx.cgi">
  <select name="browser" size=5>
    <option value="Ch">Chrome</option>
    <option value="Fx">Firefox</option>
    <option value="Op">Opera</option>
    <option value="Sa">Safari</option>
    <option value="IE8">Internet Explorer 8</option>
    <option value="IE9">Internet Explorer 9</option>
    <option value="IE10">Internet Explorer 10</option>
    <option value="IE11">Internet Explorer 11</option>
  </select>
  <input type="submit" value="OK">
</form>
表示

複数選択(miltiple)

multiple 属性を指定すると、Ctrl や Shift キーを押しながら選択することで、複数項目の選択を可能とします。複数選択した場合、サーバには、名前=値 が複数送信されます。

HTML
<form method="POST" action="xxx.cgi">
  <select name="browser" size=5 multiple>
    <option value="Ch">Chrome</option>
    <option value="Fx">Firefox</option>
    <option value="Op">Opera</option>
    <option value="Sa">Safari</option>
    <option value="IE">Internet Explorer</option>
  </select>
  <input type="submit" value="OK">
</form>
表示
Copyright (C) 1996-2022 杜甫々
初版:1996年9月10日 最終更新:2022年2月6日
https://www.tohoho-web.com/html/select.htm