HTML
Living Standard — Last Updated 11 April 2024
Living Standard — Last Updated 11 April 2024
button要素Support in all current engines.
Support in all current engines.
tabindex属性が指定された子孫が存在してはならない。disabled — フォームコントロールが無効であるかどうかform — form要素とこの要素を関連付けるformaction — フォーム送信に使用するURLformenctype — フォーム送信に使用するエントリーリストのエンコーディングタイプformmethod — フォーム送信に使用する変形formnovalidate — フォーム送信のためのフォームコントロール検証を回避するformtarget — フォーム送信に対するナビゲート可能name — フォーム送信およびform.elements APIで使用する要素の名前popovertarget — ポップオーバー要素を切り替え、表示、または非表示にするターゲットとするpopovertargetaction — ターゲットのポップオーバー要素を切り替える、表示する、またじゃ非表示にするかを示すtype — ボタンの種類value — フォーム送信に対して使用される値[Exposed =Window ]
interface HTMLButtonElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute boolean disabled ;
readonly attribute HTMLFormElement ? form ;
[CEReactions ] attribute USVString formAction ;
[CEReactions ] attribute DOMString formEnctype ;
[CEReactions ] attribute DOMString formMethod ;
[CEReactions ] attribute boolean formNoValidate ;
[CEReactions ] attribute DOMString formTarget ;
[CEReactions ] attribute DOMString name ;
[CEReactions ] attribute DOMString type ;
[CEReactions ] 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 ;
};
HTMLButtonElement includes PopoverInvokerElement ;button要素は要素のコンテンツによって分類されるボタンを表す。
要素はボタンである。
type属性は、アクティブにされたときのボタンの振る舞いを制御する。It is an enumerated attribute with the following keywords and states:
| キーワード | 状態 | 概要 |
|---|---|---|
submit | Submit Button | フォームを送信する。 |
reset | Reset Button | フォームをリセットする。 |
button | Button | 何もしない。 |
The attribute's missing value default and invalid value default are both the Submit Button state.
type属性がSubmit Button状態にある場合、要素は具体的にsubmit buttonである。
Constraint validation: If the type attribute is in the Reset Button state or the Button state, the element is barred from constraint validation.
A button element element's activation behavior given event is:
If element is disabled, then return.
If element's node document is not fully active, then return.
If element has a form owner then switch on element's type attribute's state, then:
Submit element's form owner from element with userInvolvement set to event's user navigation involvement.
Reset element's form owner.
Do nothing.
Run the popover target attribute activation behavior given element.
form属性は、フォームの所有者とbutton要素を明示的に関連付けるために使用される。name属性は要素の名前を表す。disabled属性は、コントロールが非対話的にするためおよびその値を送信するのを防ぐために使用される。formaction、formenctype、formmethod、formnovalidateおよびformtarget属性は、フォーム送信用の属性である。
formnovalidate属性は、制約検証をトリガーしない送信ボタンを作成するために使用することができる。
要素のtype属性がSubmit Button状態でない場合、formaction、formenctype、formmethod、formnovalidate、formtargetは指定されてはならない。
value属性はフォーム送信の目的のために要素の値を与える。存在する場合、要素の値は要素のvalue属性の値であり、そうでなければ空文字列である。
ボタン自体がフォームの送信を開始するために使用された場合、ボタン（およびその値）はフォームの送信にのみ含まれる。
value IDL属性は、同じ名前のコンテンツ属性を反映しなければならない。
typeIDL属性は、既知の値に制限され、同じ名前のコンテンツ属性を反映しなければならない。
willValidate、validity、およびvalidationMessage IDL属性、checkValidity()、reportValidity()およびsetCustomValidity()メソッドは、制約検証APIの一部である。labels IDL属性は、要素のlabelのリストを提供する。The disabled, form, and name IDL attributes are part of the element's forms API.
次のボタンは、アクティブにされたときに、"Show hint"のラベルをもち、ダイアログボックスがポップアップ表示される：
< button type = button
onclick = "alert('This 15-20 minute piece was composed by George Gershwin.')" >
Show hint
</ button > select要素Support in all current engines.
Support in all current engines.
option、optgroup、hrおよびスクリプトサポート要素。autocomplete — フォームオートフィル機能に対するヒントdisabled — フォームコントロールが無効であるかどうかform — form要素とこの要素を関連付けるmultiple — 複数の値を許可するかどうかname — フォーム送信およびform.elements APIで使用する要素の名前required — コントロールがフォーム送信に要求されるかどうかsize — コントロールのサイズmultiple属性を持つ、または1より大きい値をもつsizeを持つ場合：著者向け、実装者向け。[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 );
undefined showPicker ();
readonly attribute NodeList labels ;
};select要素は、選択肢の集合の中で選択するためのコントロールを表す。
Support in all current engines.
multiple属性は真偽属性である。属性が存在する場合、select要素は、選択肢のリストから0個以上の選択肢を選択するためのコントロールを表す。属性が存在しない場合、select要素は、選択肢のリストから1つの選択肢を選択するためのコントロールを表す。
Support in all current engines.
size属性は、ユーザーに表示するための選択肢の数を与える。size属性が指定される場合、0より大きい妥当な負でない整数である値を持たなければならない。
The display size of a select element is the result of applying the rules for parsing non-negative integers to the value of element's size attribute, if it has one and parsing it is successful. If applying those rules to the attribute's value is not successful, or if the size attribute is absent, then the element's display size is 4 if the element's multiple content attribute is present, and 1 otherwise.
select要素の選択肢のリストは、ツリー順で、select要素のすべてのoption子要素、およびselect要素のすべてのoptgroup要素に属するすべてのoption子要素で構成される。
Support in all current engines.
required属性は真偽属性である。指定される場合、ユーザーがフォームを送信する前に値を選択する必要がある。
select要素がrequired属性を指定され、multiple属性を指定されず、1である表示サイズを持つ場合、および（もしあれば）select要素の選択肢のリストで最初のoptionの値が空文字列であり、そのoption要素の親ノードがselect要素（かつoptgroup要素でない）場合、そのoptionは、select要素のプレースホルダーのラベルオプションである。
select要素がrequired属性を指定され、multiple属性を指定されず、1である表示サイズを持つ場合、そのselect要素は、プレースホルダーのラベルオプションを持たなければならない。
実際には、上の段落で述べた要件は、select要素が1より大きい値をもつsize属性を持たない場合にのみ適用することができる。
Constraint validation: If the element has its required attribute specified, and either none of the option elements in the select element's list of options have their selectedness set to true, or the only option element in the select element's list of options with its selectedness set to true is the placeholder label option, then the element is suffering from being missing.
If the multiple attribute is absent, and the element is not disabled, then the user agent should allow the user to pick an option element in its list of options that is itself not disabled. Upon this option element being picked (either through a click, or through unfocusing the element after changing its value, or through a menu command, or through any other mechanism), and before the relevant user interaction event is queued (e.g. before the click event), the user agent must set the selectedness of the picked option element to true, set its dirtiness to true, and then send select update notifications.
If the multiple attribute is absent, whenever an option element in the select element's list of options has its selectedness set to true, and whenever an option element with its selectedness set to true is added to the select element's list of options, the user agent must set the selectedness of all the other option elements in its list of options to false.
If the multiple attribute is absent and the element's display size is greater than 1, then the user agent should also allow the user to request that the option whose selectedness is true, if any, be unselected. Upon this request being conveyed to the user agent, and before the relevant user interaction event is queued (e.g. before the click event), the user agent must set the selectedness of that option element to false, set its dirtiness to true, and then send select update notifications.
The selectedness setting algorithm, given a select element element, is to run the following steps:
If element's multiple attribute is absent, and element's display size is 1, and no option elements in the element's list of options have their selectedness set to true, then set the selectedness of the first option element in the list of options in tree order that is not disabled, if any, to true, and return.
If element's multiple attribute is absent, and two or more option elements in element's list of options have their selectedness set to true, then set the selectedness of all but the last option element with its selectedness set to true in the list of options in tree order to false.
The option HTML element insertion steps, given insertedNode, are:
If insertedNode's parent is a select element, or insertedNode's parent is an optgroup element whose parent is a select element, then run that select element's selectedness setting algorithm.
The option HTML element removing steps, given removedNode and oldParent, are:
If oldParent is a select element, or oldParent is an optgroup element whose parent is a select element, then run that select element's selectedness setting algorithm.
The optgroup HTML element removing steps, given removedNode and oldParent, are:
If oldParent is a select element and removedNode has an option child, then run oldParent's selectedness setting algorithm.
If an option element in the list of options asks for a reset, then run that select element's selectedness setting algorithm.
If the multiple attribute is present, and the element is not disabled, then the user agent should allow the user to toggle the selectedness of the option elements in its list of options that are themselves not disabled. Upon such an element being toggled (either through a click, or through a menu command, or any other mechanism), and before the relevant user interaction event is queued (e.g. before a related click event), the selectedness of the option element must be changed (from true to false or false to true), the dirtiness of the element must be set to true, and the user agent must send select update notifications.
When the user agent is to send select update notifications, queue an element task on the user interaction task source given the select element to run these steps:
select element's user validity to true.Fire an event named input at the select element, with the bubbles and composed attributes initialized to true.
Fire an event named change at the select element, with the bubbles attribute initialized to true.
The reset algorithm for a select element selectElement is:
Set selectElement's user validity to false.
For each optionElement of selectElement's list of options:
If optionElement has a selected attribute, then set optionElement's selectedness to true; otherwise set it to false.
Set optionElement's dirtiness to false.
Run the selectedness setting algorithm given selectElement.
form属性は、フォームの所有者とselect要素を明示的に関連付けるために使用される。name属性は要素の名前を表す。disabled属性は、コントロールが非対話的にするためおよびその値を送信するのを防ぐために使用される。autocomplete属性は、どのようにユーザーエージェントがオートフィルの振る舞いを提供するかを制御する。
disabledでないselect要素はmutableである。
select.typeSupport in all current engines.
要素がmultiple属性を持つ場合、"select-multiple"を返し、そうでなければ"select-one"を返す。
select.optionsSupport in all current engines.
select.length [ = value ]選択肢のリストの要素数を返す。
element = select.item(index)Support in all current engines.
select[index]element = select.namedItem(name)Support in all current engines.
選択肢のリストからのIDまたはname nameとともに最初のアイテムを返す。
IDをもつ要素が見つからない場合、nullを返す。
select.add(element [, before ])Support in all current engines.
beforeによって与えられるノードの前の要素を挿入する。
before引数は数字でもよく、その場合elementはその数字をもつアイテムの前に挿入され、または選択肢のリストからの要素でもよい。その場合elementはその要素の前に挿入される。
beforeが省略された、null、または範囲外の数字の場合、elementはリストの最後に加えられるだろう。
elementに挿入された要素が親要素である場合、このメソッドは"HierarchyRequestError" DOMExceptionを投げる。
select.selectedOptionsHTMLSelectElement/selectedOptions
Support in all current engines.
選択された選択肢のリストのHTMLOptionsCollectionを返す。
select.selectedIndex [ = value ]HTMLSelectElement/selectedIndex
Support in all current engines.
もしあるならば、最初に選ばれたアイテムのインデックスを、または選択したアイテムが存在しない場合−1を返す。
選択を変更する設定が可能である。
select.value [ = value ]もしあれば、最初に選択されたアイテムの値を返し、選択されたアイテムが存在しない場合、空文字列を返す。
選択を変更する設定が可能である。
select.showPicker()Shows any applicable picker UI for select, so that the user can select a value.
Throws an "InvalidStateError" DOMException if select is not mutable.
一時的なユーザーアクティベーションなしで呼び出された場合、"NotAllowedError" DOMException を投げる。
Throws a "SecurityError" DOMException if select is inside a cross-origin iframe.
Throws a "NotSupportedError" DOMException if select is not being rendered.
The type IDL attribute, on getting, must return the string "select-one" if the multiple attribute is absent, and the string "select-multiple" if the multiple attribute is present.
The options IDL attribute must return an HTMLOptionsCollection rooted at the select node, whose filter matches the elements in the list of options.
The options collection is also mirrored on the HTMLSelectElement object. The supported property indices at any instant are the indices supported by the object returned by the options attribute at that instant.
The length IDL attribute must return the number of nodes represented by the options collection. On setting, it must act like the attribute of the same name on the options collection.
The item(index) method must return the value returned by the method of the same name on the options collection, when invoked with the same argument.
The namedItem(name) method must return the value returned by the method of the same name on the options collection, when invoked with the same argument.
When the user agent is to set the value of a new indexed property or set the value of an existing indexed property for a select element, it must instead run the corresponding algorithm on the select element's options collection.
Similarly, the add(element, before) method must act like its namesake method on that same options collection.
Support in all current engines.
The remove() method must act like its namesake method on that same options collection when it has arguments, and like its namesake method on the ChildNode interface implemented by the HTMLSelectElement ancestor interface Element when it has no arguments.
The selectedOptions IDL attribute must return an HTMLCollection rooted at the select node, whose filter matches the elements in the list of options that have their selectedness set to true.
The selectedIndex IDL attribute, on getting, must return the index of the first option element in the list of options in tree order that has its selectedness set to true, if any. If there isn't one, then it must return −1.
On setting, the selectedIndex attribute must set the selectedness of all the option elements in the list of options to false, and then the option element in the list of options whose index is the given new value, if any, must have its selectedness set to true and its dirtiness set to true.
This can result in no element having a selectedness set to true even in the case of the select element having no multiple attribute and a display size of 1.
The value IDL attribute, on getting, must return the value of the first option element in the list of options in tree order that has its selectedness set to true, if any. If there isn't one, then it must return the empty string.
On setting, the value attribute must set the selectedness of all the option elements in the list of options to false, and then the first option element in the list of options, in tree order, whose value is equal to the given new value, if any, must have its selectedness set to true and its dirtiness set to true.
This can result in no element having a selectedness set to true even in the case of the select element having no multiple attribute and a display size of 1.
The multiple, required, and size IDL attributes must reflect the respective content attributes of the same name. The size IDL attribute has a default value of 0.
For historical reasons, the default value of the size IDL attribute does not return the actual size used, which, in the absence of the size content attribute, is either 1 or 4 depending on the presence of the multiple attribute.
willValidate、validity、およびvalidationMessage IDL属性、checkValidity()、reportValidity()およびsetCustomValidity()メソッドは、制約検証APIの一部である。labels IDL属性は、要素のlabelのリストを提供する。The disabled, form, and name IDL attributes are part of the element's forms API.
選択肢の集合からユーザーが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 > デフォルトの選択肢が存在しない場合、プレースホルダーが代わりに使用される：
< select name = "unittype" required >
< option value = "" > Select unit type </ option >
< option value = "1" > Miner </ option >
< option value = "2" > Puffer </ option >
< option value = "3" > Snipey </ option >
< option value = "4" > Max </ option >
< option value = "5" > Firebot </ option >
</ select > ここでは、ユーザーが選択肢の集合から任意の数を選択できる。デフォルトで、5つすべての選択肢が選択されている。
< p >
< label for = "allowedunits" > Select unit types to enable on this map:</ label >
< select id = "allowedunits" name = "allowedunits" multiple >
< option value = "1" selected > Miner </ option >
< option value = "2" selected > Puffer </ option >
< option value = "3" selected > Snipey </ option >
< option value = "4" selected > Max </ option >
< option value = "5" selected > Firebot </ option >
</ select >
</ p > ときには、ユーザーは1つ以上の項目を選択する必要がある。次の例はそのようなインターフェイスを示す。
< label >
Select the songs from that you would like on your Act II Mix Tape:
< select multiple required name = "act2" >
< option value = "s1" > It Sucks to Be Me (Reprise)
< option value = "s2" > There is Life Outside Your Apartment
< option value = "s3" > The More You Ruv Someone
< option value = "s4" > Schadenfreude
< option value = "s5" > I Wish I Could Go Back to College
< option value = "s6" > The Money Song
< option value = "s7" > School for Monsters
< option value = "s8" > The Money Song (Reprise)
< option value = "s9" > There's a Fine, Fine Line (Reprise)
< option value = "s10" > What Do You Do With a B.A. in English? (Reprise)
< option value = "s11" > For Now
</ select >
</ label > セパレーターを使用すると便利な場合がある：
< label >
Select the song to play next:
< select required name = "next" >
< option value = "sr" > Random
< hr >
< option value = "s1" > It Sucks to Be Me (Reprise)
< option value = "s2" > There is Life Outside Your Apartment
…datalist要素Support in all current engines.
optionおよびスクリプトサポート要素。[Exposed =Window ]
interface HTMLDataListElement : HTMLElement {
[HTMLConstructor ] constructor ();
[SameObject ] readonly attribute HTMLCollection options ;
};datalist要素は、他のコントロール用にあらかじめ定義された選択肢を表すoption要素の集合を表す。レンダリングにおいて、datalist要素は何もないことを表し、子と一緒に非表示にされるべきである。
datalist要素は2つの方法で使用される。最も単純な場合、datalist要素はoption要素の子のみを持つ。
< label >
Animal:
< input name = animal list = animals >
< datalist id = animals >
< option value = "Cat" >
< option value = "Dog" >
</ datalist >
</ label > より手の込んだ場合、datalist要素はdatalistをサポートしないダウンレベルクライアントに対して表示されるコンテンツを与えられる。この場合、option要素はdatalist要素の内側のselect要素の内側で提供される。
< label >
Animal:
< input name = animal list = animals >
</ label >
< datalist id = animals >
< label >
or select from the list:
< select name = animal >
< option value = "" >
< option > Cat
< option > Dog
</ select >
</ label >
</ datalist > datalist要素はinput要素でlist属性を使用するinput要素に接続される。
その値が空文字列でない文字列である、無効でない、datalist要素の子孫である各option要素は、提案を表す。各提案は、値とラベルを持つ。
datalist.optionsdatalistのoption要素のHTMLCollectionを返す。
The options IDL attribute must return an HTMLCollection rooted at the datalist node, whose filter matches option elements.
Constraint validation: If an element has a datalist element ancestor, it is barred from constraint validation.
optgroup要素Support in all current engines.
Support in all current engines.
select要素の子として。optionおよびスクリプトサポート要素。optgroup要素の直後に別のoptgroup要素が続く場合、その直後にhr要素が続く場合、または親要素にコンテンツがない場合、optgroup要素の終了タグは省略することができる。disabled — フォームコントロールが無効であるかどうかlabel — ユーザー可視ラベル[Exposed =Window ]
interface HTMLOptGroupElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute boolean disabled ;
[CEReactions ] attribute DOMString label ;
};optgroup要素は、共通のラベルをもつoption要素のグループを表す。
option要素の要素のグループは、optgroup要素の子であるoption要素で構成する。
When showing option elements in select elements, user agents should show the option elements of such groups as being related to each other and separate from other option elements.
Support in all current engines.
disabled属性は真偽属性であり、一緒にoption要素のグループを無効にするために使用できる。
label属性を指定しなければならない。その値は、ユーザーインターフェイスの目的に対して、グループの名前を与える。User agents should use this attribute's value when labeling the group of option elements in a select element.
The disabled and label attributes must reflect the respective content attributes of the same name.
optgroup要素を選択する方法は存在しない。option要素を選択することができるだけである。optgroup要素は単にoption要素のグループに対するラベルを提供するだけである。
次の断片は、selectドロップダウンウィジェットで3つのコースからレッスンの集合が提供される様子を示す：
< form action = "courseselector.dll" method = "get" >
< p > Which course would you like to watch today?
< p >< label > Course:
< select name = "c" >
< optgroup label = "8.01 Physics I: Classical Mechanics" >
< option value = "8.01.1" > Lecture 01: Powers of Ten
< option value = "8.01.2" > Lecture 02: 1D Kinematics
< option value = "8.01.3" > Lecture 03: Vectors
< optgroup label = "8.02 Electricity and Magnetism" >
< option value = "8.02.1" > Lecture 01: What holds our world together?
< option value = "8.02.2" > Lecture 02: Electric Field
< option value = "8.02.3" > Lecture 03: Electric Flux
< optgroup label = "8.03 Physics III: Vibrations and Waves" >
< option value = "8.03.1" > Lecture 01: Periodic Phenomenon
< option value = "8.03.2" > Lecture 02: Beats
< option value = "8.03.3" > Lecture 03: Forced Oscillations with Damping
</ select >
</ label >
< p >< input type = submit value = "▶ Play" >
</ form > option要素Support in all current engines.
Support in all current engines.
select要素の子として。datalist要素の子として。optgroup要素の子として。label属性およびvalue属性を持つ場合：Nothing。label属性を持つがvalue属性を持たない場合：テキスト。label属性を持たず、かつdatalist要素の子でない場合：要素間の空白文字でないテキスト。label属性を持たず、かつdatalist要素の子である場合：テキスト。option要素の直後に別のoption要素が続く場合、optgroup要素が続く場合、hr要素が続く場合、または親要素にコンテンツがない場合、option要素の終了タグは省略することができる。disabled — フォームコントロールが無効であるかどうかlabel — ユーザー可視ラベルselected — デフォルトで選択肢が選択されるかどうかvalue — フォーム送信に対して使用される値[Exposed =Window ,
LegacyFactoryFunction =Option (optional DOMString text = "", optional DOMString value , optional boolean defaultSelected = false , optional boolean selected = false )]
interface HTMLOptionElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute boolean disabled ;
readonly attribute HTMLFormElement ? form ;
[CEReactions ] attribute DOMString label ;
[CEReactions ] attribute boolean defaultSelected ;
attribute boolean selected ;
[CEReactions ] attribute DOMString value ;
[CEReactions ] attribute DOMString text ;
readonly attribute long index ;
};option要素は、select要素でまたはdatalist要素で提案のリストの一部として選択肢を表す。
selectの定義で記載されるある特定の状況において、option要素は、select要素のプレースホルダーのラベルオプションとなることができる。プレースホルダーのラベルオプションは、実際の選択肢を表さないが、selectコントロールのラベルを表す。
Support in all current engines.
disabled属性は、真偽属性である。要素のdisabled属性が存在する場合、またはdisabled属性であるoptgroup要素の子が存在する場合、option要素は無効である。
An option element that is disabled must prevent any click events that are queued on the user interaction task source from being dispatched on the element.
label属性は、要素のラベルを提供する。属性が存在しかつその値が空文字列でない場合、optionのラベルはlabelコンテンツ属性の値であり、そうでなければ、要素のtext IDL属性の値となる。
labelコンテンツ属性が指定される場合、空であってはならない。
value属性は、その要素の値を提供する。属性が存在する場合、optionの値はvalueコンテンツ属性の値であり、存在しない場合、要素のtext IDL属性の値となる。
selected属性は、真偽属性である。これは、要素のデフォルトselectednessを表す。
The dirtiness of an option element is a boolean state, initially false. It controls whether adding or removing the selected content attribute has any effect.
The selectedness of an option element is a boolean state, initially false. Except where otherwise specified, when the element is created, its selectedness must be set to true if the element has a selected attribute. Whenever an option element's selected attribute is added, if its dirtiness is false, its selectedness must be set to true. Whenever an option element's selected attribute is removed, if its dirtiness is false, its selectedness must be set to false.
The Option() constructor, when called with three or fewer arguments, overrides the initial state of the selectedness state to always be false even if the third argument is true (implying that a selected attribute is to be set). The fourth argument can be used to explicitly set the initial selectedness state when using the constructor.
multiple属性が指定されないselect要素は、そのselected属性設定を持つ複数の子孫option要素を持ってはならない。
An option element's index is the number of option elements that are in the same list of options but that come before it in tree order. If the option element is not in a list of options, then the option element's index is zero.
option.selected要素が選択される場合trueを返し、そうでなければfalseを返す。
要素の現在の状態を上書きする設定が可能である。
option.indexoption.form存在するならば、要素のform要素を返し、またはそうでなければnullを返す。
option.textスペースが相殺されscript要素がスキップされる場合を除き、textContentと同じ。
option = new Option([ text [, value [, defaultSelected [, selected ] ] ] ])Support in all current engines.
新しいoption要素を返す。
text引数は要素のコンテンツを設定する。
value引数はvalue属性を設定する。
defaultSelected引数はselected属性を設定する。
selected引数は要素が選択されるかどうかを設定する。省略される場合、たとえdefaultSelected引数がtrueであっても、要素は選択されない。
disabled IDL属性は、同じ名前のコンテンツ属性を反映しなければならない。The defaultSelected IDL attribute must reflect the selected content attribute.
The label IDL attribute, on getting, if there is a label content attribute, must return that attribute's value; otherwise, it must return the element's label. On setting, the element's label content attribute must be set to the new value.
The value IDL attribute, on getting, must return the element's value. On setting, the element's value content attribute must be set to the new value.
The selected IDL attribute, on getting, must return true if the element's selectedness is true, and false otherwise. On setting, it must set the element's selectedness to the new value, set its dirtiness to true, and then cause the element to ask for a reset.
The index IDL attribute must return the element's index.
The text IDL attribute, on getting, must return the result of stripping and collapsing ASCII whitespace from the concatenation of data of all the Text node descendants of the option element, in tree order, excluding any that are descendants of descendants of the option element that are themselves script or SVG script elements.
The text attribute's setter must string replace all with the given value within this element.
The form IDL attribute's behavior depends on whether the option element is in a select element or not. If the option has a select element as its parent, or has an optgroup element as its parent and that optgroup element has a select element as its parent, then the form IDL attribute must return the same value as the form IDL attribute on that select element. そうでなければ、nullを返す。
A legacy factory function is provided for creating HTMLOptionElement objects (in addition to the factory methods from DOM such as createElement()): Option(text, value, defaultSelected, selected). When invoked, the legacy factory function must perform the following steps:
Let document be the current global object's associated Document.
Let option be the result of creating an element given document, option, and the HTML namespace.
If text is not the empty string, then append to option a new Text node whose data is text.
If value is given, then set an attribute value for option using "value" and value.
If defaultSelected is true, then set an attribute value for option using "selected" and the empty string.
If selected is true, then set option's selectedness to true; otherwise set its selectedness to false (even if defaultSelected is true).
Return option.
textarea要素Support in all current engines.
Support in all current engines.
autocomplete — フォームオートフィル機能に対するヒントcols — 行あたりの最大文字数dirname — フォーム送信で、要素の方向を送信するために使用するフォームコントロールの名前disabled — フォームコントロールが無効であるかどうかform — form要素とこの要素を関連付けるmaxlength — 値の最大長さminlength — 値の最小長さname — フォーム送信およびform.elements APIで使用する要素の名前placeholder — フォームコントロール内に配置されるユーザー可視ラベルreadonly — ユーザーによって編集される値を許可するかどうかrequired — コントロールがフォーム送信に要求されるかどうかrows — 表示する行数wrap — どのようにフォームコントロール値がフォーム送信に対して包まれるか[Exposed =Window ]
interface HTMLTextAreaElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute DOMString autocomplete ;
[CEReactions ] attribute unsigned long cols ;
[CEReactions ] attribute DOMString dirName ;
[CEReactions ] attribute boolean disabled ;
readonly attribute HTMLFormElement ? form ;
[CEReactions ] attribute long maxLength ;
[CEReactions ] attribute long minLength ;
[CEReactions ] attribute DOMString name ;
[CEReactions ] attribute DOMString placeholder ;
[CEReactions ] attribute boolean readOnly ;
[CEReactions ] attribute boolean required ;
[CEReactions ] attribute unsigned long rows ;
[CEReactions ] attribute DOMString wrap ;
readonly attribute DOMString type ;
[CEReactions ] attribute DOMString defaultValue ;
attribute [LegacyNullToEmptyString ] DOMString value ;
readonly attribute unsigned long textLength ;
readonly attribute boolean willValidate ;
readonly attribute ValidityState validity ;
readonly attribute DOMString validationMessage ;
boolean checkValidity ();
boolean reportValidity ();
undefined setCustomValidity (DOMString error );
readonly attribute NodeList labels ;
undefined select ();
attribute unsigned long selectionStart ;
attribute unsigned long selectionEnd ;
attribute DOMString selectionDirection ;
undefined setRangeText (DOMString replacement );
undefined setRangeText (DOMString replacement , unsigned long start , unsigned long end , optional SelectionMode selectionMode = "preserve");
undefined setSelectionRange (unsigned long start , unsigned long end , optional DOMString direction );
};textarea要素は、要素の生の値に対する複数行のプレーンテキスト編集コントロールを表す。コントロールのコンテンツは、コントロールのデフォルトの値を表す。
The raw value of a textarea control must be initially the empty string.
この要素は、双方向アルゴリズムに関わる要件をレンダリングを持つ。
readonly属性は、テキストがユーザーによって編集できるかどうかを制御するために使用される真偽属性である。
この例において、テキストコントロールは読み取り専用ファイルを表すので、読み取り専用としてマークされる：
Filename: < code > /etc/bash.bashrc</ code >
< textarea name = "buffer" readonly >
# System-wide .bashrc file for interactive bash(1) shells.
# To enable the settings / commands in this file for login shells as well,
# this file has to be sourced in /etc/profile.
# If not running interactively, don't do anything
[ -z "$PS1" ] && return
...</ textarea > Constraint validation: If the readonly attribute is specified on a textarea element, the element is barred from constraint validation.
A textarea element is mutable if it is neither disabled nor has a readonly attribute specified.
When a textarea is mutable, its raw value should be editable by the user: the user agent should allow the user to edit, insert, and remove text, and to insert and remove line breaks in the form of U+000A LINE FEED (LF) characters. Any time the user causes the element's raw value to change, the user agent must queue an element task on the user interaction task source given the textarea element to fire an event named input at the textarea element, with the bubbles and composed attributes initialized to true. User agents may wait for a suitable break in the user's interaction before queuing the task; for example, a user agent could wait for the user to have not hit a key for 100ms, so as to only fire the event when the user pauses, instead of continuously for each keystroke.
A textarea element's dirty value flag must be set to true whenever the user interacts with the control in a way that changes the raw value.
The cloning steps for textarea elements must propagate the raw value and dirty value flag from the node being cloned to the copy.
The children changed steps for textarea elements must, if the element's dirty value flag is false, set the element's raw value to its child text content.
The reset algorithm for textarea elements is to set the user validity to false, dirty value flag back to false, and set the raw value of element to its child text content.
When a textarea element is popped off the stack of open elements of an HTML parser or XML parser, then the user agent must invoke the element's reset algorithm.
If the element is mutable, the user agent should allow the user to change the writing direction of the element, setting it either to a left-to-right writing direction or a right-to-left writing direction. If the user does so, the user agent must then run the following steps:
Set the element's dir attribute to "ltr" if the user selected a left-to-right writing direction, and "rtl" if the user selected a right-to-left writing direction.
Queue an element task on the user interaction task source given the textarea element to fire an event named input at the textarea element, with the bubbles and composed attributes initialized to true.
cols属性は行あたりの予想最大文字数を指定する。cols属性が指定される場合、その値は0より大きい妥当な非負整数でなければならない。If applying the rules for parsing non-negative integers to the attribute's value results in a number greater than zero, then the element's character width is that value; otherwise, it is 20.
The user agent may use the textarea element's character width as a hint to the user as to how many characters the server prefers per line (e.g. for visual user agents by making the width of the control be that many characters). In visual renderings, the user agent should wrap the user's input in the rendering so that each line is no wider than this number of characters.
rows属性は、表示する行数を指定する。rows属性が指定される場合、その値は0より大きい妥当な非負整数でなければならない。If applying the rules for parsing non-negative integers to the attribute's value results in a number greater than zero, then the element's character height is that value; otherwise, it is 2.
Visual user agents should set the height of the control to the number of lines given by character height.
The wrap attribute is an enumerated attribute with the following keywords and states:
| キーワード | 状態 | 概要 |
|---|---|---|
soft | Soft | Text is not to be wrapped when submitted (though can still be wrapped in the rendering). |
hard | Hard | Text is to have newlines added by the user agent so that the text is wrapped when it is submitted. |
The attribute's missing value default and invalid value default are both the Soft state.
要素のwrap属性がHard状態にある場合、cols属性を指定しなければならない。
For historical reasons, the element's value is normalized in three different ways for three different purposes. The raw value is the value as it was originally set. It is not normalized. The API value is the value used in the value IDL attribute, textLength IDL attribute, and by the maxlength and minlength content attributes. It is normalized so that line breaks use U+000A LINE FEED (LF) characters. Finally, there is the value, as used in form submission and other processing models in this specification. It is normalized as for the API value, and in addition, if necessary given the element's wrap attribute, additional line breaks are inserted to wrap the text at the given width.
The algorithm for obtaining the element's API value is to return the element's raw value, with newlines normalized.
The element's value is defined to be the element's API value with the textarea wrapping transformation applied. The textarea wrapping transformation is the following algorithm, as applied to a string:
If the element's wrap attribute is in the Hard state, insert U+000A LINE FEED (LF) characters into the string using an implementation-defined algorithm so that each line has no more than character width characters. For the purposes of this requirement, lines are delimited by the start of the string, the end of the string, and U+000A LINE FEED (LF) characters.
maxlength属性は、フォームコントロールmaxlength属性である。
If the textarea element has a maximum allowed value length, then the element's children must be such that the length of the value of the element's descendant text content with newlines normalized is less than or equal to the element's maximum allowed value length.
minlength属性は、フォームコントロールminlength属性である。
required属性は真偽属性である。指定される場合、ユーザーがフォームを送信する前に値を入力する必要がある。
Constraint validation: If the element has its required attribute specified, and the element is mutable, and the element's value is the empty string, then the element is suffering from being missing.
コントロールが値を持たない場合、placeholder属性は、データ入力を伴うユーザーの支援を意図する短いヒント（単語や短いフレーズ）を表す。ヒントは、サンプル値または期待された形式の簡単な説明かもしれない。
placeholder属性は、labelの代替として使用すべきでない。より長いヒントまたは他の助言テキストの場合、title属性がより適切である。
このメカニズムは非常に似ているが微妙に異なる：コントロールのlabelによって与えられるヒントは毎回表示され、placeholder属性に与えられた短いヒントはユーザーが値を入力する前にのみ表示され、ユーザーが詳細なヘルプを要求するときにtitle属性におけるヒントは表示される。
User agents should present this hint to the user when the element's value is the empty string and the control is not focused (e.g. by displaying it inside a blank unfocused control). All U+000D CARRIAGE RETURN U+000A LINE FEED character pairs (CRLF) in the hint, as well as all other U+000D CARRIAGE RETURN (CR) and U+000A LINE FEED (LF) characters in the hint, must be treated as line breaks when rendering the hint.
If a user agent normally doesn't show this hint to the user when the control is focused, then the user agent should nonetheless show the hint for the control if it was focused as a result of the autofocus attribute, since in that case the user will not have had an opportunity to examine the control before focusing it.
name属性は要素の名前を表す。dirname属性は、要素の方向がどのように送信されるかを制御する。disabled属性は、コントロールが非対話的にするためおよびその値を送信するのを防ぐために使用される。form属性は、フォーム所有者とtextarea要素を明示的に関連付けるために使用される。autocomplete属性は、どのようにユーザーエージェントがオートフィルの振る舞いを提供するかを制御する。
textarea.type文字列"textarea"を返す。
textarea.value要素の現在の値を返す。
値を変更する設定が可能である。
The cols, placeholder, required, rows, and wrap IDL attributes must reflect the respective content attributes of the same name. The cols and rows attributes are limited to only positive numbers with fallback. The cols IDL attribute's default value is 20. The rows IDL attribute's default value is 2. The dirName IDL attribute must reflect the dirname content attribute. The maxLength IDL attribute must reflect the maxlength content attribute, limited to only non-negative numbers. The minLength IDL attribute must reflect the minlength content attribute, limited to only non-negative numbers. The readOnly IDL attribute must reflect the readonly content attribute.
The type IDL attribute must return the value "textarea".
The defaultValue attribute's getter must return the element's child text content.
The defaultValue attribute's setter must string replace all with the given value within this element.
The value IDL attribute must, on getting, return the element's API value. On setting, it must perform the following steps:
Let oldAPIValue be this element's API value.
Set this element's raw value to the new value.
Set this element's dirty value flag to true.
If the new API value is different from oldAPIValue, then move the text entry cursor position to the end of the text control, unselecting any selected text and resetting the selection direction to "none".
The textLength IDL attribute must return the length of the element's API value.
willValidate、validity、およびvalidationMessage IDL属性、checkValidity()、reportValidity()およびsetCustomValidity()メソッドは、制約検証APIの一部である。labels IDL属性は、要素のlabelのリストを提供する。The select(), selectionStart, selectionEnd, selectionDirection, setRangeText(), and setSelectionRange() methods and IDL attributes expose the element's text selection. The disabled, form, and name IDL attributes are part of the element's forms API.
ここで、フォームで無制限の自由形式のテキスト入力に対して使用されるtextareaの例は次のとおり：
< p > If you have any comments, please let us know: < textarea cols = 80 name = comments ></ textarea ></ p > コメントの最大長を指定するために、maxlength属性を使用することができる：
< p > If you have any short comments, please let us know: < textarea cols = 80 name = comments maxlength = 200 ></ textarea ></ p > デフォルト値を与えるために、テキストを要素内に含むことができる：
< p > If you have any comments, please let us know: < textarea cols = 80 name = comments > You rock!</ textarea ></ p > また、最小の長さを与えることもできる。ここで、文字はユーザーによって記入される必要がある。テンプレート（これは最小の長さよりも短くなっている）が設けられているが、フォームを送信するには不十分である。
< textarea required minlength = "500" > Dear Madam Speaker,
Regarding your letter dated ...
...
Yours Sincerely,
...</ textarea > プレースホルダーは明示的なテンプレートを提供することなく、ユーザーへの基本的な形を提案するために同様に与えることができる。
< textarea placeholder = "Dear Francine,
They closed the parks this week, so we won't be able to
meet your there. Should we just have dinner?
Love,
Daddy" ></ textarea > ブラウザーが値とともに要素の方向を送信させる場合、dirnameに属性を指定できる：
< p > If you have any comments, please let us know (you may use either English or Hebrew for your comments):
< textarea cols = 80 name = comments dirname = comments.dir ></ textarea ></ p > output要素Support in all current engines.
Support in all current engines.
for — 出力が計算されたコントロールフォームを指定するform — form要素とこの要素を関連付けるname — form.elements APIで使用する要素の名前[Exposed =Window ]
interface HTMLOutputElement : HTMLElement {
[HTMLConstructor ] constructor ();
[SameObject , PutForwards =value ] readonly attribute DOMTokenList htmlFor ;
readonly attribute HTMLFormElement ? form ;
[CEReactions ] attribute DOMString name ;
readonly attribute DOMString type ;
[CEReactions ] attribute DOMString defaultValue ;
[CEReactions ] 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 ;
};output要素は、アプリケーションによって実行された計算の結果、またはユーザーアクションの結果を表す。
この要素は、前もって実行した他のプログラムの出力を引用するための適切な要素である、samp要素と対比することができる。
Support in all current engines.
forコンテンツ属性は、計算に参加したまたは別の方法で計算に影響を与えた値を表す、計算と要素の結果の間で作られた明示的な関係を与える。指定される場合、for属性は、順不同の一意な空白区切りトークンの集合で構成される文字列を含まなければならず、他のトークンと同一のものはなく、それぞれが同じツリーで要素のIDの値を持たなければならない。
form属性は、フォームの所有者とoutput要素を明示的に関連付けるために使用される。name属性は要素の名前を表す。output要素はフォームに関連付けられ、その結果フォームコントロールのイベントハンドラーからより容易に参照することができる。フォームが送信されるときに、要素の値自身は送信されない。
The element has a default value override (null or a string). Initially it must be null.
The element's default value is determined by the following steps:
If this element's default value override is non-null, then return it.
Return this element's descendant text content.
The reset algorithm for output elements is to run these steps:
String replace all with this element's default value within this element.
Set this element's default value override to null.
output.value [ = value ]要素の現在の値を返す。
値を変更する設定が可能である。
output.defaultValue [ = value ]要素の現在のデフォルト値を返す。
デフォルト値を変更する設定が可能である。
output.type文字列"output"を返す。
The value getter steps are to return this's descendant text content.
The value setter steps are:
Set this's default value override to its default value.
String replace all with the given value within this.
The defaultValue getter steps are to return the result of running this's default value.
The defaultValue setter steps are:
If this's default value override is null, then string replace all with the given value within this and return.
Set this's default value override to the given value.
The type getter steps are to return "output".
htmlFor IDL属性は、forコンテンツ属性を反映しなければならない。
willValidate、validity、およびvalidationMessage IDL属性、checkValidity()、reportValidity()およびsetCustomValidity()メソッドは、制約検証APIの一部である。labels IDL属性は、要素のlabelのリストを提供する。formおよびname IDL属性は要素のフォームAPIの一部である。
シンプルな電卓は、計算結果の表示に対してoutputを使用できる：
< form onsubmit = "return false" oninput = "o.value = a.valueAsNumber + b.valueAsNumber" >
< input id = a type = number step = any > +
< input id = b type = number step = any > =
< output id = o for = "a b" ></ output >
</ form > この例において、結果が入ってくるように、output要素は、リモートサーバーによる計算の結果を報告するために使用される：
< output id = "result" ></ output >
< script >
var primeSource = new WebSocket( 'ws://primes.example.net/' );
primeSource. onmessage = function ( event) {
document. getElementById( 'result' ). value = event. data;
}
</ script > progress要素Support in all current engines.
Support in all current engines.
progress要素の子孫が存在してはならない。value — 要素の現在値max — 範囲の上限[Exposed =Window ]
interface HTMLProgressElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute double value ;
[CEReactions ] attribute double max ;
readonly attribute double position ;
readonly attribute NodeList labels ;
};progress要素は、タスクの完了の進捗を表す。進捗は、進捗が進行しているが（たとえば、タスクが応答するリモートホストを待っているためなど）タスクが完了する前にどの程度作業が残っているのかが明らかでないことを指す不確定であるか、進捗がこれまでに完了している作業率を与える0から最大の範囲における数値であるかのいずれかである。
Support in all current engines.
要素によって表される現行のタスク完了を決定する2つの属性がある。value属性はどの程度タスクが完了しているかを指定し、max属性は、タスクが合計でどの程度のタスクが必要かを指定する。単位は任意であり、指定されない。
有限の進捗バーを作成するためには、現在の進行状況（max属性が指定されている場合は0.0〜1.0の数、または0からmax属性値までの数のいずれか）でvalue属性を追加する。無限の進捗バーを作成するためには、value属性を削除する。
著者はまた、進捗がレガシーユーザーエージェントのユーザーに使用可能になるよう、要素内のテキストとして現在の値と最大値をインラインで含むよう推奨される。
これは自動進行状況を表示するウェブアプリケーションの断片である：
< section >
< h2 > Task Progress</ h2 >
< p > Progress: < progress id = p max = 100 >< span > 0</ span > %</ progress ></ p >
< script >
var progressBar = document. getElementById( 'p' );
function updateProgress( newValue) {
progressBar. value = newValue;
progressBar. getElementsByTagName( 'span' )[ 0 ]. textContent = newValue;
}
</ script >
</ section > （この例においてupdateProgress()メソッドは、タスクが進行するにつれて、実際の進捗バーを更新するためにページに他のコードによって呼び出される。）
valueおよびmax属性が存在する場合、妥当な浮動小数点数の値を持たなければならない。The value attribute, if present, must have a value greater than or equal to zero, and less than or equal to the value of the max attribute, if present, or 1.0, otherwise. max属性が存在する場合、0より大きい値を持たなければならない。
progress要素は、タスクの進行状況とは対照的に、適切なゲージである何かのために使用する間違った要素である。たとえば、progressを使用してディスク領域の使用状況を示すことは不適切であろう。代わりに、meter要素は、このようなユースケースで利用可能である。
User agent requirements: If the value attribute is omitted, then the progress bar is an indeterminate progress bar. Otherwise, it is a determinate progress bar.
If the progress bar is a determinate progress bar and the element has a max attribute, the user agent must parse the max attribute's value according to the rules for parsing floating-point number values. If this does not result in an error, and if the parsed value is greater than zero, then the maximum value of the progress bar is that value. Otherwise, if the element has no max attribute, or if it has one but parsing it resulted in an error, or if the parsed value was less than or equal to zero, then the maximum value of the progress bar is 1.0.
If the progress bar is a determinate progress bar, user agents must parse the value attribute's value according to the rules for parsing floating-point number values. If this does not result in an error and the parsed value is greater than zero, then the value of the progress bar is that parsed value. Otherwise, if parsing the value attribute's value resulted in an error or a number less than or equal to zero, then the value of the progress bar is zero.
If the progress bar is a determinate progress bar, then the current value is the maximum value, if value is greater than the maximum value, and value otherwise.
UA requirements for showing the progress bar: When representing a progress element to the user, the UA should indicate whether it is a determinate or indeterminate progress bar, and in the former case, should indicate the relative position of the current value relative to the maximum value.
progress.position有限の進捗バー（既知の現在値と最大値を持つもの）について、最大値で現在値を除算した結果を返す。
無限の進捗バーは、-1を返す。
If the progress bar is an indeterminate progress bar, then the position IDL attribute must return −1. Otherwise, it must return the result of dividing the current value by the maximum value.
If the progress bar is an indeterminate progress bar, then the value IDL attribute, on getting, must return 0. Otherwise, it must return the current value. On setting, the given value must be converted to the best representation of the number as a floating-point number and then the value content attribute must be set to that string.
Setting the value IDL attribute to itself when the corresponding content attribute is absent would change the progress bar from an indeterminate progress bar to a determinate progress bar with no progress.
The max IDL attribute must reflect the content attribute of the same name, limited to only positive numbers. The default value for max is 1.0.
The labels IDL attribute provides a list of the element's labels.
meter要素Support in all current engines.
Support in all current engines.
meter要素の子孫が存在してはならない。value — 要素の現在値min — 範囲の下限max — 範囲の上限low — 低域の上限high — 高域の下限optimum — ゲージにおける最適値[Exposed =Window ]
interface HTMLMeterElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute double value ;
[CEReactions ] attribute double min ;
[CEReactions ] attribute double max ;
[CEReactions ] attribute double low ;
[CEReactions ] attribute double high ;
[CEReactions ] attribute double optimum ;
readonly attribute NodeList labels ;
};meter要素は既知の範囲内でスカラー量、または小数の値を表す。たとえば、ディスク使用量、クエリー結果の関連性、または特定の候補を選択するための投票人口の割合などである。
これはまた、ゲージとして知られる。
meter要素は、（進捗バーのように）進行状況を示すために使用すべきでない。その役割に対して、HTMLは独立してprogress要素を提供する。
meter要素はまた、任意の範囲のスカラー値を表すものでない―たとえば、既知の最大値が存在しない限り、重量、高さを報告するためにこれを使用することは誤りであろう。
要素によって表されるゲージのセマンティックスを決定する6つの属性がある。
Support in all current engines.
Support in all current engines.
min属性は範囲の下限を指定し、max属性は上限を指定する。value属性は、"測定された"値として示すゲージを持つ値を指定する。
他の3つの属性は、"最適"部分であるゲージの一部を示すために、ゲージの範囲を"低"、"中"、"高"の部分に分割して使用できる。low属性は"低"部分であると考えられる範囲を指定し、high属性は"高"部分であると考えられる範囲を指定する。optimumは、"最適"である位置を与える。それが"高"値より高い場合、より高い値がより良いことを示し、それが"低"マークよりも低い場合、より低い値がより良いことを示す。自然に間にある場合、高くも低くもない値が良いことを示す。
オーサリング要件：value属性が指定されなければならない。value、min、low、high、max、およびoptimum属性が存在する場合、妥当な浮動小数点数の値を持たなければならない。
加えて、属性値はさらに制約される：
valueをvalue属性の数とする。
min属性が指定される場合、minimumをその属性値とする。そうでなければ0とする。
max属性が指定される場合、maximumをその属性値とする。そうでなければ1.0とする。
次の不等式は、必要に応じて保持しなければならない：
minimum ≤ value ≤ maximum
最小または最大を指定しない場合、範囲は0～1であると仮定され、したがって値はその範囲内にする必要がある。
著者は、meter要素をサポートしないユーザーエージェントのユーザーのために、要素のコンテンツでゲージの状態のテキスト表現を含むよう推奨される。
マイクロデータとともに使用される場合、meter要素のvalue属性は、要素の機械可読な値を提供する。
次の例は、すべて3/4で満たされる3つのゲージを示す：
Storage space usage: < meter value = 6 max = 8 > 6 blocks used (out of 8 total)</ meter > Voter turnout: < meter value = 0.75 >< img alt = "75%" src = "graph75.png" ></ meter > Tickets sold: < meter min = "0" max = "100" value = "75" ></ meter > 範囲を与えるものでない（そしてデフォルトの最大値は1であるため、両方のゲージが最大限に達している）ため、次の例は、要素の誤った用法である：
< p > The grapefruit pie had a radius of < meter value = 12 > 12cm</ meter >
and a height of < meter value = 2 > 2cm</ meter > .</ p > <!-- BAD! --> 代わりに、meter要素を含まないか、他のパイに比べてコンテキスト内の寸法を与えるために定義された範囲でmeter要素を使用するかのいずれかだろう。
< p > The grapefruit pie had a radius of 12cm and a height of
2cm.</ p >
< dl >
< dt > Radius: < dd > < meter min = 0 max = 20 value = 12 > 12cm</ meter >
< dt > Height: < dd > < meter min = 0 max = 10 value = 2 > 2cm</ meter >
</ dl > meter要素内の単位を指定する明示的な方法はないが、単位は自由形式のテキストでtitle属性において指定してもよい。
上記の例は、単位を言及するように拡張できる：
< dl >
< dt > Radius: < dd > < meter min = 0 max = 20 value = 12 title = "centimeters" > 12cm</ meter >
< dt > Height: < dd > < meter min = 0 max = 10 value = 2 title = "centimeters" > 2cm</ meter >
</ dl > User agent requirements: User agents must parse the min, max, value, low, high, and optimum attributes using the rules for parsing floating-point number values.
User agents must then use all these numbers to obtain values for six points on the gauge, as follows. (The order in which these are evaluated is important, as some of the values refer to earlier ones.)
If the min attribute is specified and a value could be parsed out of it, then the minimum value is that value. Otherwise, the minimum value is zero.
If the max attribute is specified and a value could be parsed out of it, then the candidate maximum value is that value. Otherwise, the candidate maximum value is 1.0.
If the candidate maximum value is greater than or equal to the minimum value, then the maximum value is the candidate maximum value. Otherwise, the maximum value is the same as the minimum value.
If the value attribute is specified and a value could be parsed out of it, then that value is the candidate actual value. Otherwise, the candidate actual value is zero.
If the candidate actual value is less than the minimum value, then the actual value is the minimum value.
Otherwise, if the candidate actual value is greater than the maximum value, then the actual value is the maximum value.
Otherwise, the actual value is the candidate actual value.
If the low attribute is specified and a value could be parsed out of it, then the candidate low boundary is that value. Otherwise, the candidate low boundary is the same as the minimum value.
If the candidate low boundary is less than the minimum value, then the low boundary is the minimum value.
Otherwise, if the candidate low boundary is greater than the maximum value, then the low boundary is the maximum value.
Otherwise, the low boundary is the candidate low boundary.
If the high attribute is specified and a value could be parsed out of it, then the candidate high boundary is that value. Otherwise, the candidate high boundary is the same as the maximum value.
If the candidate high boundary is less than the low boundary, then the high boundary is the low boundary.
Otherwise, if the candidate high boundary is greater than the maximum value, then the high boundary is the maximum value.
Otherwise, the high boundary is the candidate high boundary.
If the optimum attribute is specified and a value could be parsed out of it, then the candidate optimum point is that value. Otherwise, the candidate optimum point is the midpoint between the minimum value and the maximum value.
If the candidate optimum point is less than the minimum value, then the optimum point is the minimum value.
Otherwise, if the candidate optimum point is greater than the maximum value, then the optimum point is the maximum value.
Otherwise, the optimum point is the candidate optimum point.
All of which will result in the following inequalities all being true:
minimum value ≤ actual value ≤ maximum value
minimum value ≤ low boundary ≤ high boundary ≤ maximum value
minimum value ≤ optimum point ≤ maximum value
UA requirements for regions of the gauge: If the optimum point is equal to the low boundary or the high boundary, or anywhere in between them, then the region between the low and high boundaries of the gauge must be treated as the optimum region, and the low and high parts, if any, must be treated as suboptimal. Otherwise, if the optimum point is less than the low boundary, then the region between the minimum value and the low boundary must be treated as the optimum region, the region from the low boundary up to the high boundary must be treated as a suboptimal region, and the remaining region must be treated as an even less good region. Finally, if the optimum point is higher than the high boundary, then the situation is reversed; the region between the high boundary and the maximum value must be treated as the optimum region, the region from the high boundary down to the low boundary must be treated as a suboptimal region, and the remaining region must be treated as an even less good region.
UA requirements for showing the gauge: When representing a meter element to the user, the UA should indicate the relative position of the actual value to the minimum and maximum values, and the relationship between the actual value and the three regions of the gauge.
次のマークアップは：
< h3 > Suggested groups</ h3 >
< menu >
< li >< a href = "?cmd=hsg" onclick = "hideSuggestedGroups()" > Hide suggested groups</ a ></ li >
</ menu >
< ul >
< li >
< p >< a href = "/group/comp.infosystems.www.authoring.stylesheets/view" > comp.infosystems.www.authoring.stylesheets</ a > -
< a href = "/group/comp.infosystems.www.authoring.stylesheets/subscribe" > join</ a ></ p >
< p > Group description: < strong > Layout/presentation on the WWW.</ strong ></ p >
< p > < meter value = "0.5" > Moderate activity,</ meter > Usenet, 618 subscribers</ p >
</ li >
< li >
< p >< a href = "/group/netscape.public.mozilla.xpinstall/view" > netscape.public.mozilla.xpinstall</ a > -
< a href = "/group/netscape.public.mozilla.xpinstall/subscribe" > join</ a ></ p >
< p > Group description: < strong > Mozilla XPInstall discussion.</ strong ></ p >
< p > < meter value = "0.25" > Low activity,</ meter > Usenet, 22 subscribers</ p >
</ li >
< li >
< p >< a href = "/group/mozilla.dev.general/view" > mozilla.dev.general</ a > -
< a href = "/group/mozilla.dev.general/subscribe" > join</ a ></ p >
< p > < meter value = "0.25" > Low activity,</ meter > Usenet, 66 subscribers</ p >
</ li >
</ ul > このようにレンダリングされるだろう：
ユーザーエージェントは、コンテキストヘルプまたは実際の値を記述するインラインテキストを提供するために、title属性と他の属性を結合してもよい。
たとえば、次の断片で：
< meter min = 0 max = 60 value = 23.2 title = seconds ></ meter > 1行目に"Value: 23.2 out of 60."、2行目に"seconds"というツールチップを伴うケージをユーザーエージェントに表示させるかもしれない。
The value IDL attribute, on getting, must return the actual value. On setting, the given value must be converted to the best representation of the number as a floating-point number and then the value content attribute must be set to that string.
The min IDL attribute, on getting, must return the minimum value. On setting, the given value must be converted to the best representation of the number as a floating-point number and then the min content attribute must be set to that string.
The max IDL attribute, on getting, must return the maximum value. On setting, the given value must be converted to the best representation of the number as a floating-point number and then the max content attribute must be set to that string.
The low IDL attribute, on getting, must return the low boundary. On setting, the given value must be converted to the best representation of the number as a floating-point number and then the low content attribute must be set to that string.
The high IDL attribute, on getting, must return the high boundary. On setting, the given value must be converted to the best representation of the number as a floating-point number and then the high content attribute must be set to that string.
The optimum IDL attribute, on getting, must return the optimum value. On setting, the given value must be converted to the best representation of the number as a floating-point number and then the optimum content attribute must be set to that string.
The labels IDL attribute provides a list of the element's labels.
次の例は、ゲージがローカライズされたまたは整形済みテキストにフォールバックする様子を示す。
< p > Disk usage: < meter min = 0 value = 170261928 max = 233257824 > 170 261 928 bytes used
out of 233 257 824 bytes available</ meter ></ p > fieldset要素Support in all current engines.
Support in all current engines.
legend要素、その後にフローコンテンツが続く。disabled — 内部のlegendを除いて、フォームコントロールが無効であるかどうかform — form要素とこの要素を関連付けるname — form.elements APIで使用する要素の名前[Exposed =Window ]
interface HTMLFieldSetElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute boolean disabled ;
readonly attribute HTMLFormElement ? form ;
[CEReactions ] attribute DOMString name ;
readonly attribute DOMString type ;
[SameObject ] readonly attribute HTMLCollection elements ;
readonly attribute boolean willValidate ;
[SameObject ] readonly attribute ValidityState validity ;
readonly attribute DOMString validationMessage ;
boolean checkValidity ();
boolean reportValidity ();
undefined setCustomValidity (DOMString error );
};fieldset要素は、選択肢でキャプションとともに、グループ化されたフォームコントロール（または他のコンテンツ）の集合を表す。キャプションは、fieldset要素の子である最初のlegend要素がもしあれば、それによって与えられる。子孫の残りの部分は、グループを形成する。
Element/fieldset#attr-disabled
Support in all current engines.
disabled属性は指定された場合、もしあれば、無効にするために、fieldset要素の所有する最初のlegend要素の子に属する子孫であるものを除き、fieldset要素の全フォームコントロールの子孫をもたらす。
次の条件のいずれかにマッチする場合にfieldset要素は無効フィールドである：
form属性は、フォームの所有者とfieldset要素を明示的に関連付けるために使用される。name属性は要素の名前を表す。
fieldset.type文字列"fieldset"を返す。
fieldset.elements要素内のフォームコントロールのHTMLCollectionを返す。
disabled IDL属性は、同じ名前のコンテンツ属性を反映しなければならない。
The type IDL attribute must return the string "fieldset".
The elements IDL attribute must return an HTMLCollection rooted at the fieldset element, whose filter matches listed elements.
The willValidate, validity, and validationMessage attributes, and the checkValidity(), reportValidity(), and setCustomValidity() methods, are part of the constraint validation API. The form and name IDL attributes are part of the element's forms API.
この例は、関連するコントロールの集合をグループ化するために使用されているfieldset要素を示す：
< fieldset >
< legend > Display</ legend >
< p >< label >< input type = radio name = c value = 0 checked > Black on White</ label >
< p >< label >< input type = radio name = c value = 1 > White on Black</ label >
< p >< label >< input type = checkbox name = g > Use grayscale</ label >
< p >< label > Enhance contrast < input type = range name = e list = contrast min = 0 max = 100 value = 0 step = 1 ></ label >
< datalist id = contrast >
< option label = Normal value = 0 >
< option label = Maximum value = 100 >
</ datalist >
</ fieldset > 次の断片は、fieldsetが有効であるかどうかを制御する、凡例内でチェックボックスを持つフィールドセットを示す。fieldset要素のコンテンツは、必須のテキストコントロールと任意の年/月コントロールで構成される。
< fieldset name = "clubfields" disabled >
< legend > < label >
< input type = checkbox name = club onchange = "form.clubfields.disabled = !checked" >
Use Club Card
</ label > </ legend >
< p >< label > Name on card: < input name = clubname required ></ label ></ p >
< p >< label > Card number: < input name = clubnum required pattern = "[-0-9]+" ></ label ></ p >
< p >< label > Expiry date: < input name = clubexp type = month ></ label ></ p >
</ fieldset > fieldset要素はまたネストできる。前のものの拡張例は次のとおり：
< fieldset name = "clubfields" disabled >
< legend > < label >
< input type = checkbox name = club onchange = "form.clubfields.disabled = !checked" >
Use Club Card
</ label > </ legend >
< p >< label > Name on card: < input name = clubname required ></ label ></ p >
< fieldset name = "numfields" >
< legend > < label >
< input type = radio checked name = clubtype onchange = "form.numfields.disabled = !checked" >
My card has numbers on it
</ label > </ legend >
< p >< label > Card number: < input name = clubnum required pattern = "[-0-9]+" ></ label ></ p >
</ fieldset >
< fieldset name = "letfields" disabled >
< legend > < label >
< input type = radio name = clubtype onchange = "form.letfields.disabled = !checked" >
My card has letters on it
</ label > </ legend >
< p >< label > Card code: < input name = clublet required pattern = "[A-Za-z]+" ></ label ></ p >
</ fieldset >
</ fieldset > この例において、外側の"Use Club Card"チェックボックスがチェックされない場合、2つのネストされたfieldsetのlegendで2つのラジオボタンを含む、外側のfieldset内部のすべては無効になる。しかし、チェックボックスがチェックされる場合、ラジオボタンが両方とも有効に設定され、有効にするよう2つの内部fieldsetのどちらが選択できるようになる。
この例は、legend要素がグループをラベル付けし、ネストされた見出し要素が文書のアウトラインでグループを表面化する、コントロールのグループ化を示している：
< fieldset >
< legend > < h2 >
How can we best reach you?
</ h2 > </ legend >
< p > < label >
< input type = radio checked name = contact_pref >
Phone
</ label > </ p >
< p > < label >
< input type = radio name = contact_pref >
テキスト
</ label > </ p >
< p > < label >
< input type = radio name = contact_pref >
Email
</ label > </ p >
</ fieldset > legend要素Support in all current engines.
Support in all current engines.
fieldset要素の最初の子として。[Exposed =Window ]
interface HTMLLegendElement : HTMLElement {
[HTMLConstructor ] constructor ();
readonly attribute HTMLFormElement ? form ;
// also has obsolete members
};legend要素は、もしあれば、legend要素の親fieldset要素に属する残りのコンテンツのキャプションを表す。
legend.form存在するならば、要素のform要素を返し、またはそうでなければnullを返す。
The form IDL attribute's behavior depends on whether the legend element is in a fieldset element or not. If the legend has a fieldset element as its parent, then the form IDL attribute must return the same value as the form IDL attribute on that fieldset element. そうでなければ、nullを返す。