HTML5 is a format for a text file, which makes pretty stuff happen to the text when viewed in an HTML5 browser. For a complete explanation, see the full picture.

I want to write down my understanding of HTML5 forms and field elements so that others and my future self can comprehend or be reminded of the basics. Field elements are organized via form elements. By field element, I mean an element of HTML5 (named below) which offers to the user a field for output or input by text, selection, or numbers.

Organizing fields into forms

Field elements can be organized into form elements for submission and logical grouping. A collocated group of field elements may be labeled with a fieldset element for the user. Each field element may have a label element to enhance the meaning and selectable area for the user.

fieldset
Draws a box around content with a labeling text value along the border at top left. The legend child element defines the labeling text value. A root sectioning element.
form
Logical container for field elements for collected submission to servers.
input type=hidden
Exceptional input with no mutability nor display directly from the user agent.
label
Its content labels an associated field element. I like how when I click on the label, the input or other field is brought into focus. I ♥ labels.
legend
I can have one per fieldset element. Adds a title along the top border to the left of the fieldset element.

Textual field elements

The following field elements accept text provided as input from the user.

input type=email
Input an email or emails (if multiple attribute is present) from the user.
input type=password
Input text, but mask the characters from the user from view with a repeated dummy character.
input type=search
Input a search string from the user.
input type=tel
Input a telephone number from the user.
input type=text
Input a line of text from the user. An input element acts like a text input by default when the type attribute is unspecified or unrecognized by the browser.
input type=url
Input a URL from the user.
textarea
Input text accepting multiple lines of input from the user. The field value is the escapable raw text of the element.

The following additional javascript properties are applicable to text field elements.

selectionStart
For accessing or modifying the start of the user's selection. Not applicable to type=email.
selectionEnd
For accessing or modifying the end of the user's selection. Not applicable to type=email.
selectionDirection
For accessing or modifying the direction of the user's selection. Not applicable to type=email.
textContent
For reading or modifying the value of the textarea element.
In javascript, the textContent property may include the placeholder text, so use the value property instead.
value
For reading or modifying the value of each input or textarea element.

The following additional javascript methods are applicable to text field elements excluding type=email elements.

select()
Selects the full text in the text field.
setSelectionRange(start, end, "forward")
Selects partial text range in the text field. Selects from the startth character to the end-1th character.
setSelectionRange(start, end, "backward")
Selects partial text range in the text field. Selects from the end-1th character to the startth character.
setRangeText(replacement)
Replaces the current selection in the text field. Additional parameters may be specified as follows.
setRangeText(replacement, start, end)
setRangeText(replacement, start, end, "preserve")
Replace text from the startth character to the end-1th character. During replacement, maintain the current selection of text, except expand the selection if overlapping the replaced text.
setRangeText(replacement, start, end, "select")
Replace text from the startth character to the end-1th character. Select the replacement text.
setRangeText(replacement, start, end, "start")
setRangeText(replacement, start, end, "end")
Replace text from the startth character to the end-1th character. Place the cursor at the "start" or "end", respectively.

Selection field elements

Some field elements have selectable values in one form or another.

datalist
Adds a shared list of options to any number of input elements with text fields or numeric fields. The element itself and its contents are hidden if supported by the browser. Contains option elements to specify the selections. Options may be organized into titled option groups via optgroup elements.
input type=color
A color palette selection field. If unsupported, the behavior falls back to type=text.
input type=file
Upload a file or files (if multiple attribute is present) from the user on the client. Additional javascript properties:
files
Returns a FileList of the most recently selected set of files by the user.
keygen
Cryptographic key pair generator field. On form submission, the public key is sent to the server (which may be packaged as a client certificate for download), and the private key is stored in the local keystore.
optgroup
A control to group and title a set of option elements in a datalist or select element.
option
An option specified as a child of an optgroup, datalist or select element.
select
Input a choice from a fixed set of options. May choose one or more if multiple attribute is present. Contains option elements to specify the selectable input values and content of each for display. Options may be organized into titled option groups via optgroup elements.

Numeric field elements

Numeric field elements may accept basic numeric and temporal data. The following HTML5 elements fall into this category specifically.

input type=number
Input a number from the user.
input type=range
Input a number from the user by indirect use of a slider control.
input type=date
Input a date from the user.
input type=time
Input a time from the user.
input type=datetime
input type=datetime-local
input type=month
input type=week
Not part of the HTML5 standard.

The following additional javascript properties and methods are applicable to numeric field elements.

value
valueAsNumber
valueAsDate
For reading or modifying the value of the input element.
stepDown(n)
stepUp(n)
Moves the value down or up by n steps. For modifying the value of the input element.

Output fields

The output element defines a field of output for display or attachment to a form. The meter and progress elements deal with numeric values for output and display, but are not attached to any form.

meter
A gauge output. If unsupported, the innerHTML is the fall back display content. Attributes:
high
May apply an upper bound of the mid range and lower bound defining the high range.
low
May apply a lower bound of the mid range and upper bound defining the low range.
max
May apply an upper bound of the high range and overall upper bound. Default is 1.0.
min
May apply the lower bound of the low range and overall lower bound. Default is 0.0.
optimum
May apply an optimum value in gauge and marker defining the most preferred range (can be low, mid or high).
value
Must apply a current value to the element.
Restrictions:
  • minvaluemax
  • minlowhighmax
  • minoptimummax
output
An element whose value is calculated from other inputs or user actions. Javascript properties:
defaultValue
The default contents of the element.
htmlFor
Javascript interface to the for attribute.
textContent
value
The current value of the element equals the contents of the element.
progress
A progress bar output. If unsupported, the innerHTML is the fall back display content. Attributes:
max
May apply an upper bound of progress. Default is 1.0.
value
May apply a current progress value to the element. Default is indeterminate progress.

Button field elements

Buttons may take action such as submitting a form or executing a script. Buttons may send input when name and value attributes are specified.

button type=button
A button whose innerHTML defines the button display content.
button type=reset
A button for resetting a form whose innerHTML defines the button display content.
button type=submit
A button for submitting a form whose innerHTML defines the button display content.
dialog
Not part of the HTML5 standard so I avoid.
input type=button
A button whose value attribute defines the button display content.
input type=checkbox
A button based on a box which can be checked or unchecked.
input type=image
A button based upon an image.
input type=radio
A button based upon a circle which can be filled or unfilled.
input type=reset
A button for resetting a form whose value attribute defines the button display content.
input type=submit
A button for submitting a form whose value attribute defines the button display content.
menu
menuitem
Not part of the HTML5 standard so I avoid.

Field display attributes

Besides these attributes, elements also may have Global Attributes and Event Attributes.

alt
Must apply to input elements if type=image. A freeform text equivalent of the image if the image is not available.
autofocus
May apply to one button, input, keygen, select or textarea element per document. Boolean attribute to focus the field automatically upon document load.
cols
May apply to textarea elements. Default is 19. The number of characters to display per row at a time.
for
May apply to label elements. Default is the label's descendant field element. The ID attribute of a field element to be labeled in the document.
height
May apply to input elements if type=image. Rendered image height.
ID
Global attribute that may apply to any field so I can match up a disjoint label element. The attribute value is repeated in the for attribute of the corresponding label element.
label
Must apply to optgroup elements. User visible title for the option group.
May apply to option elements. Default is the optionElement.textContent. User visible title for the option.
placeholder
May apply to input (if type=email, type=password, type=search, type=tel, type=text, type=url, or type=number) and textarea elements. Freeform placeholder text to show when the field is empty.
rows
May apply to textarea elements. Default is 2. The number of rows to display at a time.
size
May apply to input (if type=email, type=password, type=search, type=tel, type=text or type=url) elements. Default is 20 characters. The number of characters to display at a time.
May apply to select elements. The number of options to show the user at a time.
src
Must apply to input elements if type=image. A URL to reference an image resource.
width
May apply to input elements if type=image. Rendered image width.

Field state attributes

Various attributes track state and behavior of fields as follows.

autocomplete
May apply to form, input and textarea elements. Default is to inherit from the owning form element. To specify whether the browser should apply heuristics for autocomplete. Accepts one of two values.
on
To enable browser or plugin heuristics which may remember or autocomplete a form field.
off
To disable browser and plugin heuristics for one-time inputs or security reasons, or for a field that has autocomplete features implemented in the document itself.
challenge
May apply to keygen elements. A string to package with the generated and signed public key.
checked
May apply to input (if type=checked or type=radio) elements. Boolean attribute bound to the presence of the check or fill in the box or circle, respectively.
disabled
May apply to button, fieldset, input, keygen, optgroup, option, select and textarea elements. Boolean attribute to disable the field element to block input and regular interaction.
for
May apply to output elements. An unordered space-separated list of values that must match the IDs of field elements that are the input fields to calculate this output field.
ID
Global attribute that may apply to any HTML5 element for reference from javascript or CSS code. If my fields are created via javascript, I can save the HTMLElement references directly as I build so I may bypass ID lookup.
Must apply to any field that is an input to calculate an output element. The value is repeated in the for attribute of the output element.
keytype
May apply to keygen elements. The type of cryptographic key to generate.
readonly
May apply to input (if type=email, type=password, type=search, type=tel, type=text, type=url, type=number, type=date or type=time) or textarea elements. Boolean attribute to make the value immutable. Acts like the disabled attribute except the text is selectable.
selected
May apply to option elements. Boolean attribute bound to the selection state of the option.
value
May apply to input (if type=email, type=password, type=search, type=tel, type=text, type=url, type=number, type=range, type=color, type=date or type=time) elements. The current value of the element. The name and value attributes are submitted as pairs.
May apply to button elements. The name and value attribute pair are submitted when clicked to submit the form.
Must apply to input (if type=button, type=reset or type=submit) elements. The text on the button. The name and value attribute pair are submitted when clicked to submit the form.
May apply to input (if type=hidden) elements. The current hidden value of the element. May be modified via scripts only.
May apply to input (if type=checked) elements. The name and value attribute pair are submitted when checked and multiple checkboxes with the same name can be submitted simultaneously.
May apply to input (if type=radio) elements. The name and value attribute pair are submitted when filled, but if multiple radio buttons have the same name, a radio group is formed between them so only one can be selected or submitted.
May apply to option elements. The value if selected in the field (input or select element). Default is the optionElement.textContent. If selected, the field's name attribute and the options' value attribute(s) are submitted as pairs.
Must not apply to an input element if type=file or type=image.

Field domain attributes

Several attributes can control client validation and restrictions. The catch is the client is typically untrusted, so these checks must support trusted users, yet cannot replace server validation.

accept
May apply to input elements if type=file. A comma-separated list with the following possible values.
audio/*
video/*
image/*
A wild card type taking any of these three common classes of media files
file_extension
A file extension value such as .txt or .mpeg.
media_type
An IANA media type.
accept-charset
May apply to form elements. A space-separated list of character encodings that may be accepted by the form.
ID
Global attribute that must apply to datalist elements so I may match up input elements. The attribute value is repeated in the list attribute of input elements.
list
May apply to input elements. The value is repeated in the ID attribute of the datalist element so the freeform field may include selectable values.
max
May apply to input (if type=number, type=range, type=date or type=time) elements. Default is unlimited. Maximum allowed value.
maxlength
May apply to input (if type=email, type=password, type=search, type=tel, type=text or type=url) and textarea elements. The maximum number of input characters to satisfy the input validation.
min
May apply to input (if type=number, type=range, type=date or type=time) elements. Default is unlimited. Minimum allowed value.
minlength
May apply to input (if type=email, type=password, type=search, type=tel, type=text or type=url) and textarea elements. The minimum number of input characters to satisfy the input validation.
multiple
May apply to input (if type=email or type=file) and select elements. Boolean attribute so the user may select multiple values (or files) for simultaneous submission.
pattern
May apply to input (if type=email, type=password, type=search, type=tel, type=text or type=url) elements. A javascript regular expression which input must match to satisfy the input validation.
required
May apply to input (if type=email, type=password, type=search, type=tel, type=text, type=url, type=number, type=date, type=time, type=file, type=checked or type=radio), select and textarea elements. Boolean attribute to require the form field for submission.
step
May apply to input (if type=number, type=range, type=date or type=time) elements. Minimum allowed resolution or the minimum difference between consecutive possible values.
type
May apply to input elements. Default is type=text if unspecified or unrecognized. Specifies the type of input which is active on the element.

Form submission attributes

After display, input, and validation, I (typically) want to submit the form to the server. As a general rule, I want to assign field elements an ID and a name attribute, so that HTML, javascript, and the server can play together better.

action
May apply to the form element. Default is the current document. A URL to target for submitting the form.
dirname
May apply to input (if type=email, type=password, type=search, type=tel, type=text or type=url) and textarea elements. Adds a named field specifying directionality (ltr or rtl) to the form submission for the freeform text field.
enctype
May apply to form elements on submission to affect encoding for method=post. Accepts one of the following possible values.
application/x-www-form-urlencoded
Values are encoded like method=get in the message to the server but not appended to the URL.
multipart/form-data
No encoding. Required for forms which have a input type=file control.
text/plain
Spaces are converted to "+" symbols.
form
May apply to button, fieldset, input, keygen, label, object, output, select and textarea elements. Associates fields with a disjoint form element.
formaction
formenctype
formmethod
formnovalidate
formtarget
May apply to input (if type=submit or type=image) and button (if type=submit) elements. Default is to inherit submission attributes from the form. If specified, button attribute values override form attribute values when the form is submitted from that button.
ID
Global attribute that must apply to form elements to match the form attribute of disjoint field elements in the document and to reference the form from javascript consistently. I assign the same attribute value to both the ID and the name of every form element.
method
May apply to form elements. Controls HTTP request type upon form submission. Accepts one of the following possible values.
get
To encode variables in the URL via HTTP GET method. In the URL, the path is followed by a ? question mark, followed by name1=value1 optionally followed by &nameN=valueN. Spaces are converted to + plus symbols, and special characters are converted to escaped %HEX values.
post
For general form submission via HTTP POST method.
name
May apply to input, button, fieldset, keygen, output, select and textarea elements. Name of a field to use for form submission and in the formElement.elements javascript collection. The name and value attribute pair are submitted when present. Special values:
isindex
Causes to include the value of this control in the submission without a name. Requirements:
    An input type=text element.
  • The first control in a form.
  • The owning form is submitted using application/x-www-form-urlencoded.
_charset_
Causes an automatic value communicating the character encoding of the submission. Requirements:
    An input type=hidden element.
  • No value attribute.
May apply to input (if type=checked) elements. The name and value attribute pair are submitted when checked and multiple checkboxes with the same name can be submitted simultaneously.
May apply to input (if type=radio) elements. The name and value attribute pair are submitted when filled, but if multiple radio buttons have the same name, a radio group is formed between them so only one can be selected or submitted.
May apply to form elements. Represents the form's name within document.forms javascript collection. I assign the same attribute value to both the ID and the name of every form element.
novalidate
May apply to form elements. Boolean attribute that disables validate action upon form submission.
target
May apply to a, area, base, link and form elements. The window location preference upon navigation for opening and rendering the resource. Accepts one of the following possible values.
_blank
Opens a link in a new unnamed tab or window.
_self
Opens a link in the current frame.
_parent
Opens a link in the parent frame.
_top
Opens a link in the window ancestor to the current frame.
framename
Opens a link in a named frame. Can be any frame name except for predefined target names above. Names an existing iframe, tab, or window to provide the result upon form submission. Or else, once the form is exercised, creates a new named tab or window.
wrap
May apply to textarea elements for line break control. Attribute values:
soft
Default. Do not add line breaks where text was wrapped so may submit the value only with the line breaks that were inserted manually.
hard
Besides manual line breaks in form submission, add line breaks where text was wrapped in the form control. Value requires cols attribute.

YES!! I have survived this exposé on how to form HTML5 input, and I hope you have too.