The 24 Content Forms of HTML

A Content Form accepts textual and non-textual data within a Content Block

Select Form

A Select Form accepts text from multiple option items

The syntax is a select element with the following contents:

  • Zero or one count for each of the following attributes:

  • Zero or one count for each global attribute

  • One first-child option element as a placeholder label if the select element has the followings:

    • value attribute with empty string value

    • size attribute with one as value

    • required boolean attribute

  • Zero or more counts for each of the following elements:

<select></select>

Textarea Form

A Textarea Form accepts multi-line text

The syntax is a textarea element with the following contents:

<textarea></textarea>

Sensitive Form

A Sensitive Form accepts text via an obscured medium.

The syntax is a void input element with the following attributes:

<input type="password">

A Search Form accept search terms

The syntax is a void input element with the following attributes:

<input type="search">

Color Form

A Color Form accepts a hex color via a picker

The syntax is a void input element with the following attributes:

<input type="color">

URL Form

A URL Form accepts an absolute URL address

The syntax is a void input element with the following attributes:

<input type="url">

Email Form

An Email Form accepts an Email Address

The syntax is a void input element with the following attributes:

<input type="email">

File Form

A File Form accepts non-textual information via an upload button

The syntax is a void input element with the following attributes:

<input type="file">

Telephone Form

A Telephone Form accepts a telephone number

The syntax is a void input element with the following attributes:

<input type="tel">

Range Form

A Range Form accepts a number within a range

The syntax is a void input element with the following attributes:

<input type="range">

Number Form

A Number Form accepts a number value

The syntax is a void input element with the following attributes:

<input type="number">

Datetime Form

A Datetime Form accept year, month, day, hour, minute, second, and millisecond values via a picker

The syntax is a void input element with the following attributes:

<input type="datetime-local">

Date Form

A Date Form accept year, month, and day values via a picker

The syntax is a void input element with the following attributes:

<input type="date">

Month Form

A Month Form accept year and month values via a picker

The syntax is a void input element with the following attributes:

<input type="month">

Week Form

A Week Form accept week and year values via a picker

The syntax is a void input element with the following attributes:

<input type="week">

Time Form

A Time Form accept hour, minute, second, and millisecond values via a picker

The syntax is a void input element with the following attributes:

<input type="time">

Text Form

A Text Form accepts plain text

The syntax is a void input element with the following attributes:

<input type="text">

Hidden Form

An Hidden Form accepts plain text from a program but, not from a user

The syntax is a void input element with the following attributes:

<input type="hidden">

Radio Form

A Radio Form accepts a value from a set of binary options

The syntax is a void input element with the following attributes:

<input type="radio">

Checkbox Form

A Checkbox Form accepts a value from each item in a set of binary options

The syntax is a void input element with the following attributes:

<input type="checkbox">

Reset Button Form

A Reset Button set associated Content Forms back to their default value.

A Reset Button Form can be a void or non-void content form

Void Reset Button Form

A Void Reset Button Form conveys the button with plain text

The syntax is a void input element with the following attributes:

<button type="reset"></button>

Non-void Reset Button Form

A Non-void Reset Button conveys the button with rich content

The syntax is a button element with the following contents:

<button type="reset"></button>

Submit Button Form

A Submit Button initiates the submission of associated Content Forms.

A collection of Content Forms are associated if they have the same parent Form Card or use a form attribute to the same Form Card

A Submit Button Form can be a void or non-void content form

Void Submit Button Form

A Void Submit Button Form conveys the button with rich content

The syntax is a void input element with the following attributes:

<button type="submit"></button>

Non-void Submit Button Form

A Non-void Submit Button Form conveys the button with rich content

The syntax is a button element with the following contents:

<button type="submit"></button>

Image Button Form

An Image Button initiates the submission of associated Content Forms along with an image coordinate.

A collection of Content Forms are associated if they have the same parent Form Card or use a form attribute to the same Form Card

The syntax is a void input element with the following attributes:

<input type="image">

Custom Button Form

A Custom Button Form initiates a custom command to preferred contents

A Custom Button Form can be a void or non-void content form

Void Custom Button Form

A Void Custom Button Form conveys the button with plain text

The syntax is a void input element with the following attributes:

<button type="button"></button>

Non-void Custom Button Form

A Non-void Custom Button Form conveys the button with rich content

The syntax is a button element with the following contents:

<button type="button"></button>