1. 4.10.6 button要素
      2. 4.10.7 select要素
      3. 4.10.8 datalist要素
      4. 4.10.9 optgroup要素
      5. 4.10.10 option要素
      6. 4.10.11 textarea要素
      7. 4.10.12 output要素
      8. 4.10.13 progress要素
      9. 4.10.14 meter要素
      10. 4.10.15 fieldset要素
      11. 4.10.16 legend要素

4.10.6 button要素

カテゴリー
フローコンテンツ
フレージングコンテンツ
インタラクティブコンテンツ
リストlabelable提出可能 フォーム関連要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ、ただしインタラクティブコンテンツの子孫が存在してはならない。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
autofocus — ページが読み込まれた際にフォームコントロールに自動的にフォーカスする
disabled — フォームコントロールが無効であるかどうか
formform要素とコントロールを関連付ける
formactionフォーム送信に使用するURL
formenctypeフォーム送信に使用するエンコーディングタイプを設定するフォームデータ
formmethodフォーム送信に使用するHTTPメソッド
formnovalidateフォーム送信のためのフォームコントロール検証を回避する
formtargetフォーム送信に対するブラウジングコンテキスト
nameフォーム送信およびform.elements APIで使用するフォームコントロール名
type — ボタンの種類
valueフォーム送信に対して使用される値
DOMインターフェイス
[HTMLConstructor]
interface HTMLButtonElement : HTMLElement {
  [CEReactions] attribute boolean autofocus;
  [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();
  void setCustomValidity(DOMString error);

  readonly attribute NodeList labels;
};

button要素は要素のコンテンツによって分類されるボタンを表す

要素はボタンである。

type属性は、アクティブ時のボタンの振る舞いを制御する。この属性は列挙属性である。次の表は、キーワードと属性の状態を示す。1列目のキーワードは、キーワードと同じ行で2列目のセル内の状態に対応づける。

キーワード 状態 概要
submit Submit Button フォームを送信する。
reset Reset Button フォームをリセットする。
button Button 何もしない。

欠損値のデフォルトは、Submit Button状態である。

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's activation behavior is to run the steps defined in the following list for the current state of this element's type attribute, if this element is not disabled, and do nothing otherwise:

Submit Button

If the element has a form owner and the element's node document is fully active, the element must submit the form owner from the button element.

Reset Button

If the element has a form owner and the element's node document is fully active, the element must reset the form owner.

Button

Do nothing.

form属性は、フォームの所有者button要素を明示的に関連付けるために使用される。name属性は要素の名前を表す。disabled属性は、コントロールが非インタラクティブにするためおよびその値を送信するのを防ぐために使用される。autofocus属性はフォーカスを制御する。formactionformenctypeformmethodformnovalidateformtarget属性は、フォーム送信用の属性である。

formnovalidate属性は、制約検証をトリガーしない送信ボタンを作成するために使用することができる。

要素のtype属性がSubmit Button状態でない場合、formactionformenctypeformmethodformnovalidateformtargetは指定されてはならない。

value属性はフォーム送信の目的のために要素の値を与える。存在する場合、要素のは要素のvalue属性の値であり、そうでなければ空文字列である。

ボタン自体がフォームの送信を開始するために使用された場合、ボタン(およびその値)はフォームの送信にのみ含まれる。


value IDL属性は、同じ名前のコンテンツ属性を反映しなければならない。

typeIDL属性は、既知の値に制限され、同じ名前のコンテンツ属性を反映しなければならない。

willValidatevalidity、およびvalidationMessage IDL属性、checkValidity()reportValidity()およびsetCustomValidity()メソッドは、制約検証APIの一部である。labels IDL属性は、要素のlabelのリストを提供する。autofocusdisabledformおよびname IDL属性は要素のフォームAPIの一部である。

次のボタンは、アクティブ時に、"Show hint"のラベルをもち、ダイアログボックスがポップアップ表示される:

<button type=button
        onclick="alert('This 15-20 minute piece was composed by George Gershwin.')">
 Show hint
</button>

4.10.7 select要素

Spec bugs: 25027

カテゴリー
フローコンテンツ
フレージングコンテンツ
インタラクティブコンテンツ
リストlabelable提出可能resettable フォーム関連要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
0個以上のoptionoptgroup、およびスクリプトサポート要素。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
autocomplete — フォームオートフィル機能に対するヒント
autofocus — ページが読み込まれた際にフォームコントロールに自動的にフォーカスする
disabled — フォームコントロールが無効であるかどうか
formform要素とコントロールを関連付ける
multiple — 複数の値を許可するかどうか
nameフォーム送信およびform.elements APIで使用するフォームコントロール名
required — コントロールがフォーム送信に要求されるかどうか
size — コントロールのサイズ
DOMインターフェイス
[HTMLConstructor]
interface HTMLSelectElement : HTMLElement {
  [CEReactions] attribute DOMString autocomplete;
  [CEReactions] attribute boolean autofocus;
  [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 Element? item(unsigned long index);
  HTMLOptionElement? namedItem(DOMString name);
  [CEReactions] void add((HTMLOptionElement or HTMLOptGroupElement) element, optional (HTMLElement or long)? before = null);
  [CEReactions] void remove(); // ChildNode overload
  [CEReactions] void remove(long index);
  [CEReactions] setter void (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();
  void setCustomValidity(DOMString error);

  readonly attribute NodeList labels;
};

select要素は、オプション一式の中で選択するためのコントロールを表す。

multiple属性は真偽属性である。属性が存在する場合、select要素は、オプションのリストから0個以上のオプションを選択するためのコントロールを表す。属性が存在しない場合、select要素は、オプションのリストから1つのオプションを選択するためのコントロールを表す

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子要素で構成される。

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.

If nodes are inserted or nodes are removed causing the list of options to gain or lose one or more option elements, or if an option element in the list of options asks for a reset, then, if the select element's multiple attribute is absent, the user agent must run the first applicable set of steps from the following list:

If the select element's display size is 1, and no option elements in the select element's list of options have their selectedness set to true

Set the selectedness of the first option element in the list of options in tree order that is not disabled, if any, to true.

If two or more option elements in the select element's list of options have their selectedness set to true

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.

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 a task, using the user interaction task source, to run these steps:

  1. Fire an event named input at the select element, with the bubbles attribute initialized to true.

  2. Fire an event named change at the select element, with the bubbles attribute initialized to true.

The reset algorithm for select elements is to go through all the option elements in the element's list of options, set their selectedness to true if the option element has a selected attribute, and false otherwise, set their dirtiness to false, and then have the option elements ask for a reset.

form属性は、フォームの所有者select要素を明示的に関連付けるために使用される。name属性は要素の名前を表す。disabled属性は、コントロールが非インタラクティブにするためおよびその値を送信するのを防ぐために使用される。autofocus属性はフォーカスを制御する。autocomplete属性は、どのようにユーザーエージェントがオートフィルの振る舞いを提供するかを制御する。

disabledでないselect要素はmutableである。

select . type

要素がmultiple属性を持つ場合、"select-multiple"を返し、そうでなければ"select-one"を返す。

select . options

オプションのリストHTMLOptionsCollectionを返す。

select . length [ = value ]

オプションのリストの要素数を返す。

より小さい数に設定する場合、selectでのoption要素数は切り捨てられる。

より大きい数に設定する場合、selectに新しい空白のoption要素を追加する。

element = select . item(index)
select[index]

オプションのリストからのインデックスindexとともにアイテムを返す。アイテムはツリー順にソートされる。

element = select . namedItem(name)

オプションのリストからのIDまたはname nameとともに最初のアイテムを返す。

IDをもつ要素が見つからない場合、nullを返す。

select . add(element [, before ] )

beforeによって与えられるノードの前の要素を挿入する。

before引数は数字でもよく、その場合elementはその数字をもつアイテムの前に挿入され、またはオプションのリストからの要素でもよい。その場合elementはその要素の前に挿入される。

beforeが省略された、null、または範囲外の数字の場合、elementはリストの最後に加えられるだろう。

elementに挿入された要素が親要素である場合、このメソッドは"HierarchyRequestError" DOMExceptionを投げる。

select . selectedOptions

選択されたオプションのリストHTMLOptionsCollectionを返す。

select . selectedIndex [ = value ]

もしあるならば、最初に選ばれたアイテムのインデックスを、または選択したアイテムが存在しない場合−1を返す。

選択を変更する設定が可能である。

select . value [ = value ]

もしあれば、最初に選択されたアイテムのを返し、選択されたアイテムが存在しない場合、空文字列を返す。

選択を変更する設定が可能である。

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() method must act like its namesake method on that same options collection.

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 zero.

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.

willValidatevalidity、およびvalidationMessage IDL属性、checkValidity()reportValidity()およびsetCustomValidity()メソッドは、制約検証APIの一部である。labels IDL属性は、要素のlabelのリストを提供する。autofocusdisabledformおよびname IDL属性は要素のフォーム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つ以上の項目を選択する必要がある。次の例はそのようなインターフェイスを示す。

<p>Select the songs from that you would like on your Act II Mix Tape:</p>
<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>

4.10.8 datalist要素

Support: datalistChrome for Android 59+Chrome (limited) 20+Firefox (limited) 4+IE (limited) 10+Samsung Internet 4+Opera Mini NoneEdge (limited) 12+Android Browser (limited) 56+Opera (limited) 15+

Source: caniuse.com

カテゴリー
フローコンテンツ
フレージングコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
いずれか:フレージングコンテンツ
または:0個以上のoptionおよびスクリプトサポート要素。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
[HTMLConstructor]
interface HTMLDataListElement : HTMLElement {
  [SameObject] readonly attribute HTMLCollection options;
};

datalist要素は、他のコントロール用にあらかじめ定義されたオプションを表すoption要素のセットを表す。レンダリングにおいて、datalist要素は何もないことを表し、子と一緒に非表示にされるべきである。

datalist要素は2つの方法で使用される。最も単純な場合、datalist要素はoption要素の子のみを持つ。

<label>
 Sex:
 <input name=sex list=sexes>
 <datalist id=sexes>
  <option value="Female">
  <option value="Male">
 </datalist>
</label>

より手の込んだ場合、datalist要素はdatalistをサポートしないダウンレベルクライアントに対して表示されるコンテンツを与えられる。この場合、option要素はdatalist要素の内側のselect要素の内側で提供される。

<label>
 Sex:
 <input name=sex list=sexes>
</label>
<datalist id=sexes>
 <label>
  or select from the list:
  <select name=sex>
   <option value="">
   <option>Female
   <option>Male
  </select>
 </label>
</datalist>

datalist要素はinput要素でlist属性を使用するinput要素に接続される。

そのが空文字列でない文字列である、無効でない、datalist要素の子孫である各option要素は、提案を表す。各提案は、ラベルを持つ。

datalist . options

datalistoption要素の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.

4.10.9 optgroup要素

カテゴリー
なし。
この要素を使用できるコンテキスト
select要素の子として。
コンテンツモデル
0個以上のoptionおよびスクリプトサポート要素。
text/htmlにおけるタグ省略
optgroup要素が別のoptgroup要素の直前に存在する場合、または親要素に追加のコンテンツが存在しない場合、optgroup要素の終了タグは省略することができる。
コンテンツ属性
グローバル属性
disabled — フォームコントロールが無効であるかどうか
label — ユーザー可視ラベル
DOMインターフェイス
[HTMLConstructor]
interface HTMLOptGroupElement : HTMLElement {
  [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.

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 Magnestism">
    <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>

4.10.10 option要素

カテゴリー
なし。
この要素を使用できるコンテキスト
select要素の子として。
datalist要素の子として。
optgroup要素の子として。
コンテンツモデル
要素がlabel属性およびvalue属性を持つ場合:Nothing
要素がlabel属性を持つがvalue属性を持たない場合:テキスト
要素がlabel属性を持たず、かつdatalist要素の子でない場合:要素内の空白文字でないテキスト
要素がlabel属性を持たず、かつdatalist要素の子である場合:テキスト
text/htmlにおけるタグ省略
option要素が別のoption要素またはoptgroup要素の直前に存在する場合、または親要素に追加のコンテンツが存在しない場合、option要素の終了タグは省略することができる。
コンテンツ属性
グローバル属性
disabled — フォームコントロールが無効であるかどうか
label — ユーザー可視ラベル
selected — デフォルトでオプションが選択されるかどうか
valueフォーム送信に対して使用される値
DOMインターフェイス
[HTMLConstructor, NamedConstructor=Option(optional DOMString text = "", optional DOMString value, optional boolean defaultSelected = false, optional boolean selected = false)]
interface HTMLOptionElement : HTMLElement {
  [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コントロールのラベルを表す。

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属性は、その要素の値を提供する。属性が存在する場合、optionvalueコンテンツ属性の値であり、存在しない場合、要素の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

そのselect要素のoptionsリストで要素のインデックスを返す。

option . form

存在するならば、要素のform要素を返し、またはそうでなければnullを返す。

option . text

スペースが相殺されscript要素がスキップされる場合を除き、textContentと同じ。

option = new Option( [ text [, value [, defaultSelected [, selected ] ] ] ] )

新しい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.

On setting, the text attribute must act as if the textContent IDL attribute on the element had been set to the new value.

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 constructor 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 constructor must perform the following steps:

  1. Let document be the current global object's associated Document.

  2. Let option be the result of creating an element given document, option, and the HTML namespace.

  3. If text is not the empty string, then append to option a new Text node whose data is text.

  4. If value is given, then set an attribute value for option using "value" and value.

  5. If defaultSelected is true, then set an attribute value for option using "selected" and the empty string.

  6. If selected is true, then set option's selectedness to true; otherwise set its selectedness to false (even if defaultSelected is true).

  7. Return option.

4.10.11 textarea要素

Spec bugs: 15291

カテゴリー
フローコンテンツ
フレージングコンテンツ
インタラクティブコンテンツ
リストlabelable提出可能resettable フォーム関連要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
Text
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
autocomplete — フォームオートフィル機能に対するヒント
autofocus — ページが読み込まれた際にフォームコントロールに自動的にフォーカスする
cols — 行あたりの最大文字数
dirnameフォーム送信で、要素の方向を送信するために使用するフォームコントロールの名前
disabled — フォームコントロールが無効であるかどうか
formform要素とコントロールを関連付ける
inputmode — 入力モダリティーを選択するためのヒント
maxlength — 値の最大長さ
minlength — 値の最小長さ
nameフォーム送信およびform.elements APIで使用するフォームコントロール名
placeholder — フォームコントロール内に配置されるユーザー可視ラベル
readonly — ユーザーによって編集される値を許可するかどうか
required — コントロールがフォーム送信に要求されるかどうか
rows — 表示する行数
wrap — どのようにフォームコントロール値がフォーム送信に対して包まれるか
DOMインターフェイス
[HTMLConstructor]
interface HTMLTextAreaElement : HTMLElement {
  [CEReactions] attribute DOMString autocomplete;
  [CEReactions] attribute boolean autofocus;
  [CEReactions] attribute unsigned long cols;
  [CEReactions] attribute DOMString dirName;
  [CEReactions] attribute boolean disabled;
  readonly attribute HTMLFormElement? form;
  [CEReactions] attribute DOMString inputMode;
  [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;
  [CEReactions] attribute [TreatNullAs=EmptyString] DOMString value;
  readonly attribute unsigned long textLength;

  readonly attribute boolean willValidate;
  readonly attribute ValidityState validity;
  readonly attribute DOMString validationMessage;
  boolean checkValidity();
  boolean reportValidity();
  void setCustomValidity(DOMString error);

  readonly attribute NodeList labels;

  void select();
  attribute unsigned long selectionStart;
  attribute unsigned long selectionEnd;
  attribute DOMString selectionDirection;
  void setRangeText(DOMString replacement);
  void setRangeText(DOMString replacement, unsigned long start, unsigned long end, optional SelectionMode selectionMode = "preserve");
  void 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" ] &amp;&amp; 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 a task to fire an event named input at the textarea element, with the bubbles attribute 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 child text content change 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 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:

  1. 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.

  2. Queue a task to fire an event named input at the textarea element, with the bubbles attribute 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.

wrap属性は、2つのキーワードと状態をもつ真偽属性である。softキーワードはSoft状態に対応し、hardキーワードはHard状態に対応する。欠損値のデフォルトは、Soft状態である。

Soft状態は、テキストが送信される際、(レンダリングにおいてテキストが依然として包まれることはできるが)textareaでテキストが包まれないことを示す。

Hard状態は、textareaでテキストがユーザーエージェントによって追加される改行を持つので、テキストが送信される際にテキストが包まれることを示す。

要素の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 so that line breaks use U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) character pairs, 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 the textarea line break normalization transformation applied. The textarea line break normalization transformation is the following algorithm, as applied to a string:

  1. Replace every U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) character pair with a single U+000A LINE FEED (LF) character.

  2. Replace every remaining U+000D CARRIAGE RETURN character with a single U+000A LINE FEED (LF) character.

The element's value is defined to be the element's raw value with the textarea wrapping transformation applied. The textarea wrapping transformation is the following algorithm, as applied to a string:

  1. Replace every occurrence of a U+000D CARRIAGE RETURN (CR) character not followed by a U+000A LINE FEED (LF) character, and every occurrence of a U+000A LINE FEED (LF) character not preceded by a U+000D CARRIAGE RETURN (CR) character, by a two-character string consisting of a U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) character pair.

  2. If the element's wrap attribute is in the Hard state, insert U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) character pairs into the string using a UA-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+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) character pairs.

maxlength属性は、フォームコントロールmaxlength属性である。

If the textarea element has a maximum allowed value length, then the element's children must be such that the JavaScript string length of the value of the element's textContent IDL attribute with the textarea line break normalization transformation applied is equal to or less than 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.

name属性は要素の名前を表す。dirname属性は、要素の方向がどのように送信されるかを制御する。disabled属性は、コントロールが非インタラクティブにするためおよびその値を送信するのを防ぐために使用される。form属性は、フォーム所有者textarea要素を明示的に関連付けるために使用される。autofocus属性はフォーカスを制御する。inputmode属性はコントロールに対するユーザーインターフェイスの入力モダリティを制御する。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 non-negative numbers greater than zero 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 inputMode IDL attribute must reflect the inputmode content attribute, limited to only known values. 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 IDL attribute must, on getting, return the element's child text content. On setting, it must act as the setter for the element's textContent IDL attribute.

The value IDL attribute must, on getting, return the element's API value. On setting, it must perform the following steps:

  1. Let oldAPIValue be this element's API value.

  2. Set this element's raw value to the new value.

  3. Set this element's dirty value flag to true.

  4. 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 JavaScript string length of the element's API value.

willValidatevalidity、および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 autofocus, 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>

4.10.12 output要素

カテゴリー
フローコンテンツ
フレージングコンテンツ
リストlabelableresettableフォーム関連要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
for — 出力が計算されたコントロールフォームを指定する
formform要素とコントロールを関連付ける
nameform.elements APIで使用するフォームコントロール名
DOMインターフェイス
[HTMLConstructor]
interface HTMLOutputElement : HTMLElement {
  [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();
  void setCustomValidity(DOMString error);

  readonly attribute NodeList labels;
};

output要素は、アプリケーションによって実行された計算の結果、またはユーザーアクションの結果を表す

この要素は、前もって実行した他のプログラムの出力を引用するための適切な要素である、samp要素と対比することができる。

forコンテンツ属性は、計算に参加したまたは別の方法で計算に影響を与えた値を表す、計算と要素の結果の間で作られた明示的な関係を与える。for属性を指定する場合は、それぞれが同じツリーで要素のIDの値を持たなければならない、大文字・小文字区別である一意なスペース区切りトークンの順不同のセットで構成される文字列を含まなければならない。

form属性は、フォームの所有者output要素を明示的に関連付けるために使用される。name属性は要素の名前を表す。output要素はフォームに関連付けられ、その結果フォームコントロールのイベントハンドラーからより容易に参照することができる。フォームが送信される際に、要素の値自身は送信されない。

The element has a value mode flag which is either value or default. Initially, the value mode flag must be set to default.

The element also has a default value. Initially, the default value must be the empty string.

When the value mode flag is in mode default, the contents of the element represent both the value of the element and its default value. When the value mode flag is in mode value, the contents of the element represent the value of the element only, and the default value is only accessible using the defaultValue IDL attribute.

Whenever the element's descendants are changed in any way, if the value mode flag is in mode default, the element's default value must be set to the value of the element's textContent IDL attribute.

The reset algorithm for output elements is to set the element's value mode flag to default and then to set the element's textContent IDL attribute to the value of the element's default value (thus replacing the element's child nodes).

output . value [ = value ]

要素の現在の値を返す。

値を変更する設定が可能である。

output . defaultValue [ = value ]

要素の現在のデフォルト値を返す。

デフォルト値を変更する設定が可能である。

output . type

文字列"output"を返す。

The value IDL attribute must act like the element's textContent IDL attribute, except that on setting, in addition, before the child nodes are changed, the element's value mode flag must be set to value.

The defaultValue IDL attribute, on getting, must return the element's default value. On setting, the attribute must set the element's default value, and, if the element's value mode flag is in the mode default, set the element's textContent IDL attribute as well.

The type attribute must return the string "output".

htmlFor IDL属性は、forコンテンツ属性を反映しなければならない。

willValidatevalidity、および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 name=a type=number step=any> +
 <input name=b type=number step=any> =
 <output name=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>

4.10.13 progress要素

Support: progressChrome for Android 59+Chrome 8+UC Browser for Android 11.4+iOS Safari (limited) 7.0+Firefox 6+IE 10+Samsung Internet 4+Opera Mini all+Safari 6+Edge 12+Android Browser 4.4+Opera 11+

Source: caniuse.com

カテゴリー
フローコンテンツ
フレージングコンテンツ
ラベル付け可能要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ、ただしprogress要素の子孫が存在してはならない。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
value — 要素の現在値
max — 範囲の上限
DOMインターフェイス
[HTMLConstructor]
interface HTMLProgressElement : HTMLElement {
  [CEReactions] attribute double value;
  [CEReactions] attribute double max;
  readonly attribute double position;
  readonly attribute NodeList labels;
};

progress要素は、タスクの完了の進捗を表す。進捗は、進捗が進行しているが(たとえば、タスクが応答するリモートホストを待っているためなど)タスクが完了する前にどの程度作業が残っているのかが明らかでないことを指す不確定であるか、進捗がこれまでに完了している作業率を与える0から最大の範囲における数値であるかのいずれかである。

要素によって表される現行のタスク完了を決定する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属性が存在する場合、妥当な浮動小数点数の値を持たなければならない。value属性が存在する場合、0個以上の値をもたなければならず、かつ存在する場合max属性の値以下を持たなければならない。そうでなければ1.0でなければならない。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 if the parsed value is less than the maximum value and greater than zero, then the current value of the progress bar is that parsed value. Otherwise, if the parsed value was greater than or equal to the maximum value, then the current value of the progress bar is the maximum value of the progress bar. Otherwise, if parsing the value attribute's value resulted in an error, or a number less than or equal to zero, then the current value of the progress bar is zero.

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 numbers greater than zero. The default value for max is 1.0.

The labels IDL attribute provides a list of the element's labels.

4.10.14 meter要素

Support: meterChrome for Android 59+Chrome 8+UC Browser for Android 11.4+iOS Safari 10.3+Firefox 16+IE NoneSamsung Internet 4+Opera Mini all+Safari 6+Edge 13+Android Browser 4.4+Opera 11+

Source: caniuse.com

カテゴリー
フローコンテンツ
フレージングコンテンツ
ラベル付け可能要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ、ただしmeter要素の子孫が存在してはならない。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
value — 要素の現在値
min — 範囲の下限
max — 範囲の上限
low — 低域の上限
high — 高域の下限
optimum — ゲージにおける最適値
DOMインターフェイス
[HTMLConstructor]
interface HTMLMeterElement : HTMLElement {
  [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つの属性がある。

min属性は範囲の下限を指定し、max属性は上限を指定する。value属性は、"測定された"値として示すゲージを持つ値を指定する。

他の3つの属性は、"最適"部分であるゲージの一部を示すために、ゲージの範囲を"低"、"中"、"高"の部分に分割して使用できる。low属性は"低"部分であると考えられる範囲を指定し、high属性は"高"部分であると考えられる範囲を指定する。optimumは、"最適"である位置を与える。それが"高"値より高い場合、より高い値がより良いことを示し、それが"低"マークよりも低い場合、より低い値がより良いことを示す。自然に間にある場合、高くも低くもない値が良いことを示す。

オーサリング要件value属性が指定されなければならない。valueminlowhighmax、およびoptimum属性が存在する場合、妥当な浮動小数点数の値を持たなければならない。

加えて、属性値はさらに制約される:

valuevalue属性の数とする。

min属性が指定される場合、minimumをその属性値とする。そうでなければ0とする。

max属性が指定される場合、maximumをその属性値とする。そうでなければ1.0とする。

次の不等式は、必要に応じて保持しなければならない:

最小または最大を指定しない場合、範囲は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.)

The minimum value

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.

The maximum value

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.

The actual 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.

The low boundary

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.

The high 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.

The optimum point

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:

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>

このようにレンダリングされるだろう:

With the <meter> elements rendered as inline green bars of varying lengths.

ユーザーエージェントは、コンテキストヘルプまたは実際の値を記述するインラインテキストを提供するために、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>

4.10.15 fieldset要素

Spec bugs: 25551

カテゴリー
フローコンテンツ
セクショニングルート
リストフォーム関連要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フローコンテンツの後に続く、任意でlegend要素。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
disabled — フォームコントロールが無効であるかどうか
formform要素とコントロールを関連付ける
nameform.elements APIで使用するフォームコントロール名
DOMインターフェイス
[HTMLConstructor]
interface HTMLFieldSetElement : HTMLElement {
  [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();
  void setCustomValidity(DOMString error);
};

fieldset要素は、任意で共通の名前の下にグループ化されたフォームコントロールのセットを表す

グループの名前がもしあれば、fieldset要素の子である最初のlegend要素によって与えられる。子孫の残りの部分は、グループを形成する。

disabled属性は指定された場合、もしあれば、無効にするために、fieldset要素の所有する最初のlegend要素の子に属する子孫であるものを除き、fieldset要素の全フォームコントロールの子孫をもたらす。

Support: fieldset-disabledChrome for Android 59+Chrome 20+UC Browser for Android 11.4+iOS Safari 6.0+Firefox 4+IE (limited) 6+Samsung Internet 4+Opera Mini (limited) all+Safari 6+Edge 12+Android Browser 4.4+Opera 10.0+

Source: caniuse.com

次の条件のいずれかにマッチする場合に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のどちらが選択できるようになる。

4.10.16 legend要素

カテゴリー
なし。
この要素を使用できるコンテキスト
fieldset要素の最初の子として。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
[HTMLConstructor]
interface HTMLLegendElement : HTMLElement {
  readonly attribute HTMLFormElement? form;
};

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を返す。