HTML5 Webforms tutorial: new attributes

HTML5 forms: new data types

In the HTML5 Webforms tutorial: new data types we looked at the new input types in HTML5. In addition to many new input data types HTML5 is also enriched with some new attributes with which you can control how the element must behave and also can specify limits and restrictions. The new attibutes are: autocomplete, min, max, multiple, pattern and step. In addition, a new attribute, list, was introduced that can be attached to a new element, <datalist> to create a new method of data entry.

The list attribute

The <datalist> element is reminiscent of a select box, one though in which the user is allowed to enter his own text if he doesn't want to choose from the list of predefined options. This list is included in the new <datalist> element whose id is placed in the value of the list attribute:

<input id="holiday"  type="text" list="holiday destinations">         
 <datalist id="holiday destination">             
	<option label="Spain" value="Spain">             
	<option label="Portugal" value="Portugal">             
	<option label="Morocco" value="Morocco"> 
	<option label="Italy" value="Italy"> 
	<option label="Greece" value="Greece"> 
</datalist>

datalist element
Image 1. Simple "Google suggest" imitation by means of the <datalist> element.

The above example uses type = text for a freely selectable input. It works as a sort of "Google suggest" in which the suggestions are present by means of the <option> elements within the <datalist> element (see Image 1). These <option> elements may also be dynamically loaded, for example by means of an XML file or a database call. (more details concerning the <datatype> element you can find at http://dev.opera.com/articles/view/an-html5-style-google-suggest/). Moreover, you can use < datalist > on any kind of input type (see for the various input types the article HTML5 Webforms tutorial: new data types, for example in url, email, etc. datatypes.

A common question is why the < input > / < datalist > combination is not processed into a single new < select > element. The answer lies in the backward compatibility of HTML5: the < input > / < datalist > combination degrades in older browsers to < input type = text > so that users can enter at least something in that kind of browsers. Using Javascript is it even possible in older browsers to mimic the full functionality of < input > / < datalist >.

The autofocus attribute

The autofocus boolean indicates the possibility of placing the focus on a form element while loading the page. Previously, the developer had to use the javascript function focus(), for example by using a jQuery function in which, after the page was loaded, the focus was placed on the <input> element with id="search" (see example below ):

$(document).ready(function() {
//sets the focus on the <input> element with id="search";
	$('input#search').focus();
});

The new method gives the browser the ability to do smart things like not giving the focus when the user is already typing in another field (a common problem in many Javascript onload focus scripts). There should be only one single element with the autofocus attribute to be present on a page. From a usability perspective, such an element should be used with care. It is recommended to use it only on pages with a single purpose, such as a search form.

The placeholder attribute

A usability trick that is frequently used by developers is to place text in an input field as a hint to the user and then let the hint text disappear when the user places the focus on the field. The original hint text reappears in the field when the user leaves the field (see picture 2). This feature required some JavaSript rules. HTML5 can apply this trick now, without JavaScript, by using the placeholder attribute. The HTML5 specification does say about this however that for long hints or advisory texts the title attribute is more suitable.

placeholder attribuut
Image 2. The placeholder attribute shows a hint text in a form field.

The required attribute

The new required attribute can be used in < textarea > and most of the input fields (except when the type attibuut is hidden, image or some button type such as submit). The browser will not allow the form to be send if the required fields are empty. It is recommended to also add the ARIA aria-required attribute for input fields for the benefit of supporting technologies.

The multiple attribute

<input type = file> is not new in HTML5, but when used in combination with the new multiple attribute, it is possible to upload multiple files: <input type = file multiple>. It can also be used in combination with other types of input, for example, < input type = email multiple > so multiple e-mail addresses can be filled in simultaneously. Currently, however, this is only implemented in Webkit browsers.

The pattern attribute

Some input types, mentioned in HTML5 Webforms tutorial: new data types have 'embedded' regular expressions with which the entered values are validated (eg type = "url" or type = "email"). However, suppose you want to validate by using a completely different regular expression? Using the pattern attribute you can specify any regular expression with which the input must match. So if you want a user always enters a number + capital + two numbers in a field, then the input field should be coded as follows:

<input pattern="[0-9][A-Z][0-9]{2}" name="code" placeholder="4V33" 
title="The code must consist of a number + capital + two numbers.">

You can also add a placeholder as a hint, for example 4V33.

The HTML5 specification indicates that the regular expressions in the attribute pattern correspond to the regular expressions in Javascript, except that there is an implicit ^(?: at the beginning and a )$ at the end are present

Below is another example of the entry of a Dutch zip code with the corresponding pattern attribute. Note that it is now completely wrapped in the introductory ^(?: and closing )$ as indicated in the HTML5 specification:

<input pattern="^(?:[0-9]{4}\t[A-Z]{2})$" 
title="The postal code in the format1111 AA"
placeholder="1111 AA" >

If you are already proficient in working with regular expressions, the new pattern attribute will not cause any problems for you. If not, then you have to a job to do of learning how to deal with this technique, but fear not, the internet is full of ready-made examples you can copy and paste into your HTML5 code.

The autocomplete attribute

Most browsers have some kind of autocomplete functionality. With the new autocomplete attribute however you have more control over this functionality. The default setting for the input field is the inheritance of the autocomplete setting of the form to which the field belongs. When the autocomplete attribute of the form is set to "on", then the concerning field is also ready for autocompletion. Set the concerning field to "off" when you are about to enter the launchcode for the nuclear missile. This is for your eys only Mr. President!

De min and max attributes

As we saw in the discussion of <input type = number > in the article HTML5 Webforms tutorial: new data types these attributes give the scope of numbers to be entered. The form can not be submitted when the entered numbers are smaller or larger than the specified range. Min and max can however also be used for other input types, such as <input type = date min= 2014-01-01 max = 2014-12-31> will not allow a date that does not fall in the year 2014. In many cases the current date will be chosen for min so that only future data can be entered (for example in case of booking a plane tickets) or the currect date for max (for example, in the case of a given birth).

The step attribute

The step attribute controls the step size for numerical input. So if you want the user to enter a value between 0 and 100 euros, rounded to a number of euros that is a multiple of 5, then you can write

<input type=number mix=0 max=100 step=5>

The spinner control will increase/decrease in increments of 5. In the example of the time input, you can also fill in step=any.

<input name=favtime type=time step=any>

This allows you to select any time of the day, with any desired accuracy (eg thousandths of seconds or more). Normally, accuracies of time slots, however, are limited to minutes.

Leave a comment