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要素

Element/button

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera15+Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android14+
カテゴリー
フローコンテンツ
フレージングコンテンツ
インタラクティブコンテンツ
記載ラベル付け可能送信可能、および自動大文字化継承 フォームに関連付けられた要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツであるが、インタラクティブコンテンツの子孫およびtabindex属性が指定された子孫が存在してはならない。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
disabled — フォームコントロールが無効であるかどうか
formform要素とこの要素を関連付ける
formactionフォーム送信に使用するURL
formenctypeフォーム送信に使用するエントリーリストのエンコーディングタイプ
formmethodフォーム送信に使用する変形
formnovalidateフォーム送信のためのフォームコントロール検証を回避する
formtargetフォーム送信に対するナビゲート可能
nameフォーム送信およびform.elements APIで使用する要素の名前
popovertarget — ポップオーバー要素を切り替え、表示、または非表示にするターゲットとする
popovertargetaction — ターゲットのポップオーバー要素を切り替える、表示する、またじゃ非表示にするかを示す
type — ボタンの種類
valueフォーム送信に対して使用される値
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLButtonElementを使用する。

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

要素はボタンである。

type属性は、アクティブにされたときのボタンの振る舞いを制御する。It is an enumerated attribute with the following keywords and states:

キーワード状態概要
submitSubmit Buttonフォームを送信する。
resetReset Buttonフォームをリセットする。
buttonButton何もしない。

The attribute's missing value default and invalid value default are both the Submit Button state.

type属性がSubmit Button状態にある場合、要素は具体的にsubmit buttonである。

form属性は、フォームの所有者button要素を明示的に関連付けるために使用される。name属性は要素の名前を表す。disabled属性は、コントロールが非対話的にするためおよびその値を送信するのを防ぐために使用される。formactionformenctypeformmethodformnovalidateおよびformtarget属性は、フォーム送信用の属性である。

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

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

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

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


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

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

4.10.7 select要素

Element/select

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera2+Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android10.1+
カテゴリー
フローコンテンツ
フレージングコンテンツ
インタラクティブコンテンツ
記載ラベル付け可能送信可能リセット可能および自動大文字化継承 フォームに関連付けられた要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
0個以上のoptionoptgrouphrおよびスクリプトサポート要素。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
autocomplete — フォームオートフィル機能に対するヒント
disabled — フォームコントロールが無効であるかどうか
formform要素とこの要素を関連付ける
multiple — 複数の値を許可するかどうか
nameフォーム送信およびform.elements APIで使用する要素の名前
required — コントロールがフォーム送信に要求されるかどうか
size — コントロールのサイズ
アクセシビリティの考慮
要素がmultiple属性を持つ、または1より大きい値をもつsizeを持つ場合:著者向け実装者向け
そうでなければ:著者向け実装者向け
DOMインターフェイス
HTMLSelectElementを使用する。

select要素は、選択肢の集合の中で選択するためのコントロールを表す。

Attributes/multiple

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

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

Attributes/size

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

size属性は、ユーザーに表示するための選択肢の数を与える。size属性が指定される場合、0より大きい妥当な負でない整数である値を持たなければならない。

select要素の選択肢のリストは、ツリー順で、select要素のすべてのoption子要素、およびselect要素のすべてのoptgroup要素に属するすべてのoption子要素で構成される。

Attributes/required

Support in all current engines.

Firefox4+Safari5.1+Chrome10+
Opera?Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

required属性は真偽属性である。指定される場合、ユーザーがフォームを送信する前に値を選択する必要がある。

select要素がrequired属性を指定され、multiple属性を指定されず、1である表示サイズを持つ場合、および(もしあれば)select要素の選択肢のリストで最初のoptionが空文字列であり、そのoption要素の親ノードがselect要素(かつoptgroup要素でない)場合、そのoptionは、select要素のプレースホルダーのラベルオプションである。

select要素がrequired属性を指定され、multiple属性を指定されず、1である表示サイズを持つ場合、そのselect要素は、プレースホルダーのラベルオプションを持たなければならない。

実際には、上の段落で述べた要件は、select要素が1より大きい値をもつsize属性を持たない場合にのみ適用することができる。

form属性は、フォームの所有者select要素を明示的に関連付けるために使用される。name属性は要素の名前を表す。disabled属性は、コントロールが非対話的にするためおよびその値を送信するのを防ぐために使用される。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 ]

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

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

select.showPicker()

Shows any applicable picker UI for select, so that the user can select a value.

Throws an "InvalidStateError" DOMException if select is not mutable.

一時的なユーザーアクティベーションなしで呼び出された場合、"NotAllowedError" DOMException を投げる。

Throws a "SecurityError" DOMException if select is inside a cross-origin iframe.

Throws a "NotSupportedError" DOMException if select is not being rendered.

選択肢の集合からユーザーが1つの選択肢を選択できるselect要素が使用される様子を次に示す。デフォルトの選択肢はあらかじめ選択されている。

<p>
 <label for="unittype">Select unit type:</label>
 <select id="unittype" name="unittype">
  <option value="1"> Miner </option>
  <option value="2"> Puffer </option>
  <option value="3" selected> Snipey </option>
  <option value="4"> Max </option>
  <option value="5"> Firebot </option>
 </select>
</p>

デフォルトの選択肢が存在しない場合、プレースホルダーが代わりに使用される:

<select name="unittype" required>
 <option value=""> Select unit type </option>
 <option value="1"> Miner </option>
 <option value="2"> Puffer </option>
 <option value="3"> Snipey </option>
 <option value="4"> Max </option>
 <option value="5"> Firebot </option>
</select>

ここでは、ユーザーが選択肢の集合から任意の数を選択できる。デフォルトで、5つすべての選択肢が選択されている。

<p>
 <label for="allowedunits">Select unit types to enable on this map:</label>
 <select id="allowedunits" name="allowedunits" multiple>
  <option value="1" selected> Miner </option>
  <option value="2" selected> Puffer </option>
  <option value="3" selected> Snipey </option>
  <option value="4" selected> Max </option>
  <option value="5" selected> Firebot </option>
 </select>
</p>

ときには、ユーザーは1つ以上の項目を選択する必要がある。次の例はそのようなインターフェイスを示す。

<label>
 Select the songs from that you would like on your Act II Mix Tape:
 <select multiple required name="act2">
  <option value="s1">It Sucks to Be Me (Reprise)
  <option value="s2">There is Life Outside Your Apartment
  <option value="s3">The More You Ruv Someone
  <option value="s4">Schadenfreude
  <option value="s5">I Wish I Could Go Back to College
  <option value="s6">The Money Song
  <option value="s7">School for Monsters
  <option value="s8">The Money Song (Reprise)
  <option value="s9">There's a Fine, Fine Line (Reprise)
  <option value="s10">What Do You Do With a B.A. in English? (Reprise)
  <option value="s11">For Now
 </select>
</label>

セパレーターを使用すると便利な場合がある:

<label>
 Select the song to play next:
 <select required name="next">
  <option value="sr">Random
  <hr>
  <option value="s1">It Sucks to Be Me (Reprise)
  <option value="s2">There is Life Outside Your Apartment
  …

4.10.8 datalist要素

Element/datalist

Firefox🔰 4+Safari12.1+Chrome20+
Opera9.5+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android🔰 79+Safari iOS?Chrome Android33+WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
フレージングコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
いずれか:フレージングコンテンツ
または:0個以上のoptionおよびスクリプトサポート要素。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLDataListElementを使用する。

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

datalistoption要素のHTMLCollectionを返す。

4.10.9 optgroup要素

Element/optgroup

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
なし。
この要素を使用できるコンテキスト
select要素の子として。
コンテンツモデル
0個以上のoptionおよびスクリプトサポート要素。
text/htmlにおけるタグ省略
optgroup要素の直後に別のoptgroup要素が続く場合、その直後にhr要素が続く場合、または親要素にコンテンツがない場合、optgroup要素の終了タグは省略することができる。
コンテンツ属性
グローバル属性
disabled — フォームコントロールが無効であるかどうか
label — ユーザー可視ラベル
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLOptGroupElementを使用する。

optgroup要素は、共通のラベルをもつoption要素のグループを表す

option要素の要素のグループは、optgroup要素の子であるoption要素で構成する。

Attributes/disabled

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet Explorer8+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

disabled属性は真偽属性であり、一緒にoption要素のグループを無効にするために使用できる。

label属性を指定しなければならない。その値は、ユーザーインターフェイスの目的に対して、グループの名前を与える。

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>

4.10.10 option要素

Element/option

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
なし。
この要素を使用できるコンテキスト
select要素の子として。
datalist要素の子として。
optgroup要素の子として。
コンテンツモデル
要素がlabel属性およびvalue属性を持つ場合:Nothing
要素がlabel属性を持つがvalue属性を持たない場合:テキスト
要素がlabel属性を持たず、かつdatalist要素の子でない場合:要素間の空白文字でないテキスト
要素がlabel属性を持たず、かつdatalist要素の子である場合:テキスト
text/htmlにおけるタグ省略
option要素の直後に別のoption要素が続く場合、optgroup要素が続く場合、hr要素が続く場合、または親要素にコンテンツがない場合、option要素の終了タグは省略することができる。
コンテンツ属性
グローバル属性
disabled — フォームコントロールが無効であるかどうか
label — ユーザー可視ラベル
selected — デフォルトで選択肢が選択されるかどうか
valueフォーム送信に対して使用される値
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLOptionElementを使用する。

option要素は、select要素でまたはdatalist要素で提案のリストの一部として選択肢を表す

selectの定義で記載されるある特定の状況において、option要素は、select要素のプレースホルダーのラベルオプションとなることができる。プレースホルダーのラベルオプションは、実際の選択肢を表さないが、selectコントロールのラベルを表す。

Attributes/disabled

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

disabled属性は、真偽属性である。要素のdisabled属性が存在する場合、またはdisabled属性であるoptgroup要素の子が存在する場合、option要素は無効である。

label属性は、要素のラベルを提供する。属性が存在しかつその値が空文字列でない場合、optionラベルlabelコンテンツ属性の値であり、そうでなければ、要素のtext IDL属性の値となる。

labelコンテンツ属性が指定される場合、空であってはならない。

value属性は、その要素の値を提供する。属性が存在する場合、optionvalueコンテンツ属性の値であり、存在しない場合、要素のtext IDL属性の値となる。

selected属性は、真偽属性である。これは、要素のデフォルトselectednessを表す。

multiple属性が指定されないselect要素は、そのselected属性設定を持つ複数の子孫option要素を持ってはならない。

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であっても、要素は選択されない。

4.10.11 textarea要素

Element/textarea

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
カテゴリー
フローコンテンツ
フレージングコンテンツ
インタラクティブコンテンツ
記載ラベル付け可能送信可能リセット可能および自動大文字化継承 フォームに関連付けられた要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
Text
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
autocomplete — フォームオートフィル機能に対するヒント
cols — 行あたりの最大文字数
dirnameフォーム送信で、要素の方向を送信するために使用するフォームコントロールの名前
disabled — フォームコントロールが無効であるかどうか
formform要素とこの要素を関連付ける
maxlength — 値の最大長さ
minlength — 値の最小長さ
nameフォーム送信およびform.elements APIで使用する要素の名前
placeholder — フォームコントロール内に配置されるユーザー可視ラベル
readonly — ユーザーによって編集される値を許可するかどうか
required — コントロールがフォーム送信に要求されるかどうか
rows — 表示する行数
wrap — どのようにフォームコントロール値がフォーム送信に対して包まれるか
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLTextAreaElementを使用する。

textarea要素は、複数行のプレーンテキスト編集コントロールを表す。コントロールのコンテンツは、コントロールのデフォルトの値を表す。

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>

cols属性は行あたりの予想最大文字数を指定する。cols属性が指定される場合、その値は0より大きい妥当な非負整数でなければならない。

rows属性は、表示する行数を指定する。rows属性が指定される場合、その値は0より大きい妥当な非負整数でなければならない。

The wrap attribute is an enumerated attribute with the following keywords and states:

キーワード状態概要
softSoftText is not to be wrapped when submitted (though can still be wrapped in the rendering).
hardHardText 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属性を指定しなければならない。

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属性は真偽属性である。指定される場合、ユーザーがフォームを送信する前に値を入力する必要がある。

コントロールが値を持たない場合、placeholder属性は、データ入力を伴うユーザーの支援を意図する短いヒント(単語や短いフレーズ)を表す。ヒントは、サンプル値または期待された形式の簡単な説明かもしれない。

placeholder属性は、labelの代替として使用すべきでない。より長いヒントまたは他の助言テキストの場合、title属性がより適切である。

このメカニズムは非常に似ているが微妙に異なる:コントロールのlabelによって与えられるヒントは毎回表示され、placeholder属性に与えられた短いヒントはユーザーが値を入力する前にのみ表示され、ユーザーが詳細なヘルプを要求するときにtitle属性におけるヒントは表示される。

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

textarea.type

文字列"textarea"を返す。

textarea.value

要素の現在の値を返す。

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

ここで、フォームで無制限の自由形式のテキスト入力に対して使用される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要素

Element/output

Support in all current engines.

Firefox4+Safari7+Chrome10+
Opera11+Edge79+
Edge (Legacy)18Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11+
カテゴリー
フローコンテンツ
フレージングコンテンツ
記載ラベル付け可能リセット可能および自動大文字化継承 フォームに関連付けられた要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
for — 出力が計算されたコントロールフォームを指定する
formform要素とこの要素を関連付ける
nameform.elements APIで使用する要素の名前
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLOutputElementを使用する。

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

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

Attributes/for

Support in all current engines.

Firefox4+Safari7+Chrome10+
Opera11+Edge79+
Edge (Legacy)18Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11+

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

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

output.value [ = value ]

要素の現在の値を返す。

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

output.defaultValue [ = value ]

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

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

output.type

文字列"output"を返す。

シンプルな電卓は、計算結果の表示に対して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>

4.10.13 progress要素

Element/progress

Support in all current engines.

Firefox6+Safari6+Chrome6+
Opera11+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android11+
カテゴリー
フローコンテンツ
フレージングコンテンツ
ラベル付け可能要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ、ただしprogress要素の子孫が存在してはならない。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
value — 要素の現在値
max — 範囲の上限
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLProgressElementを使用する。

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

Attributes/max

Support in all current engines.

Firefox6+Safari6+Chrome6+
Opera11+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android11+

要素によって表される現行のタスク完了を決定する2つの属性がある。value属性はどの程度タスクが完了しているかを指定し、max属性は、タスクが合計でどの程度のタスクが必要かを指定する。単位は任意であり、指定されない。

有限の進捗バーを作成するためには、現在の進行状況(max属性が指定されている場合は0.0〜1.0の数、または0からmax属性値までの数のいずれか)でvalue属性を追加する。無限の進捗バーを作成するためには、value属性を削除する。

著者はまた、進捗がレガシーユーザーエージェントのユーザーに使用可能になるよう、要素内のテキストとして現在の値と最大値をインラインで含むよう推奨される。

これは自動進行状況を表示するウェブアプリケーションの断片である:

<section>
 <h2>Task Progress</h2>
 <p>Progress: <progress id=p max=100><span>0</span>%</progress></p>
 <script>
  var progressBar = document.getElementById('p');
  function updateProgress(newValue) {
    progressBar.value = newValue;
    progressBar.getElementsByTagName('span')[0].textContent = newValue;
  }
 </script>
</section>

(この例においてupdateProgress()メソッドは、タスクが進行するにつれて、実際の進捗バーを更新するためにページに他のコードによって呼び出される。)

valueおよびmax属性が存在する場合、妥当な浮動小数点数の値を持たなければならない。The value attribute, if present, must have a value greater than or equal to zero, and less than or equal to the value of the max attribute, if present, or 1.0, otherwise. max属性が存在する場合、0より大きい値を持たなければならない。

progress要素は、タスクの進行状況とは対照的に、適切なゲージである何かのために使用する間違った要素である。たとえば、progressを使用してディスク領域の使用状況を示すことは不適切であろう。代わりに、meter要素は、このようなユースケースで利用可能である。

progress.position

有限の進捗バー(既知の現在値と最大値を持つもの)について、最大値で現在値を除算した結果を返す。

無限の進捗バーは、-1を返す。

4.10.14 meter要素

Element/meter

Support in all current engines.

Firefox16+Safari6+Chrome6+
Opera11+Edge79+
Edge (Legacy)18Internet ExplorerNo
Firefox Android?Safari iOS10.3+Chrome Android?WebView AndroidNoSamsung Internet?Opera Android11+
カテゴリー
フローコンテンツ
フレージングコンテンツ
ラベル付け可能要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ、ただしmeter要素の子孫が存在してはならない。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
value — 要素の現在値
min — 範囲の下限
max — 範囲の上限
low — 低域の上限
high — 高域の下限
optimum — ゲージにおける最適値
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLMeterElementを使用する。

meter要素は既知の範囲内でスカラー量、または小数の値を表す。たとえば、ディスク使用量、クエリー結果の関連性、または特定の候補を選択するための投票人口の割合などである。

これはまた、ゲージとして知られる。

meter要素は、(進捗バーのように)進行状況を示すために使用すべきでない。その役割に対して、HTMLは独立してprogress要素を提供する。

meter要素はまた、任意の範囲のスカラー値を表すものでない―たとえば、既知の最大値が存在しない限り、重量、高さを報告するためにこれを使用することは誤りであろう。

要素によって表されるゲージのセマンティックスを決定する6つの属性がある。

Attributes/max

Support in all current engines.

Firefox16+Safari6+Chrome6+
Opera11+Edge79+
Edge (Legacy)18Internet ExplorerNo
Firefox Android?Safari iOS10.3+Chrome Android?WebView AndroidNoSamsung Internet?Opera Android11+

Attributes/min

Support in all current engines.

Firefox16+Safari6+Chrome6+
Opera11+Edge79+
Edge (Legacy)18Internet ExplorerNo
Firefox Android?Safari iOS10.3+Chrome Android?WebView AndroidNoSamsung Internet?Opera Android11+

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>

次のマークアップは:

<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"というツールチップを伴うケージをユーザーエージェントに表示させるかもしれない。

次の例は、ゲージがローカライズされたまたは整形済みテキストにフォールバックする様子を示す。

<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要素

Element/fieldset

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera15+Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android14+
カテゴリー
フローコンテンツ
記載および自動大文字化継承フォームに関連付けられた要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
任意でlegend要素、その後にフローコンテンツが続く。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
disabled — 内部のlegendを除いて、フォームコントロールが無効であるかどうか
formform要素とこの要素を関連付ける
nameform.elements APIで使用する要素の名前
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLFieldSetElementを使用する。

fieldset要素は、選択肢でキャプションとともに、グループ化されたフォームコントロール(または他のコンテンツ)の集合を表す。キャプションは、fieldset要素の子である最初のlegend要素がもしあれば、それによって与えられる。子孫の残りの部分は、グループを形成する。

Element/fieldset#attr-disabled

Support in all current engines.

Firefox4+Safari6+Chrome20+
Opera12+Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12+

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

次の条件のいずれかにマッチする場合にfieldset要素は無効フィールドである:

form属性は、フォームの所有者fieldset要素を明示的に関連付けるために使用される。name属性は要素の名前を表す。

fieldset.type

文字列"fieldset"を返す。

fieldset.elements

要素内のフォームコントロールのHTMLCollectionを返す。

この例は、関連するコントロールの集合をグループ化するために使用されているfieldset要素を示す:

<fieldset>
 <legend>Display</legend>
 <p><label><input type=radio name=c value=0 checked> Black on White</label>
 <p><label><input type=radio name=c value=1> White on Black</label>
 <p><label><input type=checkbox name=g> Use grayscale</label>
 <p><label>Enhance contrast <input type=range name=e list=contrast min=0 max=100 value=0 step=1></label>
 <datalist id=contrast>
  <option label=Normal value=0>
  <option label=Maximum value=100>
 </datalist>
</fieldset>

次の断片は、fieldsetが有効であるかどうかを制御する、凡例内でチェックボックスを持つフィールドセットを示す。fieldset要素のコンテンツは、必須のテキストコントロールと任意の年/月コントロールで構成される。

<fieldset name="clubfields" disabled>
 <legend> <label>
  <input type=checkbox name=club onchange="form.clubfields.disabled = !checked">
  Use Club Card
 </label> </legend>
 <p><label>Name on card: <input name=clubname required></label></p>
 <p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p>
 <p><label>Expiry date: <input name=clubexp type=month></label></p>
</fieldset>

fieldset要素はまたネストできる。前のものの拡張例は次のとおり:

<fieldset name="clubfields" disabled>
 <legend> <label>
  <input type=checkbox name=club onchange="form.clubfields.disabled = !checked">
  Use Club Card
 </label> </legend>
 <p><label>Name on card: <input name=clubname required></label></p>
 <fieldset name="numfields">
  <legend> <label>
   <input type=radio checked name=clubtype onchange="form.numfields.disabled = !checked">
   My card has numbers on it
  </label> </legend>
  <p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p>
 </fieldset>
 <fieldset name="letfields" disabled>
  <legend> <label>
   <input type=radio name=clubtype onchange="form.letfields.disabled = !checked">
   My card has letters on it
  </label> </legend>
  <p><label>Card code: <input name=clublet required pattern="[A-Za-z]+"></label></p>
 </fieldset>
</fieldset>

この例において、外側の"Use Club Card"チェックボックスがチェックされない場合、2つのネストされたfieldsetのlegendで2つのラジオボタンを含む、外側のfieldset内部のすべては無効になる。しかし、チェックボックスがチェックされる場合、ラジオボタンが両方とも有効に設定され、有効にするよう2つの内部fieldsetのどちらが選択できるようになる。

この例は、legend要素がグループをラベル付けし、ネストされた見出し要素が文書のアウトラインでグループを表面化する、コントロールのグループ化を示している:

<fieldset>
 <legend> <h2>
  How can we best reach you?
 </h2> </legend>
 <p> <label>
 <input type=radio checked name=contact_pref>
  Phone
 </label> </p>
 <p> <label>
  <input type=radio name=contact_pref>
  テキスト
 </label> </p>
 <p> <label>
  <input type=radio name=contact_pref>
  Email
 </label> </p>
</fieldset>

4.10.16 legend要素

Element/legend

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer6+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
カテゴリー
なし。
この要素を使用できるコンテキスト
fieldset要素の最初の子として。
コンテンツモデル
フレージングコンテンツ、オプションでヘディングコンテンツと混合される。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLLegendElementを使用する。

legend要素は、legend要素の親fieldset要素に属する残りのコンテンツのキャプションを表す

legend.form

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