“select”要素:選択式の入力欄｜HTML－havin' a coffee break

＃

要素について

カテゴリー	フロー・コンテンツ、フレージング・コンテンツ、インタラクティブ・コンテンツ、フォーム関連要素(リスト化要素、ラベル付け可能要素、送信可能要素、リセット可能要素、自動大文字化継承要素)、パルパブル・コンテンツ
利用場所	フレージング・コンテンツが置ける場所
内容	0個以上の“option”要素、“optgroup”要素、スクリプト支援要素
タグの省略	不可

“select”要素は選択式の入力欄を表す要素です。多くの場合フォームの入力欄として使用されます。

“select”要素は“multiple”属性と値が“2”以上の“size”属性がどちらも指定されていない場合は1行の入力欄として表示され、クリックするとプルダウン形式の入力候補のリストが表示されます。

“select”要素は“multiple”属性もしくは値が“2”以上の“size”属性を指定されているとスクロール形式のリストボックスとして表示されます。

一つ一つの入力候補は子要素となる“option”要素で表されます。入力候補は“optgroup”要素でグループ化することができます。

“select”要素は多くの場合“form”要素の中に配置されますが、“form”属性を指定することで“form”要素の外に配置することもできます。

“type”属性の値が“radio”、“checkbox”である“input”要素でも選択式の入力欄を表すことができます。

サンプルコード

プルダウン形式の入力欄

スクロール形式の入力欄

＃

属性と値

属性		値
属性	説明	値	説明
必須属性
なし
任意属性
グローバル属性
autocomplete=""	ブラウザーによるオートコンプリートの可否	トークン	オートコンプリートで表示されるべき入力候補の種類
		on	オートコンプリートを行う
		off	オートコンプリートを行わない
disabled=""	入力欄を無効化	disabled	入力欄を無効化
form=""	関連付けるフォーム	ID名	関連づける“form”要素の“id”属性の値
multiple=""	複数の値を入力を可能にする	multiple	複数の値を入力を可能にする
name=""	入力欄の名前	文字列	入力欄の名前
required=""	入力を必須にする	required	入力を必須にする
size=""	入力欄の高さ	正の整数	入力欄が表示できる入力候補の数

過去に定義されていた属性

属性		値
属性	説明	値	説明
tabindex=""	フォーカスの可否とフォーカスの移動順序を指定する	正の整数	順次ナビゲーションに加わり、フォーカスの順番を指定(“tabindex”属性の値が小さい順番にフォーカスする)
		0	順次ナビゲーションに加わるがフォーカスの順番は指定しない(文書内に記述された順番でフォーカスする)
		負の整数	フォーカス可能だが順次ナビゲーションには加わらない
onfocus=""	フォーカスされた時に実行されるスクリプト	スクリプト	フォーカスされた時に実行されるスクリプト
onblur=""	フォーカスを失った時に実行されるスクリプト	スクリプト	フォーカスを失った時に実行されるスクリプト
onchange=""	要素の入力内容に変化があった時に実行されるスクリプト	スクリプト	要素の入力内容に変化があった時に実行されるスクリプト
autofocus=""	要素に自動的にフォーカスする	autofocus	要素に自動的にフォーカスする

＃

仕様書

“select”要素はHTML2.0から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

定義されている仕様書


<select>


autocomplete=""
disabled=""
form=""
multiple=""
name=""
required=""
size=""


tabindex=""
onblur=""
onchange=""
onfocus=""
autofocus=""

DOMインターフェース



[Exposed=Window]

interface HTMLSelectElement : HTMLElement {


  [HTMLConstructor] constructor();



  [CEReactions] attribute DOMString autocomplete;

  [CEReactions] attribute boolean disabled;

  readonly attribute HTMLFormElement? form;

  [CEReactions] attribute boolean multiple;

  [CEReactions] attribute DOMString name;

  [CEReactions] attribute boolean required;

  [CEReactions] attribute unsigned long size;



  readonly attribute DOMString type;



  [SameObject] readonly attribute HTMLOptionsCollection options;

  [CEReactions] attribute unsigned long length;

  getter HTMLOptionElement? item(unsigned long index);

  HTMLOptionElement? namedItem(DOMString name);

  [CEReactions] undefined add((HTMLOptionElement or HTMLOptGroupElement) element, optional (HTMLElement or long)? before = null);

  [CEReactions] undefined remove(); // ChildNode overload

  [CEReactions] undefined remove(long index);

  [CEReactions] setter undefined (unsigned long index, HTMLOptionElement? option);



  [SameObject] readonly attribute HTMLCollection selectedOptions;

  attribute long selectedIndex;

  attribute DOMString value;



  readonly attribute boolean willValidate;

  readonly attribute ValidityState validity;

  readonly attribute DOMString validationMessage;

  boolean checkValidity();

  boolean reportValidity();

  undefined setCustomValidity(DOMString error);



  readonly attribute NodeList labels;


};

UAスタイルシート



@namespace url(http://www.w3.org/1999/xhtml);




select {


 letter-spacing: initial;

 word-spacing: initial;

 line-height: initial;

 text-transform: initial;

 text-indent: initial;

 text-shadow: initial;

 text-align: initial;

 box-sizing: border-box;

 display: inline-block;

 
}