仕様

SELECT要素は、
一連のオプションから
選択するための
コントロールを
表します。

select一連のオプションから選択するためのコントロール (option Selector)
カテゴリ
  • フレージングコンテンツ
  • フローコンテンツ
  • インタラクティブコンテンツ
  • パルパブルコンテンツ
  • リストされた要素
  • 送信可能な要素
  • リセット可能な要素
  • ラベル付け可能な要素
  • 自動大文字化継承要素
  • フォーム関連要素
種類通常要素
この要素を
使用できる
状態		フレージングコンテンツを受け入れる要素。
許可されて
いる内容		0個以上の option要素, optgroup要素, およびスクリプトをサポートする要素。
属性グローバル属性,
form
フォーム要素に関連付け
name
要素の名前
disabled
利用できない
autocomplete
自動補完機能
required
フォーム送信にコントロールが必要かどうか
size
表示するオプションの数
multiple
複数の値を指定できるか
text / html
での
タグの省略		省略できません。
許可されて
いるARIA		size属性の値が１より大きいか multiple属性が存在する場合は、なし[既定値 : listbox]
それ以外の場合は、menu [既定値 : combobox]
DOM
インター
フェイス
HTMLSelectElement
  1. [Exposed=Window]
  2. interface HTMLSelectElement : HTMLElement {
  3. [HTMLConstructor] constructor();
  4.  
  5. [CEReactions] attribute DOMString autocomplete;
  6. [CEReactions] attribute boolean disabled;
  7. readonly attribute HTMLFormElement? form;
  8. [CEReactions] attribute boolean multiple;
  9. [CEReactions] attribute DOMString name;
  10. [CEReactions] attribute boolean required;
  11. [CEReactions] attribute unsigned long size;
  12.  
  13. readonly attribute DOMString type;
  14.  
  15. [SameObject] readonly attribute HTMLOptionsCollection options;
  16. [CEReactions] attribute unsigned long length;
  17. getter Element? item(unsigned long index);
  18. HTMLOptionElement? namedItem(DOMString name);
  19. [CEReactions] undefined add((HTMLOptionElement or HTMLOptGroupElement) element, optional (HTMLElement or long)? before = null);
  20. [CEReactions] undefined remove(); // ChildNode overload
  21. [CEReactions] undefined remove(long index);
  22. [CEReactions] setter undefined (unsigned long index, HTMLOptionElement? option);
  23.  
  24. [SameObject] readonly attribute HTMLCollection selectedOptions;
  25. attribute long selectedIndex;
  26. attribute DOMString value;
  27.  
  28. readonly attribute boolean willValidate;
  29. readonly attribute ValidityState validity;
  30. readonly attribute DOMString validationMessage;
  31. boolean checkValidity();
  32. boolean reportValidity();
  33. undefined setCustomValidity(DOMString error);
  34.  
  35. readonly attribute NodeList labels;
  36. };
レンダリング
フォーム
  1. select {
  2. letter-spacing: initial;
  3. word-spacing: initial;
  4. line-height: initial;
  5. text-transform: initial;
  6. text-indent: initial;
  7. text-shadow: initial;
  8. text-align: initial;
  9. box-sizing: border-box;
  10. }

initial は、プロパティの初期値 (または既定値) を設定する指定なので、 letter-spacing: normal; word-spacing: normal; line-height: normal; text-transform: none; text-indent: 0; text-shadow: none; text-align: start; と置き換えて読んで頂くと判り易いかと思います。

CSS を大雑把に読むと、 テキストの字間のスペースは通常の字間です。 タグや単語の間隔は普通です。 行ボックスの高さはユーザーエージェントに依存します。 テキストを大文字表記に変換しません。 字下げは 0 です。 テキストに影を追加しません。 水平方向の配置をインラインコンテンツは行ボックスの左辺に寄せられます。 width および height プロパティには、コンテンツ、パディング、境界線の領域が含まれますが、マージンは含まれません。 などになります。

参加
コンテキスト		インラインフォーマットコンテキスト
確立
コンテキスト		インラインフォーマットコンテキスト
select要素は、一連のオプションから選択するためのコントロールを表します。

select要素のオプションのリストは、select要素のすべての option要素の子と、select要素のすべての optgroup要素の子のすべての option要素の子から構成されています。

  1. <form action="./fmreceive.htm">
  2. <select name="nseSelect">
  3. <option>abc123</option>
  4. <option>def456</option>
  5. </select>
  6. <button name="nbtSender" value="./fmselect.htm">ボタン</button>
  7. <br>受信用の<br>ページへ
  8. </form>

受信用の
ページへ
参照元
  1. HTML Living Standard. 4.10.7 The select element
  2. HTML Living Standard. 15 Rendering 15.3.10 Form controls
  3. HTML 5.2 W3C 勧告. 4.10.7 The select element
  4. HTML 4.01 Specification W3C 勧告. 17.6 The SELECT, OPTGROUP, and OPTION elements
  5. MDN Web Docs. HTML <select>:

使用可能な箇所

フレージングコンテンツを
受け入れる要素に
配置できます。

select要素は、フレージングコンテンツを受け入れる要素に配置できます。
フレージングコンテンツは、フローコンテンツのタイプの１つです。フローコンテンツを受け入れる要素でも配置できます。

インタラクティブコンテンツでもあるので、インタラクティブコンテンツを受け付けない要素には配置できません。

ラベル付け可能な要素なので、他にラベル付け可能な要素がある label要素には配置できません。

フォーム関連要素ですが form属性で要素を form要素に関連付ける事ができるので、form要素の子孫に配置する必然はありません。 form要素の子孫でもなく、form属性での関連付けもない記述は、用途としては不適切です。 (このサイトでの例示では、送信等の安全の為に意図的に form要素とフォーム関連要素との関連付けを避けている箇所もあります。)

  1. <pre>
  2. <select>
  3. <option>abc123</option>
  4. <option>def456</option>
  5. </select>
  6. </pre>

フレージングコンテンツを配置できる p要素のコンテンツの一部として、select要素を配置できます。

配置できるコンテンツ

option要素,
optgroup要素を
配置できます。

select要素は、0個以上の option要素, optgroup要素, およびスクリプトをサポートする要素を配置できます。

  1. <select>
  2. <option>abc123</option>
  3. <option selected>def456</option>
  4. </select>

select要素には、0個以上の option要素, optgroup要素, およびスクリプトをサポートする要素を配置できます。option要素に selected属性を設定する事で初期状態の選択を指定できます。

属性

form属性

  1. <select form="ifmForm" name="nseSelect">
  2. <option>abc123</option>
  3. <option>def456</option>
  4. </select>
  5. <form id="ifmForm" action="./fmreceive.htm">
  6. <button name="nbtSender" value="./fmselect.htm">ボタン</button>
  7. <br>受信用の<br>ページへ
  8. </form>

form属性は、form要素の id属性値を設定します。要素を form要素に関連付けます。省略したときは、最も近い祖先の form要素に関連付けられます。


受信用の
ページへ

name属性

  1. <form action="./fmreceive.htm">
  2. <select name="nseSelect">
  3. <option>abc123</option>
  4. <option>def456</option>
  5. </select>
  6. <select>
  7. <option>def123</option>
  8. <option>abc456</option>
  9. </select>
  10. <button name="nbtSender" value="./fmselect.htm">ボタン</button>
  11. <br>受信用の<br>ページへ
  12. </form>

name属性は、要素の名前を指定します。フォームの送信とform.elements APIで使用する要素の名前です。


受信用の
ページへ

disabled属性

  1. <form action="./fmreceive.htm">
  2. <select name="nseSelect" disabled>
  3. <option>abc123</option>
  4. <option>def456</option>
  5. </select>
  6. <button name="nbtSender" value="./fmselect.htm">ボタン</button>
  7. <br>受信用の<br>ページへ
  8. </form>

disabled属性は、ユーザーがそのコントロールを利用できないことを示す論理属性です。変更できないだけでなく、送信もできません。


受信用の
ページへ

autocomplete属性

  1. <form action="./fmreceive.htm">
  2. <select name="nseSelect" autocomplete="on">
  3. <option>abc123</option>
  4. <option>def456</option>
  5. </select>
  6. <button name="nbtSender" value="./fmselect.htm">ボタン</button>
  7. <br>受信用の<br>ページへ
  8. </form>

autocomplete属性は、入力欄が提供する自動補完機能の種類を示します。 関連付けられた form要素の autocomplete属性によって既定値が指定されます。form要素の autocomplete属性それ自体の既定値は on です。 on はブラウザーはユーザーが以前入力した値を元に、値の自動補完を行うことができます。


受信用の
ページへ

required属性

  1. <form action="./fmreceive.htm">
  2. <select name="nseSelect" required>
  3. <option label="label"></option>
  4. <option>abc123</option>
  5. <option>def456</option>
  6. </select>
  7. <button name="nbtSender" value="./fmselect.htm">ボタン</button>
  8. <br>受信用の<br>ページへ
  9. </form>

required属性は、ユーザーはフォームを送信する前に値を入力する必要があることを示す論理属性です。
select要素に required属性が指定されていて、multiple属性が指定されておらず、表示サイズが1の場合、select要素にはプレースホルダーラベルオプションが必要です。


受信用の
ページへ

size属性

  1. <form action="./fmreceive.htm">
  2. <select name="nseSelect" size="2">
  3. <option>abc123</option>
  4. <option>def456</option>
  5. <option>ghi789</option>
  6. </select>
  7. <button name="nbtSender" value="./fmselect.htm">ボタン</button>
  8. <br>受信用の<br>ページへ
  9. </form>

size属性は、ユーザーに表示するオプションの数を指定します。size属性は、指定する場合、ゼロより大きい有効な非負の整数である値を持つ必要があります。


受信用の
ページへ

multiple属性

  1. <form action="./fmreceive.htm">
  2. <select name="nseSelect" multiple>
  3. <option>abc123</option>
  4. <option>def456</option>
  5. </select>
  6. <button name="nbtSender" value="./fmselect.htm">ボタン</button>
  7. <br>受信用の<br>ページへ
  8. </form>

multiple属性は、ユーザーが複数の値を指定できるかどうかを示す論理属性です。


受信用の
ページへ

気を付ける点

フォーム関連要素

フォーム関連要素であり送信が関わりますが、それぞれの処理のタイミングには注意が必要です。

multiple

multiple属性が指定されて複数の値が選択された時は、１項目に複数の値が付くのではなく同じ項目名で複数の項目が送信されます。 JavaScriptで連想配列で処理すると名称が同じデータが複数存在するという事で上書きされてしまうので考慮が必要です。

  1. <form action="./fmreceive.htm">
  2. <select name="nseSelect" multiple>
  3. <option selected>abc123</option>
  4. <option selected>def456</option>
  5. </select>
  6. <button name="nbtSender" value="./fmselect.htm">ボタン</button>
  7. <br>受信用の<br>ページへ
  8. </form>


受信用の
ページへ

CSSリセット

  1. select {
  2. font-family: inherit;
  3. font-size: 100%;
  4. line-height: 1.15;
  5. margin: 0;
  6. text-transform: none;
  7. }

normalize.css というリセットCSS の一部で、すべてのブラウザでフォントスタイルを変更します。 FirefoxおよびSafariでマージンを削除します。 Firefoxのテキスト変換の継承を削除します。
詳細は理解していないのですが、いろいろとバグ等の対応も含んでいる様なので、利用する事をお勧めします。