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.

FirefoxYesSafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes
カテゴリー
フローコンテンツ
フレージングコンテンツ
インタラクティブコンテンツ
記載ラベル付け可能送信可能、および自動大文字化継承 フォームに関連付けられた要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツであるが、インタラクティブコンテンツの子孫およびtabindex属性が指定された子孫が存在してはならない。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
disabled — フォームコントロールが無効であるかどうか
formform要素とこの要素を関連付ける
formactionフォーム送信に使用するURL
formenctypeフォーム送信に使用するエントリーリストのエンコーディングタイプ
formmethodフォーム送信に使用する変形
formnovalidateフォーム送信のためのフォームコントロール検証を回避する
formtargetフォーム送信に対するブラウジングコンテキスト
nameフォーム送信およびform.elements APIで使用する要素の名前
type — ボタンの種類
valueフォーム送信に対して使用される値
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLButtonElementを使用する。

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

要素はボタンである。

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

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

欠損値のデフォルトおよび不正値のデフォルトSubmit Button状態である。

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

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

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

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

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属性を持たない場合にのみ適用することができる。

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

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

select . type

HTMLSelectElement/type

Support in all current engines.

Firefox2+Safari1+Chrome1+
Opera2+Edge79+
Edge (Legacy)12+Internet Explorer1+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android10.1+

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

select . options

HTMLSelectElement/options

Support in all current engines.

FirefoxYesSafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

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

select . length [ = value ]

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

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

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

element = select . item(index)

HTMLSelectElement/item

Support in all current engines.

Firefox4+SafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes
select[index]

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

element = select . namedItem(name)

HTMLSelectElement/namedItem

Support in all current engines.

Firefox4+SafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

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

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

select . add(element [, before ] )

HTMLSelectElement/add

Support in all current engines.

FirefoxYesSafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

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

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

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

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

select . selectedOptions

HTMLSelectElement/selectedOptions

Support in all current engines.

Firefox26+Safari6+Chrome19+
Opera9+Edge79+
Edge (Legacy)12+Internet ExplorerNo
Firefox Android26+Safari iOS6+Chrome Android25+WebView Android37+Samsung Internet1.5+Opera Android10.1+

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

select . selectedIndex [ = value ]

HTMLSelectElement/selectedIndex

Support in all current engines.

FirefoxYesSafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet Explorer?
Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

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

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

select . value [ = value ]

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

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

オプションの集合からユーザーが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>

4.10.8 datalist要素

Element/datalist

Support in all current engines.

Firefox4+Safari12.1+Chrome20+
Opera9.5+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android4+Safari iOS12.2+Chrome Android33+WebView Android4.4.3+Samsung Internet2.0+Opera Android🔰 Yes
caniuse.com table
カテゴリー
フローコンテンツ
フレージングコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
いずれか:フレージングコンテンツ
または: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+SafariYesChrome1+
OperaYesEdge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android4+Safari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes
カテゴリー
なし。
この要素を使用できるコンテキスト
select要素の子として。
コンテンツモデル
0個以上のoptionおよびスクリプトサポート要素。
text/htmlにおけるタグ省略
optgroup要素が別のoptgroup要素の直後に存在する場合、または親要素に追加のコンテンツが存在しない場合、optgroup要素の終了タグは省略することができる。
コンテンツ属性
グローバル属性
disabled — フォームコントロールが無効であるかどうか
label — ユーザー可視ラベル
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLOptGroupElementを使用する。

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

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

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

Element/option

Support in all current engines.

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

option要素は、select要素でまたはdatalist要素で提案のリストの一部としてオプションを表す

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

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.

FirefoxYesSafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes
カテゴリー
フローコンテンツ
フレージングコンテンツ
インタラクティブコンテンツ
記載ラベル付け可能送信可能リセット可能および自動大文字化継承 フォームに関連付けられた要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
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より大きい妥当な非負整数でなければならない。

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

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

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

要素のwrap属性がHard状態にある場合、cols属性を指定しなければならない。

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

textarea要素が最大許容値の長さを持つ場合、その要素の子は、正規化された改行をもつ要素の子孫テキストコンテンツに属する値の長さに等しい、または要素の最大許容値の長さよりも小さくなるようにしなければならない。

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 Android4+Safari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera Android?
カテゴリー
フローコンテンツ
フレージングコンテンツ
記載ラベル付け可能リセット可能および自動大文字化継承 フォームに関連付けられた要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
for — 出力が計算されたコントロールフォームを指定する
formform要素とこの要素を関連付ける
nameform.elements APIで使用する要素の名前
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLOutputElementを使用する。

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

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

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 Android6+Safari iOS7+Chrome AndroidYesWebView AndroidYesSamsung InternetYesOpera Android11+
caniuse.com table
カテゴリー
フローコンテンツ
フレージングコンテンツ
ラベル付け可能要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ、ただしprogress要素の子孫が存在してはならない。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
value — 要素の現在値
max — 範囲の上限
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLProgressElementを使用する。

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属性が存在する場合、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 Android16+Safari iOS10.3+Chrome Android18+WebView AndroidNoSamsung Internet1.0+Opera Android11+
caniuse.com table
カテゴリー
フローコンテンツ
フレージングコンテンツ
ラベル付け可能要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ、ただしmeter要素の子孫が存在してはならない。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
value — 要素の現在値
min — 範囲の下限
max — 範囲の上限
low — 低域の上限
high — 高域の下限
optimum — ゲージにおける最適値
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLMeterElementを使用する。

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>

次のマークアップは:

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

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

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

Element/fieldset#attr-disabled

Support in all current engines.

FirefoxYesSafari6+ChromeYes
Opera12+EdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox AndroidYesSafari iOS6+Chrome AndroidYesWebView Android4.4+Samsung InternetYesOpera Android?
caniuse.com table

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+SafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet Explorer6+
Firefox Android4+Safari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera Android?
カテゴリー
なし。
この要素を使用できるコンテキスト
fieldset要素の最初の子として。
コンテンツモデル
フレージングコンテンツ、オプションでヘディングコンテンツと混合される。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLLegendElementを使用する。

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

legend . form

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