site logo

Form attributes according to HTML5 specification

What about the new form elements of HTML 5 specification, we have seen in the previous article. Now look at the new HTML5 form attributes. This article provides an overview of support for new attributes in current browsers, live forms examples, HTML code, comment and description of how form attributes change the form behavior.

Browsers support

attributeIEFirefoxOperaChromeSafari
autocomplete no3.59.53.04.0
autofocus no4.010.03.04.0
form no4.09.510.0no
form overrides no4.010.510.0no
list, datalist no4.09.5nono
min, max, step nono9.53.0no
novalidate no4.09.010.0no
pattern no4.09.53.03.0
placeholder no4.011.03.03.0
required no4.09.010.0no

The table includes only the final versions of browsers, not beta. I recall that the HTML5 specification is not yet in final status and marked support may be changed or appended.

Description and examples of attributes

New attributes can be used just now, but you can not rely on them as there is no guarantee that the actual users browser supports the required attribute. This can be ensured in an intranet environment, where the type of used browser is prescribed by internal regulations of the company. Whether your current browser supports some new form attribute, you can test in live form examples on this page.

<form ... autocomplete="on">

autocomplete attribute determines whether a form or some of its elements will be offering "similar" values previously entered in the same form field. When the user begins to type in form field, the browser offers list of previously entered text. The value on allows to save content of element for later use, the value off disables this feature. Attribute autocomplete should work in these types of form elements: form, text, url, tel, email, search, password, range, color and all variants of the date pickers. The following code example is the form where autocomplete is ready each elemet of form, except for email element.


<form action="HTML5attrib.asp" method="get" autocomplete="on">
Name:  <input type="text"  name="name">
...
E-mail: <input type="email" name="email" autocomplete="off">
<input type="submit">
</form>

<input ... autofocus>

A form element that has the autofocus attribute set, is active after the page is loaded. This means that such an element is ready to type in a search phrase and you do not have to activate the element by mouse click, or by Tab key. This attribute is suitable for the search form.

When any test form on this page is submitted, the server returns the same page, however the input box of actual form will get autofocus attribute. Except to browsers IE8 and FF3, which do not support this attribute, the page automatically scrolls so that the input field is visible, although the way of scroll is different across browsers. You can see very clear and precise marked an active input box in Chrome. In other browsers, an active field is recognizable only by the text cursor. Indication of focused elements is explained in the article focus of elements.

<input ... form="formID">

On one page multiple forms can be located, but the only one form can be submitted. Only those elements are submitted which are situated inside of the form element (in between opening and closing form tag). This means that an element located outside the form is not submitted to server for processing.

By help of attribute form  it is possible to specify that an element is part of the form even if code of element is situated outside the form code. The attribute value specifies the form id  to which the element belongs. The element may be assigned into multiple forms simultaneously. Then value of attribute form  contains the list of all the forms (space separated). Matching is done by using the form ID as shown in the following code sample:


<form ... id="formID">
First name: <input type="text" name="fname">
<input type="submit">
</form>
...
Last name: <input type="text" name="lname" form="formID">

Attribute form can be specified in all types of input elements.

Override Form element attributes

Sometimes is needed to override attributes of the form element. This is possible with JavaScript, but what if the script is turned off in the browser? For this purpose, the set of override attributes are specified. Attributes are helpful in the form which has multiple submit elements. Each submit element can then set other conditions for submitting the form. The following attributes can be used in the elements submit and image and work even when JavaScript is turned off.

attribute in submitattribute in formoverrides
formactionactionoverrides the form action attribute
formenctypeenctypeoverrides the form enctype attribute
formmethodmethodoverrides the form method attribute (get / post)
formnovalidatenovalidateoverrides the form novalidate attribute
formtargettargetoverrides the form target attribute

Here is an example of form HTML code. The form contains one text field and three submit buttons. The first button submit the form in current way, the second button submits the form to another server script and the third button submits the form to the original script, but without validation.


<form action="demo.asp" method="get">
E-mail: <input type="email" name="userid">
<input type="submit">
<input type="submit" formaction="demo_admin.asp" value="submit as admin">
<input type="submit" formnovalidate="true" value="no validation">
</form>

<input ... list="mydata">, <datalist id="mydata">


Attribute list, together with the datalist  element creates a form element, which is a sort of combination of select and textbox components. You can select one of the preset options (such as select), or type in your own value (such as textbox) when the options offered are inadequate.

On the right is a test form that uses the datalist element. When textbox is activated, list of data appears below the textbox and any data item can be selected. That works in Opera11, where datalist is offered whenever element gets focus. In FireFox4 cursor key up, or down have to be used to unroll datalist. Here is a sample code for this form.


<form method="get" action="HTML5attrib.asp">
<input type="text" name="text3" list="mydata">
<datalist id="mydata">
  <option value="Firefox"></option>
  <option value="Chrome"></option>
  <option value="Opera"></option>
  <option value="IE"></option>
</datalist>
<input type="submit">
</form>

If the attribute <option>  is not closed with </option>  tag, Safari5 rendering of the page is broken. It is possible to specify two items inside of option element: <option label="name..." value="address..."></option>  and by this way create e.g. mailing list.

<input type="number" min="0" max="12" step="1">


Attributes min, max, step can be used for input types containing numbers or dates to specify limits. Test whether the entered value corresponds to the prescribed limits, is performed just before the form is submitted.

Form example on the right expects numeric value ranging from 0 to 12 with no, or one decimal place. Data entry can be made by keyboard typing in digits, or by help of cursor keys (up, down), or by mouse clicking the small buttons which are part of the element. Correct element can be seen only in Opera and Chrome. Other browsers display the nuber element as current element type of text.

<input ... multiple>

In earlier versions of HTML attribute multiple  has been specified only for use in element select. By use the Ctrl key and mouse click, multiple items in select  element can be marked. HTML5 specification allow this attribute for use in elements type of file and email also. Inside of the named form elements, comma separated list of items can be created.

<form ... novalidate>, <input ... novalidate>

To suppress the validation for the entire form, or only for certain elements of the form can be done by the attribute novalidate. The attribute works with: form element and the following input types: text, search, url, tel, email, password, range, color and elements of all options for date and time enter.

<input ... pattern="[A-z]{3}">


Validation of input field <input type="text"> is sometimes performed by JavaScript and regular expression. Attribute pattern allow to set regular expression criterion, which is used for validation of input field without the need of JavaScript. If the value of input field does not meet the prescribed criterion, the error message pops up and the form is not submitted. Validation is performed when the submit buttons is clicked. Attribute pattern can be used in these types of form elements: text, search, url, tel, email and password.

The test form field on the right has set an attribute pattern="[A-z]{3}"  and expects exactly three letters upper or lower case. The test works only in Opera. Note that you can not type accented letters.

<input ... placeholder="this is placeholder">


In the sample form on the right is the attribute placeholder used in a textbox. It works so that the value of this attribute is visible as light gray text inside the element when the element is empty. Once activated by clicking or using the TAB key (element get focus), placeholder text disappears. Also when any text is written into the element, placeholder is not visible (until the text is deleted).

Placeholder act as a hint, or help, that describes the expected value or data format of an input field. The disadvantage is that it disappears when you insert value. According to the W3C, the placeholder attribute can be used with the following types of elements: text, search, url, tel, email and password. Now it works in Chrome, Safari and Opera browsers. In Chrome, Safari also works in element textarea, which is laudable.

<input type="email" ... reqiured>


Attribute required  attaches a native form field validation without support of JavaScript. According to the W3C, the required  attribute can be used with the following types of elements: date pickers, text, url, email, number, tel, search, password, file, checkbox and radio.

When the attribute required  is specified, form field can not be blank. The next step is verification whether the inserted text (value) matches the declared field type or according to specified pattern attribute.

The form on the right requires an email address. When the submit button is hit, value of textbox is tested whether it conforms to the syntax of email addresses. When the Opera browser finds an error, message appears and the form is not submitted. Other browsers can not work with attribute required  and submit the form anyway.

 

In the specification of new form elements attributes is missing attribute for enable / disable the Enter key to send the form. Older specifications recommend to use Enter key as submit button, only for simple form such as search or login form. Various browsers respond inconsistently to Enter. There is a lack of national support of decimal numbers or dates in the relevant types of form. Finally, there is missing the attribute to block multiple form submission.

updated 2011-03-25