The 24 content forms of HTML

A form helps an author to accept content from users or programs.

The 24 kinds of content a form can accept are as follows:

HTML uses 4 main elements and many utilities to manage those content forms. The 4 main elements are textarea, select, input, and button. The list of all such elements is as follows:

textarea element

A textarea element is a content form that accepts multi-line text content.

The syntax expects the following:

<textarea></textarea>

cols attribute

The cols attribute of a textarea element specifies the maximum number of characters allowed per line when the scrollbar is visible in the element's viewport.

The value is an integer greater than zero. It defaults to 20.

The syntax is as follows:

<textarea cols="[non-negative-integer]"></textarea>

rows attribute

The rows attribute of a textarea element specifies the number of text lines for the element's viewport.

The value is an integer greater than zero. It defaults to 2.

The syntax is as follows:

<textarea rows="[non-negative-integer]"></textarea>

wrap attribute

The wrap attribute of a textarea element determines the inclusion of new lines in the submission of text.

The value is either of the following 2 keywords:

soft keyword
This excludes newlines in the content submission. It is the default value.
hard keyword
This includes newlines in the content submission

The syntax expects the following:

<textarea wrap="soft"></textarea>

<!-- or -->

<textarea wrap="hard" cols="[non-negative-integer]"></textarea>

select element

The select element is a content form that accepts text content from multiple option items.

The syntax expects the following:

<select></select>

optgroup element

An optgroup element of a select element groups a set of related option elements.

The syntax expects the following:

<optgroup label="[term]"></optgroup>

input element

An input element is a content form that accepts single-line text content.

type attribute

The type attribute of an input element specifies the kind of single-line text content.

The value could be as follows:

password value

The password value of the type attribute of an input element accepts sensitive content.

The syntax expects the following:

<input type="password">

The search value of the type attribute on an input element accepts a search keyword.

The syntax expects the following:

<input type="search">

color value

The color value of the type attribute of an input element accepts a lowercase 7-char long hex color.

The syntax expects the following:

<input type="color">

url value

The url value of the type attribute of an input element accepts an absolute URL content.

The syntax expects the following:

<input type="url">

email value

The email value of the type attribute of an input element accepts an email address content.

The syntax expects the following:

<input type="email">

text value

The text value of the type attribute on an input element accepts text content.

The syntax expects the following:

<input type="text">

file value

The file value of the type attribute of an input element accepts (the name, type, and body of) a file content.

The syntax expects the following:

<input type="file">

range value

The range value of the type attribute of an input element accepts an approximate floating-point number content.

The syntax expects the following

<input type="range">

number value

The number value of the type attribute of an input element accepts a specific floating-point number content.

The syntax expects the following:

<input type="number">

tel value

The tel value of the type attribute of an input element accepts telephone number content.

The syntax expects the following:

<input type="tel">

date value

The date value of the type attribute of an input element accepts a day, a month, and a year content.

The syntax expects the following:

<input type="date">

month value

The month value of the type attribute of an input element accepts the month, and year content of a date.

The syntax expects the following:

<input type="month">

week value

The week value of the type attribute of an input element accepts the week and year content of a date.

The syntax expects the following:

<input type="week">

time value

The time value of the type attribute of an input element accepts an hour, a minute, a second, and a millisecond content.

The syntax expects the following:

<input type="time">

datetime-local value

The datetime-local value of the type attribute of an input element accepts date and time content with no time-zone offset.

The syntax expects the following:

<input type="datetime-local">

hidden value

The hidden value of the type attribute of an input element accepts any content from a program, not a user.

The syntax expects the following:

<input type="hidden">

checkbox value

The checkbox value of the type attribute of an input element accepts one of two content states.

The syntax expects the following:

<input type="checkbox">

radio value

The radio value of the type attribute of an input element accepts one of two content states across a radio group

The syntax expects the following:

<input type="radio">

image value

The image value of the type attribute of an input element submits all fields belonging to its form with or without an image coordinate.

The syntax expects the following:

<input type="image">

pattern attribute

The pattern attribute on an applicable input element specifies an acceptable form of value.

The value is a regular expression.

The syntax is as follows:

<input type="[applicable-value]" pattern="[regex]">

min attribute

The min attribute on an applicable input element specifies the minimum acceptable value for a field.

The value depends on expectations of the type attribute.

The syntax is as follows:

<input min="[minimum-value]">

max attribute

The max attribute on an input element specifies the maximum acceptable value for a field.

The value depends on expectations of the type attribute.

The syntax is as follows:

<input type="[applicable-value]" max="[maximum-value]">

step attribute

The step attribute on an applicable input element specifies a factor to increment or decrement a field value.

The value is one of the following 2 types:

The syntax is as follows:

<input step="[arithmetic-factor]">

list attribute

The list attribute on an applicable input element associates a list of value suggestions.

The value is an ID of a datalist element.

The syntax is as follows:

<input type="[applicable-value]" list="datalist-id">

checked attribute

The checked boolean attribute of an input element with the type attribute of radio value or checkbox value turns on the state.

The syntax takes the form below:

<input type="[radio|checkbox]" checked>

accept attribute

The accept attribute of an input element hints at the kind of file value of a type attribute.

The value is a set of the following comma-separated tokens:

The syntax takes the form below:

<input accept="[comma-separated-tokens]">

src attribute

The src attribute of an input element specifies the address for the image value of a type attribute.

The value is a URL.

The syntax is as follows:

<input type="image" src="[url]">

alt attribute

The alt attribute of an input element specifies a label for the image value of a type attribute.

The value is a text.

The syntax is as follows:

<input type="image" alt="[label]">

height attribute

The height attribute of an input element specifies the highness of the image value of a type attribute.

The value expects a non-negative integer.

The syntax is as follows:

<input type="image" height="[non-negative-integer]">

width attribute

The width attribute of an input element specifies the wideness of the image value of a type attribute.

The value expects a non-negative integer.

The syntax is as follows:

<input type="image" width="[non-negative-integer]">

button element

A button element specifies a singular control.

The syntax expects the following:

<button></button>

type attribute

The type attribute of a button element specifies the kind of singular control.

The value is either a reset, submit, or button token.

The syntax is as follows:

<button type="[reset|submit|button]"></button>

Utilities

form element

A form element manages a set of content forms and fieldset elements.

The syntax expects the following:

<form></form>

rel attribute

The rel attribute of a form element specifies the type of relationship between the form handler and the document.

The value is an unordered set of unique space-separated tokens. The applicable tokens are noreferrer, noopener, and opener.

The syntax takes the form below:

<form rel="[noreferrer|noopener|opener]"></form>

Besides these 3 standard tokens are possible extension tokens

noreferrer token

The noreferrer token in the rel attribute of a form element avoids sending referrer information to the content form handler.

The syntax is as follows:

<form rel="noreferrer"></form>
noopener token

The noopener token in the rel attribute of a form element removes the auxilliary browsing context for any new window upon the submission of content form.

The syntax is as follows:

<form rel="noopener"></form>
opener token

The noopener token in the rel attribute of a form element includes the auxilliary browsing context for any new window upon the submission of content form.

The syntax is as follows:

<form rel="opener"></form>

accept-charset attribute

The accept-charset attribute of a form element specifies the character encoding for content submission.

The value must be a "utf-8".

The syntax takes the form below:

<form accept-charset="utf-8"></form>

fieldset element

A fieldset element groups a set of content forms.

The syntax expects the following:

<fieldset></fieldset>

legend element

A legend element captions a fieldset element.

The syntax expects the following:

<legend></legend>

label element

The label element captions a content form.

The syntax expects the following:

<label for="[id]"></label>

for attribute

The for attribute of a label element associates the caption to a content form.

The value is the ID of the content form.

<label for="[ID]"></label>

datalist element

A datalist element provides suggestions for an input element.

The syntax expects the following:

  • 0 local attributes
  • 0 or more phrasing content. Below are 2 scenarios.
    • each option element provides a suggestion
    • each other element provides a fallback
<datalist></datalist>

option element

An option element specifies a suggestion for a datalist element or a choice for a select element.

The syntax expects the following:

  • 0 or 1 selected attribute distinct to an option element
  • 0 or 1 label, disabled, or value attributes common to other elements. There's one exception:
  • 0 or 1 of global attributes
  • 1 text element if there's no value attribute
<option>[text if no `value` attribute]</option>

selected attribute

The selected boolean attribute of an option element specifies the element as the default.

The syntax takes the form below:

<option selected></option>

label attribute

The label attribute on applicable content forms specifies a caption.

The syntax takes the form below:

<applicable-content-form label="[caption]">

disabled attribute

The disabled boolean attribute on applicable content forms renders the form non-functional. For an optgroup element or fieldset element, the disabled attribute renders all child content forms non-functional.

The syntax is as follows:

<applicable-content-form disabled>

readonly attribute

The readonly boolean attribute on applicable content forms makes the form uneditable.

The syntax is as follows:

<applicable-content-form readonly>

required attribute

The required boolean attribute on applicable content forms makes the form a must to fill.

The syntax is as follows:

<applicable-content-form required>

size attribute

On a select element, the size attribute specifies the number of option items in the element's viewport.

Meanwhile, on applicable input elements, the size attribute specifies the number of characters in the element's viewport.

The value expects a non-negative integer.

On a select element with a multiple attribute, the default value for a size attribute is 4. Without the attribute, it's 1.

On applicable input elements, the default value for a size attribute is 20.

The syntax is as follows:

<applicable-content-form size="[non-negative-integer]">

maxlength attribute

The maxlength attribute of applicable content forms specifies the maximum number of characters allowed on the form.

The value must be a non-negative integer

The syntax is as follows:

<applicable-content-form maxlength="[non-negative-integer]">

minlength attribute

The minlength attribute of applicable content forms specifies the minimum number of characters allowed on the form.

The value must be a non-negative integer

The syntax is as follows:

<applicable-content-form minlength="[non-negative-integer]">

placeholder attribute

The placeholder attribute of applicable content forms hints at the expected format for an empty value.

The value is a text.

The syntax is as follows:

<applicable-content-form placeholder="[value-format]">

autocomplete attribute

The autocomplete attribute on applicable content forms allows the prediction of values. But, for input element with type attribute of hidden value, the autocomplete attribute describes the meaning of the given value.

The value is either one of the following:

off token

This indicates no automatic completion on the content form.

This token is not available for an input element with the type attribute of hidden value.

on token

This indicates there will be unguided value predictions for the content form

This token is not available for an input element with the type attribute of hidden value.

Autofill detail token

This indicates the specific type of value to predict for the content form.

This token is not available on a form element.

The syntax is as follows:

<applicable-content-form autocomplete="[token]">

value attribute

The value attribute on an applicable content form specifies the default content for form submission.

The syntax is as follows:

<applicable-element value="[val]">

multiple attribute

The multiple boolean attribute on an applicable content form allows the acceptance of more than one value.

The syntax is as follows:

<applicable-content-form multiple>

name attribute

The name attribute on applicable elements identifies the element for content submission.

The value is an form-specific ID.

The syntax is as follows:

<applicable-content-form name="[form-specific ID]">

dirname attribute

The dirname attribute on applicable content forms auto-includes the content direction for submission.

The value is a non-empty name to identify the autogenerated direction value.

The syntax is as follows:

<applicable-content-form dirname="[ID]">

form attribute

The form attribute on applicable content forms associates the element to a form element.

The value is the ID of the respective form element.

The syntax is as follows:

<applicable-content-form form="[ID]">

formaction attribute

The formaction attribute of an applicable element specifies the content form handler. A form element uses the attribute synonym action.

The value is a URL address.

The syntax takes the form below:

<applicable-element formaction="[url]">

<!-- or -->

<form action="[url]"></form>

formenctype attribute

The formenctype attribute of an applicable element specifies the encoding type for content submission. A form element uses the attribute synonym enctype.

The value is one of the following 3 keywords:

  • multipart/form-data

  • text/plain

  • application/x-www-form-urlencoded.

    This is the default if an invalid keyword is specified.

The syntax takes the form below:

<applicable-element formenctype="[enctype-keyword]">

<!-- or -->

<form enctype="[enctype-keyword]"></form>

formmethod attribute

The formmethod attribute of an applicable element specifies the transfer mechanism for content submission. A form element uses the attribute synonym method.

The value is one of the following 3 keywords:

  • get, for content transfer through URL.

    This is the default if an invalid keyword is specified.

  • post, for content transfer through the HTTP's request body.

  • dialog, to not transfer but close its parent dialog element.

The syntax takes the form below:

<applicable-element formmethod="[get|post|dialog]">

<!-- or -->

<form method="[get|post|dialog]"></form>

formnovalidate attribute

The formnovalidate boolean attribute of an applicable element skips validating the field before content submission. A form element uses the attribute synonym novalidate.

The syntax takes the form below:

<applicable-element formnovalidate>

<!-- or -->

<form novalidate></form>

formtarget attribute

The formtarget attribute on an applicable element specifies the environment the form submission resort to. A form element uses the attribute synonym target.

The value is a navigable target name or keyword.

<applicable-element formtarget="[navigable-name-or-keyword]">

<!-- or -->

<form target="navigable-name-or-keyword"></form>

reset value

The reset value of the type attribute of an applicable element set the associated content forms to their default.

The syntax expects the following:

<applicable-element type="reset">

submit value

The submit value of the type attribute on an applicable element submits associated content forms.

The syntax expects the following:

<applicable-element type="submit">

button value

The button value of the type attribute of an applicable element specifies a programmable action.

The syntax expects the following:

<applicable-element type="button">

popovertarget attribute

The popovertarget attribute on applicable content forms signifies a popover element.

The value is the ID of that popover element.

The syntax is as follows:

<applicable-content-form popovertarget="[ID]">

popovertargetaction attribute

The popovertargetaction attribute on applicable content forms manages the visibility of a popover.

The value is one of the following keywords:

  • toggle, shows, or hides the targeted popover element. This is the default.
  • show, shows the targeted popover element
  • hide, hides the targeted popover element

The syntax is as follows:

<applicable-content-form popovertargetaction="[toggle|show|hide]">