Overview

This page body contains a single form element containing many fieldset acting as articles; with legend acting as their headings. It lists the elements that traditionally belong within the forms, plus three closely related interactive elements, the latter usually split-off in a separate group - dialog and details with its summary heading. It showcases in particular the input element is declined in many different forms depending one if its 22 possible type values.

form Form

Form submission sends an HTTP method on the specified action URL, which submission widgets may override with the matching form* attribute. The browsing context to target works as in Links. Flagging the form novalidate skips the client-side check for input type, required, min, max, step, minlength, maxlength and regex pattern (the latter only on input type='text', type='tel', type='email', type='url', type='password', type='search'). A form can handle all descendants oninput or onchange, with the target being the input origin, from the natural event propagation mechanism. The following snippet converts the form data to an object. 

  // when using input [name]
  const _formNamed = (_) => Object.fromEntries(
    new FormData(_).entries());
  // when using input [id] without [name]
  const _formElems = (_) => Object.fromEntries(
    Array.from(_.elements)
    .filter(_ => _.id)
    .map(_ => [_.id, _.type === "checkbox"
       ? _.checked : _.value]));

The form values onreset are those prior to the change, unlike the new values in onchange, using onreset=setTimeout(e => handler(e), 0) uniformizes the handler.

The autocapitalize and autocomplete attributes assigned at the form parent will get inherited by some children, see Classifications on Form Categories.

input Inputs (1/2)
Colors
File(s)
Scalars
Booleans
input Inputs (2/2)
Text
Date and Time
button and input buttons

Form submission can occur via four inputs. type='submit' is the first standard way. value accepts the text to display within. No value will display a fallback text.

Putting regular buttons in forms can cause unwanted submission. type='button' has no behavior by default, the display text is specified via value, with no fallback. Its use-case is to avoid JS to prevent the event default.

type='image' uses an image linked in src, with fallback alt. When both are missing shows the link directly, or if absent "Submit Query" (firefox), or the title (chrome/safari).

type='reset' resets the current values of the form to their original setup, with value specifying the display text, which falls-back to "Reset" on all browsers.

The standard HTML button causes submission, due to its default type='submit'. This can be changed, with the same possible values as buttons made via input.

Article on styling buttons: Rediscovering the Button Element - Kevin Hale,

legend Field Set Legend

Heading label for the fieldset Displayed top-left within the border, by default. Restricted to being the first element, thus it is restricted to be a singleton (when present). Its role as heading is implicit. It is practical by being depth-agnostic as a section heading, similar to figcaption and caption and unlike the h1-6.

fieldset Field Set

Used to partition form elements into sections. This page is a collection of field sets. It has a broader usefulness as a general pseudo-section element,

  1. parsed easily and used for assistive technologies however does not contribute to the document outline.
  2. may be used outside forms. The specification does not restrict it from being a standalone block.
  3. default appearance has built-in padding and indentation which works with nested levels.
  4. has no restrictions on content elements, except for the related legend

label Label

Labels provide accessibility by informing users about the nature of associated input.

Association is not only semantic, for example, clicking labels correctly associated to radio inputs will select them as if the input itself was clicked.

The problem with with float labels
textarea Text Area

Accepts sizing attributes rows, cols. Escapes < and > symbols: useful to include markup in pages. It can be marked disabled, preventing user edits. This also disables cursor events (highlighting, scrolling, etc.). To prevent user edits while allowing cursor events, mark it readonly="true" instead.

select Select

Presents its optgroup and option tree as selectable. Its size is how many choices will be displayed, i.e. sets its the default height. Flag multiple enables multi-selections.

optgroup Option Group

A parent for nested option, provoding both a hierarchical relationship in the DOM and a visual non-selectable, element-like entry acting as a label, within a select field. May be disabled, propagating the status down-to options.

option Option

A pick for selection in either select or datalist, or grouped within an optgroup in either.

value
alt. value different from text content
label
alt. label different from text content
selected
initially selected
disabled
prevents selection
datalist Data List

datalist is used to contain option. It is not shown on the page. Some inputs accept list as the id of a datalist within the page. This will change the widget, giving easy access at preferred values. type='text' as autocomplete, type='color' as dialog palette, type='range' as ticks.

summary Disclosure Summary

The element acting a heading for the details container, optional, strongly recommended. When not open, the only displayed prose of its parent.

details Details Disclosure
Clicking summary expands detail. Clicking toggles open on the parent. Wrapping the text in any element is optional but makes the CSS more readable.
Nested details Useful where the level might change since the heading does not depend on depth, like the legend, and unlike h1-6, extra-useful when content length is unknown/large.
output Output

Displayed inline, used to contain the value resulting from a calculation or outcomes of a user action. It is not submitted with the form, nevertheless it may specify a name. for can contain a space-separated list of id of elements involved in the computation. form can contain the id of the associated form, which can be anywhere in the current document. When unspecified, within an ancestor form, then the ancestor fills this role by default.

meter Meter

Specific attributes are min, max, low, high, optimum, value. The meter indicates values that are under low, above high, usually with the color scheme.

progress Progress Indicator

Accepts max, value. but unlike meter, its minimum cannot be specified, implicitely being zero.

dialog Dialog

Dialog can be shown normally, or as modal. It is connected to forms, as forms can target dialogs for submission. A simple close button is implemented with onclick='parentNode.close()'. Opening a dialog when the hash fragment equals its id can be done in CSS. The close button then can be onclick='window.location.hash=""' or an anchor navigating to href='#'. 

  dialog:target {
    transition: 100ms;
    display: block;
    z-index: 50;
  }