HTML5

：

タグ（要素）

：

SELECT

　編集：2022.06.28 by T.A.

→● mdn

リストボックスを表す。

この要素を使用できる文脈

フレージング内容が期待される場所。

内容モデル

0 個以上の OPTION、OPTGROUP 要素、およびスクリプトサポート要素。

text/htmlにおけるタグ省略

どちらのタグも省略不可。

内容属性

autocomplete ─ フォームオートフィル機能に対するヒント
disabled ─ フォーム制御が無効であるかどうか
form ─ FORM 要素とこの要素を関連付ける
multiple ─ 複数の値を許可するかどうか
name ─ フォーム送信および form.elements API で使用する要素の名前
required ─ 制御がフォーム送信に要求されるかどうか
size ─ 制御のサイズ

例

オプションの集合からユーザーが 1 つのオプションを選択できる SELECT 要素が使用される様子を次に示す。デフォルトのオプションはあらかじめ選択されている。

<P>
 <LABEL for="unittype">Select unit type:</LABEL>
 <SELECT id="unittype" name="unittype">
  <OPTION value="1"> Miner </OPTION>
  <OPTION value="2"> Puffer </OPTION>
  <OPTION value="3" selected> Snipey </OPTION>
  <OPTION value="4"> Max </OPTION>
  <OPTION value="5"> Firebot </OPTION>
 </SELECT>
</P>

autocomplete属性

フォームオートフィル機能に対するヒント。

ユーザーエージェントへのヒントの手段に、または実際にそのような機能を提供するかどうかに使用できる。

<FORM name=NautocompleteForm action="○○.cgi" method=post style="border:1px solid black;" target=Test>
 <SELECT>
  <OPTION>OPTION1
  <OPTION>OPTION2
  <OPTION>OPTION3
 </SELECT><BR>
 <SELECT autocomplete name=NSelect>
  <OPTION>OPTION1
  <OPTION>OPTION2
  <OPTION>OPTION3
 </SELECT><BR>
 <BUTTON type=submit>送信</BUTTON>
</FORM>

disabled属性

フォーム制御が無効であるかどうか。真偽属性。

<SELECT>
 <OPTION>OPTION1
 <OPTION>OPTION2
 <OPTION>OPTION3
</SELECT><BR>
<SELECT disabled name=NSelect>
 <OPTION>OPTION1
 <OPTION>OPTION2
 <OPTION>OPTION3
</SELECT><BR>

multiple属性

複数の値を許可するかどうか。真偽属性。

属性が存在する場合、SELECT 要素は、オプションのリストから 0 個以上のオプションを選択するための制御を表す。

属性が存在しない場合、SELECT 要素は、オプションのリストから 1 つのオプションを選択するための制御を表す。

<SELECT multiple>
 <OPTION>OPTION1
 <OPTION>OPTION2
 <OPTION>OPTION3
</SELECT><BR>

name属性

フォーム送信および form.elements API で使用する要素の名前。

フォームの送信や FORM 要素の elements オブジェクトで使用されるような、フォームコントロールの名前を与える。属性が指定される場合、その値は空の文字列またはで isindex あってはならない。

isindex 以外で、name に対して任意の空でない値が許可される。ASCII 大文字・小文字不区別で一致する名前 _charset_ は特別である： value 属性のない Hidden コントロールの名前として使用される場合、送信の間 value 属性は送信文字エンコーディングから成る送信の間の値を自動的に与えられる。

<FORM action="○○.cgi" method=post style="border:1px solid black;" target=Test>
 <SELECT name=NnameSelect>
  <OPTION>OPTION1
  <OPTION>OPTION2
  <OPTION>OPTION3
 </SELECT><BR>
 <BUTTON type=submit>送信</BUTTON>
</FORM>

¶送信すると、サーバーCGIにはデータ「NnameSelect=OPTION1」とかが送られる？

required属性

制御がフォーム送信に要求されるかどうか。真偽属性。

指定される場合、ユーザーがフォームを送信する前に値を選択する必要がある。

SELECT 要素が required 属性を指定され、multiple 属性を指定されず、1 である表示サイズを持つ場合、および（もしあれば）SELECT 要素のオプションのリストで最初の OPTION 要素の値が空文字列であり、その OPTION 要素の親ノードが SELECT 要素（かつ OPTGROUP 要素でない）場合、その OPTION は、SELECT 要素のプレースホルダーのラベルオプションである。

SELECT 要素が required 属性を指定され、multiple 属性を指定されず、1 である表示サイズを持つ場合、その SELECT 要素は、プレースホルダーのラベルオプションを持たなければならない。

以下のCSSが組み込んであります：

<SELECT class=Test>
 <OPTION>OPTION1
 <OPTION>OPTION2
 <OPTION>OPTION3
</SELECT><BR>
<SELECT class=Test required>
 <OPTION>OPTION1
 <OPTION>OPTION2
 <OPTION>OPTION3
</SELECT><BR>

size属性

ユーザーに表示するためのオプションの数を与える。size 属性が指定される場合、0 より大きい妥当な負でない整数である値を持たなければならない。

<SELECT size=2>
 <OPTION>OPTION1
 <OPTION>OPTION2
 <OPTION>OPTION3
</SELECT><BR>
<SELECT size=4>
 <OPTION>OPTION1
 <OPTION>OPTION2
 <OPTION>OPTION3
</SELECT><BR>