Living Standard — Last Updated 12 December 2024
button
elementSupport in all current engines.
Support in all current engines.
tabindex
attribute specified.disabled
— フォームコントロールが無効であるかどうかform
— form
要素とこの要素を関連付けるformaction
— フォーム送信に使用するURLformenctype
— Entry list encoding type to use for form submissionformmethod
— フォーム送信に使用する変形formnovalidate
— フォーム送信のためのフォームコントロール検証を回避するformtarget
— Navigable for form submissionname
— フォーム送信およびform.elements
APIで使用する要素の名前popovertarget
— Targets a popover element to toggle, show, or hidepopovertargetaction
— Indicates whether a targeted popover element is to be toggled, shown, or hiddentype
— ボタンの種類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 and event's target.
form
属性は、フォームの所有者とbutton
要素を明示的に関連付けるために使用される。name
属性は要素の名前を表す。disabled
属性は、コントロールが非インタラクティブにするためおよびその値を送信するのを防ぐために使用される。The formaction
, formenctype
, formmethod
, formnovalidate
, and formtarget
attributes are attributes for form submission.
formnovalidate
属性は、制約検証をトリガーしない送信ボタンを作成するために使用することができる。
要素のtype
属性がSubmit Button状態でない場合、formaction
、formenctype
、formmethod
、formnovalidate
、formtarget
は指定されてはならない。
value
属性はフォーム送信の目的のために要素の値を与える。存在する場合、要素の値は要素のvalue
属性の値であり、そうでなければ空文字列である。
ボタン自体がフォームの送信を開始するために使用された場合、ボタン(およびその値)はフォームの送信にのみ含まれる。
value
IDL属性は、同じ名前のコンテンツ属性を反映しなければならない。
type
IDL属性は、既知の値に制限され、同じ名前のコンテンツ属性を反映しなければならない。
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
elementSupport in all current engines.
Support in all current engines.
option
, optgroup
, hr
, and script-supporting elements.autocomplete
— フォームオートフィル機能に対するヒントdisabled
— フォームコントロールが無効であるかどうかform
— form
要素とこの要素を関連付けるmultiple
— 複数の値を許可するかどうかname
— フォーム送信およびform.elements
APIで使用する要素の名前required
— コントロールがフォーム送信に要求されるかどうかsize
— コントロールのサイズmultiple
attribute or a size
attribute with a value > 1: for authors; for implementers.[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
属性は、コントロールが非インタラクティブにするためおよびその値を送信するのを防ぐために使用される。The autocomplete
attribute controls how the user agent provides autofill behavior.
disabledでないselect
要素はmutableである。
select.type
Support in all current engines.
要素がmultiple
属性を持つ場合、"select-multiple
"を返し、そうでなければ"select-one
"を返す。
select.options
Support 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.selectedOptions
HTMLSelectElement/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.
Throws a "NotAllowedError
" DOMException
if called without transient user activation.
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 >
Occasionally it can be useful to have a separator:
< 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
elementSupport 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.options
datalist
の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
elementSupport in all current engines.
Support in all current engines.
select
要素の子として。option
およびスクリプトサポート要素。optgroup
element's end tag can be omitted if the optgroup
element is immediately followed by another optgroup
element, if it is immediately followed by an hr
element, or if there is no more content in the parent element.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
elementSupport in all current engines.
Support in all current engines.
select
要素の子として。datalist
要素の子として。optgroup
要素の子として。label
属性およびvalue
属性を持つ場合:Nothing。label
属性を持つがvalue
属性を持たない場合:テキスト。label
属性を持たず、かつdatalist
要素の子でない場合:要素内の空白文字でないテキスト。label
属性を持たず、かつdatalist
要素の子である場合:テキスト。option
element's end tag can be omitted if the option
element is immediately followed by another option
element, if it is immediately followed by an optgroup
element, if it is immediately followed by an hr
element, or if there is no more content in the parent element.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.index
option.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
elementSupport in all current engines.
Support in all current engines.
autocomplete
— フォームオートフィル機能に対するヒントcols
— 行あたりの最大文字数dirname
— フォーム送信で、要素の方向を送信するために使用するフォームコントロールの名前disabled
— フォームコントロールが無効であるかどうかform
— form
要素とこの要素を関連付けるmaxlength
— Maximum length of valueminlength
— Minimum length of valuename
— フォーム送信および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
要素を明示的に関連付けるために使用される。The autocomplete
attribute controls how the user agent provides autofill behavior.
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
elementSupport in all current engines.
Support in all current engines.
for
— 出力が計算されたコントロールフォームを指定するform
— form
要素とこの要素を関連付けるname
— Name of the element to use in the 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
コンテンツ属性は、計算に参加したまたは別の方法で計算に影響を与えた値を表す、計算と要素の結果の間で作られた明示的な関係を与える。The for
attribute, if specified, must contain a string consisting of an unordered set of unique space-separated tokens, none of which are identical to another token and each of which must have the value of an ID of an element in the same tree.
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
elementSupport 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
属性を削除する。
著者はまた、進捗がレガシーユーザーエージェントのユーザーに使用可能になるよう、要素内のテキストとして現在の値と最大値をインラインで含むよう推奨される。
Here is a snippet of a web application that shows the progress of some automated task:
< 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
属性が存在する場合、ゼロより大きい値を持たなければならない。
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 label
s.
meter
elementSupport 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 label
s.
次の例は、ゲージがローカライズされたまたは整形済みテキストにフォールバックする様子を示す。
< 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
elementSupport in all current engines.
Support in all current engines.
legend
要素。disabled
— 内部のlegend
を除いて、フォームコントロールが無効であるかどうかform
— form
要素とこの要素を関連付けるname
— Name of the element to use in the 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
のどちらが選択できるようになる。
This example shows a grouping of controls where the legend
element both labels the grouping, and the nested heading element surfaces the grouping in the document outline:
< 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
elementSupport 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を返す。