HTML

Living Standard — Last Updated 23 October 2025

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

4.10.6 The button element

Categories:

Flow content.

Phrasing content.

Interactive content.

Listed, labelable, submittable, and autocapitalize-and-autocorrect inheriting form-associated element.

Palpable content.

Contexts in which this element can be used:

Where phrasing content is expected.

As the first child of a select element.

Content model:

Phrasing content, but there must be no interactive content descendant and no descendant with the tabindex attribute specified. If the element is the first child of a select element, then it may also have zero or one descendant selectedcontent element.

Tag omission in text/html:

Neither tag is omissible.

Content attributes:

Global attributes

command — Indicates to the targeted element which action to take.

commandfor — Targets another element to be invoked.

disabled — Whether the form control is disabled

form — Associates the element with a form element

formaction — URL to use for form submission

formenctype — Entry list encoding type to use for form submission

formmethod — Variant to use for form submission

formnovalidate — Bypass form control validation for form submission

formtarget — Navigable for form submission

name — Name of the element to use for form submission and in the form.elements API

popovertarget — Targets a popover element to toggle, show, or hide

popovertargetaction — Indicates whether a targeted popover element is to be toggled, shown, or hidden

type — Type of button

value — Value to be used for form submission

Accessibility considerations:

For authors.

For implementers.

DOM interface:

[Exposed=Window]
interface HTMLButtonElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, ReflectSetter] attribute DOMString command;
  [CEReactions, Reflect] attribute Element? commandForElement;
  [CEReactions, Reflect] attribute boolean disabled;
  readonly attribute HTMLFormElement? form;
  [CEReactions, ReflectSetter] attribute USVString formAction;
  [CEReactions] attribute DOMString formEnctype;
  [CEReactions] attribute DOMString formMethod;
  [CEReactions, Reflect] attribute boolean formNoValidate;
  [CEReactions, Reflect] attribute DOMString formTarget;
  [CEReactions, Reflect] attribute DOMString name;
  [CEReactions, ReflectSetter] attribute DOMString type;
  [CEReactions, Reflect] attribute DOMString value;

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

  readonly attribute NodeList labels;
};
HTMLButtonElement includes PopoverTargetAttributes;

The button element represents a button labeled by its contents.

The element is a button.

The type attribute controls the behavior of the button when it is activated. It is an enumerated attribute with the following keywords and states:

If specified, the commandfor attribute value must be the ID of an element in the same tree as the button with the commandfor attribute.

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

If a button element is the first child which is an element of a select element, then it is inert.

An HTML element can have specific is valid command steps and command steps defined for the element's local name.

The form attribute is used to explicitly associate the button element with its form owner. The name attribute represents the element's name. The disabled attribute is used to make the control non-interactive and to prevent its value from being submitted. The formaction, formenctype, formmethod, formnovalidate, and formtarget attributes are attributes for form submission.

The formnovalidate attribute can be used to make submit buttons that do not trigger the constraint validation.

The formaction, formenctype, formmethod, formnovalidate, and formtarget must not be specified if the element is not a submit button.

A button (and its value) is only included in the form submission if the button itself was used to initiate the form submission.

The willValidate, validity, and validationMessage IDL attributes, and the checkValidity(), reportValidity(), and setCustomValidity() methods, are part of the constraint validation API. The labels IDL attribute provides a list of the element's labels. The disabled, form, and name IDL attributes are part of the element's forms API.

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

<button type=button
        commandfor="the-popover"
        command="show-popover">
 Show menu
</button>
<div popover
     id="the-popover">
 <button commandfor="the-popover"
         command="hide-popover">
  Hide menu
 </button>
</div>
    

<button type=button
        commandfor="the-image"
        command="--rotate-landscape">
 Rotate Left
</button>
<button type=button
        commandfor="the-image"
        command="--rotate-portrait">
 Rotate Right
</button>
<img id="the-image"
     src="photo.jpg">
<script>
  const image = document.getElementById("the-image");
  image.addEventListener("command", (event) => {
   if ( event.command == "--rotate-landscape" ) {
    event.target.style.rotate = "-90deg"
   } else if ( event.command == "--rotate-portrait" ) {
    event.target.style.rotate = "0deg"
   }
  });
</script>
    

4.10.7 The select element

Categories:

Flow content.

Phrasing content.

Interactive content.

Listed, labelable, submittable, resettable, and autocapitalize-and-autocorrect inheriting form-associated element.

Palpable content.

Contexts in which this element can be used:

Where phrasing content is expected.

Content model:

Zero or one button elements if the select is a drop-down box, followed by zero or more select element inner content elements.

Tag omission in text/html:

Neither tag is omissible.

Content attributes:

Global attributes

autocomplete — Hint for form autofill feature

disabled — Whether the form control is disabled

form — Associates the element with a form element

multiple — Whether to allow multiple values

name — Name of the element to use for form submission and in the form.elements API

required — Whether the control is required for form submission

size — Size of the control

Accessibility considerations:

If the element has a multiple attribute or a size attribute with a value > 1: for authors; for implementers.

Otherwise: for authors; for implementers.

DOM interface:

[Exposed=Window]
interface HTMLSelectElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, ReflectSetter] attribute DOMString autocomplete;
  [CEReactions, Reflect] attribute boolean disabled;
  readonly attribute HTMLFormElement? form;
  [CEReactions, Reflect] attribute boolean multiple;
  [CEReactions, Reflect] attribute DOMString name;
  [CEReactions, Reflect] attribute boolean required;
  [CEReactions, Reflect, ReflectDefault=0] attribute unsigned long size;
  

  readonly attribute DOMString type;

  [SameObject] readonly attribute HTMLOptionsCollection options;
  [CEReactions] attribute unsigned long length;
  getter HTMLOptionElement? item(unsigned long index);
  HTMLOptionElement? namedItem(DOMString name);
  [CEReactions] undefined add((HTMLOptionElement or HTMLOptGroupElement) element, optional (HTMLElement or long)? before = null);
  [CEReactions] undefined remove(); // ChildNode overload
  [CEReactions] undefined remove(long index);
  [CEReactions] setter undefined (unsigned long index, HTMLOptionElement? option);

  [SameObject] readonly attribute HTMLCollection selectedOptions;
  attribute long selectedIndex;
  attribute DOMString value;

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

  undefined showPicker();

  readonly attribute NodeList labels;
};

The select element represents a control for selecting amongst a set of options.

The multiple attribute is a boolean attribute. If the attribute is present, then the select element represents a control for selecting zero or more options from the list of options. If the attribute is absent, then the select element represents a control for selecting a single option from the list of options.

The size attribute gives the number of options to show to the user. The size attribute, if specified, must have a value that is a valid non-negative integer greater than zero.

The required attribute is a boolean attribute. When specified, the user will be required to select a value before submitting the form.

The form attribute is used to explicitly associate the select element with its form owner. The name attribute represents the element's name. The disabled attribute is used to make the control non-interactive and to prevent its value from being submitted. The autocomplete attribute controls how the user agent provides autofill behavior.

In practice, the requirement stated in the paragraph above can only apply when a select element does not have a size attribute with a value greater than 1.

Implementations commonly allow the user to focus the next or previous option via the arrow-up and arrow-down keys, focus the first or last option via the Home or End keys, or focus the first or last option in the viewport of the picker via the PageUp or PageDown keys.

Which particular keys of the keyboard cause these actions might differ across implementations and platforms. The ARIA Authoring Practices Guide has good recommendations for this behavior.

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.

select.type

✔MDN

HTMLSelectElement/type

Support in all current engines.

Firefox1+Safari3+Chrome1+

---

Opera2+Edge79+

---

Edge (Legacy)12+Internet Explorer1+

---

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

Returns "select-multiple" if the element has a multiple attribute, and "select-one" otherwise.

select.options

✔MDN

HTMLSelectElement/options

Support in all current engines.

Firefox1+Safari3+Chrome1+

---

Opera12.1+Edge79+

---

Edge (Legacy)12+Internet Explorer5.5+

---

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

Returns an HTMLOptionsCollection of the list of options.

select.length [ = value ]

Returns the number of elements in the list of options.

When set to a smaller number, truncates the number of option elements in the select.

When set to a greater number, adds new blank option elements to the select.

element = select.item(index)

✔MDN

HTMLSelectElement/item

Support in all current engines.

Firefox1+Safari3+Chrome1+

---

Opera12.1+Edge79+

---

Edge (Legacy)12+Internet Explorer5.5+

---

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

select[index]

Returns the item with index index from the list of options. The items are sorted in tree order.

element = select.namedItem(name)

✔MDN

HTMLSelectElement/namedItem

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+

Returns the first item with ID or name name from the list of options.

Returns null if no element with that ID could be found.

select.add(element [, before ])

✔MDN

HTMLSelectElement/add

Support in all current engines.

Firefox1+Safari3+Chrome1+

---

Opera12.1+Edge79+

---

Edge (Legacy)12+Internet Explorer5.5+

---

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

Inserts element before the node given by before.

The before argument can be a number, in which case element is inserted before the item with that number, or an element from the list of options, in which case element is inserted before that element.

If before is omitted, null, or a number out of range, then element will be added at the end of the list.

This method will throw a "HierarchyRequestError" DOMException if element is an ancestor of the element into which it is to be inserted.

select.selectedOptions

✔MDN

HTMLSelectElement/selectedOptions

Support in all current engines.

Firefox26+Safari6+Chrome19+

---

Opera9+Edge79+

---

Edge (Legacy)12+Internet ExplorerNo

---

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

Returns an HTMLCollection of the list of options that are selected.

select.selectedIndex [ = value ]

✔MDN

HTMLSelectElement/selectedIndex

Support in all current engines.

Firefox1+Safari3+Chrome1+

---

Opera12.1+Edge79+

---

Edge (Legacy)12+Internet Explorer5.5+

---

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

Returns the index of the first selected item, if any, or −1 if there is no selected item.

Can be set, to change the selection.

select.value [ = value ]

Returns the value of the first selected item, if any, or the empty string if there is no selected item.

Can be set, to change the selection.

select.showPicker()

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

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

Throws a "NotAllowedError" DOMException if called without transient user activation.

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

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

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.

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.

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.

The willValidate, validity, and validationMessage IDL attributes, and the checkValidity(), reportValidity(), and setCustomValidity() methods, are part of the constraint validation API. The labels IDL attribute provides a list of the element's labels. The disabled, form, and name IDL attributes are part of the element's forms API.

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

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

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

<select>
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <div class="border">
    <optgroup>
      <legend>WHATWG Specifications</legend>
      <option>
        <img src="html.jpg" alt="">
        HTML
      </option>
      <option>
        <img src="dom.jpg" alt="">
        DOM
      </option>
    </optgroup>
  </div>
  <div class="border">
    <optgroup>
      <legend>W3C Specifications</legend>
      <option>
        <img src="forms.jpg" alt="">
        CSS Form Control Styling
      </option>
      <option>
        <img src="pseudo.jpg" alt="">
        CSS Pseudo-Elements
      </option>
    <optgroup>
  </div>
</select>

The first child button element as allowed by the content model of select is not a submit button. It is used to replace the in-page rendering of the select element. Its form submission behavior is prevented because it is inert.

4.10.8 The datalist element

Categories:

Flow content.

Phrasing content.

Contexts in which this element can be used:

Where phrasing content is expected.

Content model:

Either: phrasing content.

Or: Zero or more option and script-supporting elements.

Tag omission in text/html:

Neither tag is omissible.

Content attributes:

Global attributes

Accessibility considerations:

For authors.

For implementers.

DOM interface:

[Exposed=Window]
interface HTMLDataListElement : HTMLElement {
  [HTMLConstructor] constructor();

  [SameObject] readonly attribute HTMLCollection options;
};

The datalist element represents a set of option elements that represent predefined options for other controls. In the rendering, the datalist element represents nothing and it, along with its children, should be hidden.

The datalist element can be used in two ways. In the simplest case, the datalist element has just option element children.

<label>
 Animal:
 <input name=animal list=animals>
 <datalist id=animals>
  <option value="Cat">
  <option value="Dog">
 </datalist>
</label>

In the more elaborate case, the datalist element can be given contents that are to be displayed for down-level clients that don't support datalist. In this case, the option elements are provided inside a select element inside the datalist element.

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

The datalist element is hooked up to an input element using the list attribute on the input element.

Each option element that is a descendant of the datalist element, that is not disabled, and whose value is a string that isn't the empty string, represents a suggestion. Each suggestion has a value and a label.

datalist.options

Returns an HTMLCollection of the option elements of the datalist element.

4.10.9 The optgroup element

Categories:

select element inner content elements.

Contexts in which this element can be used:

As a descendant of a select element.

Content model:

Zero or one legend element followed by zero or more optgroup element inner content elements.

Tag omission in text/html:

An optgroup element's end tag can be omitted if the optgroup element is immediately followed by another optgroup element, if it is immediately followed by an hr element, or if there is no more content in the parent element.

Content attributes:

Global attributes

disabled — Whether the form control is disabled

label — User-visible label

Accessibility considerations:

For authors.

For implementers.

DOM interface:

[Exposed=Window]
interface HTMLOptGroupElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, Reflect] attribute boolean disabled;
  [CEReactions, Reflect] attribute DOMString label;
};

The optgroup element represents a group of option elements with a common label.

The element's group of option elements consists of the option elements that are descendants of the optgroup element.

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.

The disabled attribute is a boolean attribute and can be used to disable a group of option elements together.

The label attribute must be specified if the optgroup has no child legend element.

The value of the optgroup label algorithm gives the name of the group, for the purposes of the user interface. User agents should use this attribute's value when labeling the group of option elements in a select element.

There is no way to select an optgroup element. Only option elements can be selected. An optgroup element merely provides a label for a group of option elements.

<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 The option element

Categories:

select element inner content elements.

optgroup element inner content elements.

Contexts in which this element can be used:

As a descendant of a select element.

As a descendant of a datalist element.

As a descendant of an optgroup element.

Content model:

If the element has a label attribute and a value attribute: Nothing.

If the element has a label attribute but no value attribute: Text.

If the element has no label attribute and is not a descendant of a datalist element: Zero or more option element inner content elements.

If the element has no label attribute and is a descendant of a datalist element: Text.

Tag omission in text/html:

An option element's end tag can be omitted if the option element is immediately followed by another option element, if it is immediately followed by an optgroup element, if it is immediately followed by an hr element, or if there is no more content in the parent element.

Content attributes:

Global attributes

disabled — Whether the form control is disabled

label — User-visible label

selected — Whether the option is selected by default

value — Value to be used for form submission

Accessibility considerations:

For authors.

For implementers.

DOM interface:

[Exposed=Window,
 LegacyFactoryFunction=Option(optional DOMString text = "", optional DOMString value, optional boolean defaultSelected = false, optional boolean selected = false)]
interface HTMLOptionElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, Reflect] attribute boolean disabled;
  readonly attribute HTMLFormElement? form;
  [CEReactions, ReflectSetter] attribute DOMString label;
  [CEReactions, Reflect="selected"] attribute boolean defaultSelected;
  attribute boolean selected;
  [CEReactions, ReflectSetter] attribute DOMString value;

  [CEReactions] attribute DOMString text;
  readonly attribute long index;
};

The option element represents an option in a select element or as part of a list of suggestions in a datalist element.

In certain circumstances described in the definition of the select element, an option element can be a select element's placeholder label option. A placeholder label option does not represent an actual option, but instead represents a label for the select control.

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.

Being disabled does not prevent all modifications to the option element. For example, its selectedness could be modified programmatically from JavaScript. Or, it could be indirectly modified by user action, e.g., if other non-disabled option elements in the select element were modified.

The label content attribute, if specified, must not be empty.

The selected attribute is a boolean attribute. It represents the default selectedness of the element.

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

A select element whose multiple attribute is not specified must not have more than one descendant option element with its selected attribute set.

Each option element has a cached nearest ancestor select element, which is a select element or null, initially set to null.

option.selected

Returns true if the element is selected, and false otherwise.

Can be set, to override the current state of the element.

option.index

Returns the index of the element in its select element's options list.

option.form

Returns the element's form element, if any, or null otherwise.

option.text

Same as textContent, except that spaces are collapsed and script elements are skipped.

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

✔MDN

HTMLOptionElement/Option

Support in all current engines.

Firefox1+Safari1.2+Chrome1+

---

Opera12.1+Edge79+

---

Edge (Legacy)12+Internet Explorer5.5+

---

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

Returns a new option element.

The text argument sets the contents of the element.

The value argument sets the value attribute.

The defaultSelected argument sets the selected attribute.

The selected argument sets whether or not the element is selected. If it is omitted, even if the defaultSelected argument is true, the element is not selected.

When no value attribute is set on the option element, its text contents are used to generate a submittable value. In the case that the option element has child elements, this can lead to unexpected results such as option elements which render differently but have the same value. In order to address this, setting the value attribute on option elements is recommended.

4.10.11 The textarea element

Categories:

Flow content.

Phrasing content.

Interactive content.

Listed, labelable, submittable, resettable, and autocapitalize-and-autocorrect inheriting form-associated element.

Palpable content.

Contexts in which this element can be used:

Where phrasing content is expected.

Content model:

Text.

Tag omission in text/html:

Neither tag is omissible.

Content attributes:

Global attributes

autocomplete — Hint for form autofill feature

cols — Maximum number of characters per line

dirname — Name of form control to use for sending the element's directionality in form submission

disabled — Whether the form control is disabled

form — Associates the element with a form element

maxlength — Maximum length of value

minlength — Minimum length of value

name — Name of the element to use for form submission and in the form.elements API

placeholder — User-visible label to be placed within the form control

readonly — Whether to allow the value to be edited by the user

required — Whether the control is required for form submission

rows — Number of lines to show

wrap — How the value of the form control is to be wrapped for form submission

Accessibility considerations:

For authors.

For implementers.

DOM interface:

[Exposed=Window]
interface HTMLTextAreaElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, ReflectSetter] attribute DOMString autocomplete;
  [CEReactions, ReflectPositiveWithFallback, ReflectDefault=20] attribute unsigned long cols;
  [CEReactions, Reflect] attribute DOMString dirName;
  [CEReactions, Reflect] attribute boolean disabled;
  readonly attribute HTMLFormElement? form;
  [CEReactions, ReflectNonNegative] attribute long maxLength;
  [CEReactions, ReflectNonNegative] attribute long minLength;
  [CEReactions, Reflect] attribute DOMString name;
  [CEReactions, Reflect] attribute DOMString placeholder;
  [CEReactions, Reflect] attribute boolean readOnly;
  [CEReactions, Reflect] attribute boolean required;
  [CEReactions, ReflectPositiveWithFallback, ReflectDefault=2] attribute unsigned long rows;
  [CEReactions, Reflect] attribute DOMString wrap;

  readonly attribute DOMString type;
  [CEReactions] attribute DOMString defaultValue;
  attribute [LegacyNullToEmptyString] DOMString value;
  readonly attribute unsigned long textLength;

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

  readonly attribute NodeList labels;

  undefined select();
  attribute unsigned long selectionStart;
  attribute unsigned long selectionEnd;
  attribute DOMString selectionDirection;
  undefined setRangeText(DOMString replacement);
  undefined setRangeText(DOMString replacement, unsigned long start, unsigned long end, optional SelectionMode selectionMode = "preserve");
  undefined setSelectionRange(unsigned long start, unsigned long end, optional DOMString direction);
};

The textarea element represents a multiline plain text edit control for the element's raw value. The contents of the control represent the control's default value.

The raw value of a textarea control must be initially the empty string.

This element has rendering requirements involving the bidirectional algorithm.

The readonly attribute is a boolean attribute used to control whether the text can be edited by the user or not.

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>

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.

Visual user agents should set the height of the control to the number of lines given by character height.

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

If the element's wrap attribute is in the Hard state, the cols attribute must be specified.

For historical reasons, the element's value is normalized in three different ways for three different purposes. The raw value is the value as it was originally set. It is not normalized. The API value is the value used in the value IDL attribute, textLength IDL attribute, and by the maxlength and minlength content attributes. It is normalized so that line breaks use U+000A LINE FEED (LF) characters. Finally, there is the value, as used in form submission and other processing models in this specification. It is normalized as for the API value, and in addition, if necessary given the element's wrap attribute, additional line breaks are inserted to wrap the text at the given width.

The maxlength attribute is a form control maxlength attribute.

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.

The minlength attribute is a form control minlength attribute.

The required attribute is a boolean attribute. When specified, the user will be required to enter a value before submitting the form.

The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.

The placeholder attribute should not be used as an alternative to a label. For a longer hint or other advisory text, the title attribute is more appropriate.

These mechanisms are very similar but subtly different: the hint given by the control's label is shown at all times; the short hint given in the placeholder attribute is shown before the user enters a value; and the hint in the title attribute is shown when the user requests further help.

User agents should present this hint to the user when the element's value is the empty string and the control is not focused (e.g. by displaying it inside a blank unfocused control). All U+000D CARRIAGE RETURN U+000A LINE FEED character pairs (CRLF) in the hint, as well as all other U+000D CARRIAGE RETURN (CR) and U+000A LINE FEED (LF) characters in the hint, must be treated as line breaks when rendering the hint.

If a user agent normally doesn't show this hint to the user when the control is focused, then the user agent should nonetheless show the hint for the control if it was focused as a result of the autofocus attribute, since in that case the user will not have had an opportunity to examine the control before focusing it.

The name attribute represents the element's name. The dirname attribute controls how the element's directionality is submitted. The disabled attribute is used to make the control non-interactive and to prevent its value from being submitted. The form attribute is used to explicitly associate the textarea element with its form owner. The autocomplete attribute controls how the user agent provides autofill behavior.

textarea.type

Returns the string "textarea".

textarea.value

Returns the current value of the element.

Can be set, to change the value.

The willValidate, validity, and validationMessage IDL attributes, and the checkValidity(), reportValidity(), and setCustomValidity() methods, are part of the constraint validation API. The labels IDL attribute provides a list of the element's labels. The select(), selectionStart, selectionEnd, selectionDirection, setRangeText(), and setSelectionRange() methods and IDL attributes expose the element's text selection. The disabled, form, and name IDL attributes are part of the element's forms API.

<p>If you have any comments, please let us know: <textarea cols=80 name=comments></textarea></p>

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

<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 The output element

Categories:

Flow content.

Phrasing content.

Listed, labelable, resettable, and autocapitalize-and-autocorrect inheriting form-associated element.

Palpable content.

Contexts in which this element can be used:

Where phrasing content is expected.

Content model:

Phrasing content.

Tag omission in text/html:

Neither tag is omissible.

Content attributes:

Global attributes

for — Specifies controls from which the output was calculated

form — Associates the element with a form element

name — Name of the element to use in the form.elements API.

Accessibility considerations:

For authors.

For implementers.

DOM interface:

[Exposed=Window]
interface HTMLOutputElement : HTMLElement {
  [HTMLConstructor] constructor();

  [SameObject, PutForwards=value, Reflect="for"] readonly attribute DOMTokenList htmlFor;
  readonly attribute HTMLFormElement? form;
  [CEReactions, Reflect] attribute DOMString name;

  readonly attribute DOMString type;
  [CEReactions] attribute DOMString defaultValue;
  [CEReactions] attribute DOMString value;

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

  readonly attribute NodeList labels;
};

The output element represents the result of a calculation performed by the application, or the result of a user action.

This element can be contrasted with the samp element, which is the appropriate element for quoting the output of other programs run previously.

The for content attribute allows an explicit relationship to be made between the result of a calculation and the elements that represent the values that went into the calculation or that otherwise influenced the calculation. The for attribute, if specified, must contain a string consisting of an unordered set of unique space-separated tokens, none of which are identical to another token and each of which must have the value of an ID of an element in the same tree.

The form attribute is used to explicitly associate the output element with its form owner. The name attribute represents the element's name. The output element is associated with a form so that it can be easily referenced from the event handlers of form controls; the element's value itself is not submitted when the form is submitted.

The element has a default value override (null or a string). Initially it must be null.

output.value [ = value ]

Returns the element's current value.

Can be set, to change the value.

output.defaultValue [ = value ]

Returns the element's current default value.

Can be set, to change the default value.

output.type

Returns the string "output".

The willValidate, validity, and validationMessage IDL attributes, and the checkValidity(), reportValidity(), and setCustomValidity() methods, are part of the constraint validation API. The labels IDL attribute provides a list of the element's labels. The form and name IDL attributes are part of the element's forms API.

<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 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 The progress element

Categories:

Flow content.

Phrasing content.

Labelable element.

Palpable content.

Contexts in which this element can be used:

Where phrasing content is expected.

Content model:

Phrasing content, but there must be no progress element descendants.

Tag omission in text/html:

Neither tag is omissible.

Content attributes:

Global attributes

value — Current value of the element

max — Upper bound of range

Accessibility considerations:

For authors.

For implementers.

DOM interface:

[Exposed=Window]
interface HTMLProgressElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, ReflectSetter] attribute double value;
  [CEReactions, ReflectPositive, ReflectDefault=1.0] attribute double max;
  readonly attribute double position;
  readonly attribute NodeList labels;
};

The progress element represents the completion progress of a task. The progress is either indeterminate, indicating that progress is being made but that it is not clear how much more work remains to be done before the task is complete (e.g. because the task is waiting for a remote host to respond), or the progress is a number in the range zero to a maximum, giving the fraction of work that has so far been completed.

There are two attributes that determine the current task completion represented by the element. The value attribute specifies how much of the task has been completed, and the max attribute specifies how much work the task requires in total. The units are arbitrary and not specified.

To make a determinate progress bar, add a value attribute with the current progress (either a number from 0.0 to 1.0, or, if the max attribute is specified, a number from 0 to the value of the max attribute). To make an indeterminate progress bar, remove the value attribute.

Authors are encouraged to also include the current value and the maximum value inline as text inside the element, so that the progress is made available to users of legacy user agents.

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

The value and max attributes, when present, must have values that are valid floating-point numbers. 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. The max attribute, if present, must have a value greater than zero.

The progress element is the wrong element to use for something that is just a gauge, as opposed to task progress. For instance, indicating disk space usage using progress would be inappropriate. Instead, the meter element is available for such use cases.

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

For a determinate progress bar (one with known current and maximum values), returns the result of dividing the current value by the maximum value.

For an indeterminate progress bar, returns −1.

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 labels IDL attribute provides a list of the element's labels.

4.10.14 The meter element

Categories:

Flow content.

Phrasing content.

Labelable element.

Palpable content.

Contexts in which this element can be used:

Where phrasing content is expected.

Content model:

Phrasing content, but there must be no meter element descendants.

Tag omission in text/html:

Neither tag is omissible.

Content attributes:

Global attributes

value — Current value of the element

min — Lower bound of range

max — Upper bound of range

low — High limit of low range

high — Low limit of high range

optimum — Optimum value in gauge

Accessibility considerations:

For authors.

For implementers.

DOM interface:

[Exposed=Window]
interface HTMLMeterElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, ReflectSetter] attribute double value;
  [CEReactions, ReflectSetter] attribute double min;
  [CEReactions, ReflectSetter] attribute double max;
  [CEReactions, ReflectSetter] attribute double low;
  [CEReactions, ReflectSetter] attribute double high;
  [CEReactions, ReflectSetter] attribute double optimum;
  readonly attribute NodeList labels;
};

The meter element represents a scalar measurement within a known range, or a fractional value; for example disk usage, the relevance of a query result, or the fraction of a voting population to have selected a particular candidate.

This is also known as a gauge.

The meter element should not be used to indicate progress (as in a progress bar). For that role, HTML provides a separate progress element.

The meter element also does not represent a scalar value of arbitrary range — for example, it would be wrong to use this to report a weight, or height, unless there is a known maximum value.

There are six attributes that determine the semantics of the gauge represented by the element.

The min attribute specifies the lower bound of the range, and the max attribute specifies the upper bound. The value attribute specifies the value to have the gauge indicate as the "measured" value.

The other three attributes can be used to segment the gauge's range into "low", "medium", and "high" parts, and to indicate which part of the gauge is the "optimum" part. The low attribute specifies the range that is considered to be the "low" part, and the high attribute specifies the range that is considered to be the "high" part. The optimum attribute gives the position that is "optimum"; if that is higher than the "high" value then this indicates that the higher the value, the better; if it's lower than the "low" mark then it indicates that lower values are better, and naturally if it is in between then it indicates that neither high nor low values are good.

Authoring requirements: The value attribute must be specified. The value, min, low, high, max, and optimum attributes, when present, must have values that are valid floating-point numbers.

If no minimum or maximum is specified, then the range is assumed to be 0..1, and the value thus has to be within that range.

Authors are encouraged to include a textual representation of the gauge's state in the element's contents, for users of user agents that do not support the meter element.

When used with microdata, the meter element's value attribute provides the element's machine-readable value.

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>

<p>The grapefruit pie had a radius of <meter value=12>12cm</meter>
and a height of <meter value=2>2cm</meter>.</p> <!-- BAD! -->

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

There is no explicit way to specify units in the meter element, but the units may be specified in the title attribute in free-form text.

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

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>