Form elements and attributes in HTML5 provide a greater degree of semantic mark-up than HTML4 and remove a great deal of the need for tedious scripting and styling that was required in HTML4. The forms features in HTML5 provide a better experience for users by making forms more consistent across different web sites and giving immediate feedback to the user about data entry. They also provide this experience to users who have scripting disabled in their browser.
This article summarizes changes to HTML forms introduced in HTML5. For a detailed guide to using forms, see our extensive HTML forms guide.
search: The element represents search entry field. Line breaks are automatically stripped from the input value, but no other syntax is enforced.
tel: The element represents a control for editing a telephone number. Line breaks are automatically stripped from the input value, but no other syntax is enforced, because telephone numbers vary widely internationally. You can use attributes such as
maxlengthto restrict values entered in the control.
url: The element represents a control for editing a URL. Line breaks and leading and trailing whitespaces are automatically stripped from the input value.
1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )where
atextis defined in RFC 5322 section 3.2.3, and
ldh-stris defined in RFC 1034 section 3.5.
<input> element also has new attributes:
list: The ID of a
<datalist>element whose content,
<option>elements, are to be used as hints and are displayed as proposals in the suggestion area of the input field.
pattern: A regular expression that the control's value is checked against, which can be used with
form: A string indicating which
<form>element this input is part of. An input can only be in one form.
formmethod: A string indicating which HTTP method (GET or POST) should be used when submitting; it overrides the
<form>element, if defined. The
formmethodonly applies when the
submit, and the
formattribute has been set.
x-moz-errormessage: A string that is displayed as an error message when the field fails to validate. This is a Mozilla extension, and is non-standard.
This segment defines a one line input the user can enter into the box.
<form> Enter your Name <input type="text" name="name"> </form>
This section allows the user to select multiple options to choose from a limited numbers of options.
<input type="checkbox" name="chk" value="" checked> Do you want the newsletter
Radio < input> element
<form> <input type="radio" name="frequency" value="daily">Daily<br> <input type="radio" name="frequency" value="weekly">Weekly<br> <input type="radio" name="frequency" value="monthly">Monthly<br> <input type="radio" name="frequency" value="yearly">Yearly </form>
<form> element has a new attribute:
novalidate: This attribute prevents the form from being validated before its submission.
element represents the result of a calculation.
You can use the
for attribute to specify a relationship between the
element and other elements in the document that affected the calculation (for example, as inputs or parameters). The value of the
for attribute is a space-separated list of IDs of other elements.
Gecko 2.0 (but not necessarily other browser engines) supports defining custom validity constraints and error messages for
<output> elements, and therefore applies the
:-moz-ui-valid CSS pseudo-classes to them. This can be helpful in situations where the calculated result violates a business rule, but no specific input value does (for example, "The total of percentages must not exceed 100").
The placeholder attribute
The autofocus attribute
autofocus attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form item in a document can have the
autofocus attribute, which is a Boolean. This attribute can be applied to the
elements. The exception is that
autofocus cannot be applied to an
autofocus element if the
type attribute is set to
hidden (that is, you cannot automatically set focus to a hidden control).
The label.control DOM property
HTMLLabelElement DOM interface provides an extra property, in addition to the properties that correspond to the HTML
element attributes. The control property returns the labeled control, that is, the control that the label is for, which is determined by the
for attribute (if it is defined) or by the first descendant control element.
HTML5 provides syntax and API items to support client-side validation of forms. While this functionality does not replace server-side validation, which is still necessary for security and data integrity, client-side validation can support a better user experience by giving the user immediate feedback about the input data.
title attribute is set on the
<input> element, its value is used as tooltip. However, if the validation fails, this tooltip text will be replaced with the associated error message. It is possible to customize this error message using the non-standard
x-moz-errormessage attribute or when calling the
<input type="email" title="Please, provide an e-mail" x-moz-errormessage="This is not a valid e-mail">
<button>elements in a form; to style a button based on the validity of the associated form, use the
HTML Syntax for Constraint Validation
The following items in HTML5 syntax can be used to specify constraints on form data.
requiredattribute on the
<textarea>elements indicates that a value must be supplied. (On the
requiredapplies only in conjunction with certain values of the
patternattribute on the
<input>element constrains the value to match a specific regular expression.
maxattributes of the
<input>element constrain the minimum and maximum values that can be entered.
stepattribute of the
<input>element (when used in combination with the
maxattributes) constrains the granularity of values that can be entered. A value that does not correspond an allowed value step does not validate.
maxlengthattribute of the
<textarea>elements constrains the maximum number of characters (in Unicode code points) that the user can enter.
- The values
typeconstrain the value to being a valid URL or e-mail address, respectively.
In addition, you can prevent constraint validation by specifying the
novalidate attribute on the
<form>, or the
formnovalidate attribute on the
<button> element and on the
<input> element (when
image). These attributes indicate that the form is not to be validated when it is submitted.
Constraint Validation API
The following DOM properties and methods related to constraint validation are available to client-side scripts:
checkValidity()method, which returns true if all of this form element's associated elements that are subject to constraint validation satisfy their constraints, and false if any do not.
- On form-associated elements:
willValidateproperty, which is false if the element has constraints that are not satisfied.
validityproperty, which is a
ValidityStateobject representing the validity states that the element is in (i.e., constraint failure or success conditions).
validationMessageproperty, which is a message describing any constraint failures that pertain to the element.
checkValidity()method, which returns false if the element fails to satisfy any of its constraints, or true otherwise.
setCustomValidity()method, which sets a custom validation message, allowing for constraints to be imposed and validated beyond those that are predefined.