Home XHTML Articles Form with HTML5: the new input elements

Form with HTML5: the new input elements

September 21, 2018

364

Although not yet in a stable version, the innovations introduced by HTML5 specifiers take place within real projects. More and more modern devices and browsers are starting to support new features and, as a result, improve the user experience.

Among the many new features introduced, one of the most important is certainly characterized by new input elements. In fact, there are many new types of input, including:

New types of HTML5 input
`color`	`date`	`datetime`	`datetime-local`	`email`	`month`	`number`
`range`	`search`	`tel`	`time`	`url`	`week`

The required and pattern attributes

Before analyzing in detail the functionality of the new input elements it is necessary to introduce two very important new attributes:

required
pattern

These two attributes allow us to simulate two very important aspects to be taken into account when designing a form: data vavalidation.

e required attribute

The attribute required, as its name suggests, allows us to prevent the submission of the form if the mandatory fields have not been filled out. Its operation is really very simple:

The pattern attribute

The attribute patterncan be used in combination with the attribute requiredjust seen. In fact, it allows to define regular expressions (in the format supported by JavaScript) to validate the data of the modules.

A very simple example:

This input field will only accept values beginning with http: // or https: // .

Customize the style of valid / invalid fields

A very interesting technique that we can use to alert the user to the validity or error in filling out the form is to define CSS rules ad hoc by exploiting the pseudo-selectors : required , : valid , : invalid.

With CSS3, in fact, support is also introduced to these new pseudo-selectors, thanks to which we no longer need Javascript to assign new classes to the elements based on the data it contains.

Let’s take a practical example using a sprite to show which of the inserted fields are valid or have errors:

Sprite for validation

We also define the two CSS rules:

<pre class=”brush: php; html-script: true”>
input:required:invalid,
input:focus:invalid
{
background-image: url(/images/form_validation.png);
background-position: right bottom;
background-repeat: no-repeat;
}

input:required:valid
{
background-image: url(/images/form_validation.png);
background-position: right top;
background-repeat: no-repeat;
}
</pre>

As typical for sprites, we change the position of the background image of the input field according to its validity.

Here is the example in action:

The new input types introduced by HTML5

Color

We often need to customize the color of a certain element to the user and, so far, we have always had to include a Javascript script that would insert a color picker into our pages. This property allows us to take advantage of the operating system’s color window directly.

At your place

Another common case in which we need to include a Javascript script is the need to show a date picker, which is a small tool with which to select a date. The new date element takes care of this, allows you to choose a date also providing a small navigable calendar; all natively inside the browser.

The attributes supported by this type are:

min : to define the smallest date that can be entered
max : to define the maximum date that can be entered
step : to define an interval value with respect to the current day. For example, assuming you are at day 10 of the month and set a step of 2, only days 12, 14, 16 will be valid, and so on.

Datetime

The datetime type has the same behavior as the date plus the ability to make the user choose the date, including the timezone, beyond the date.

The attributes supported by this type are:

Datetime-local

Totally identical to the datetime with the only difference that it does not allow to choose the timezone.

The attributes supported by this type are:

E-mail

The email type is a classic input field that allows in addition to automatically validate the value entered in it. In simpler words, it shows an alert in case the value entered is not a valid email address. Another advantage given by the email type is having a tablet or a cell phone. With a mobile device, on such elements the @ is automatically added to the visible keyboard, speeding up the insertion operation.

The email type supports the pattern attribute with which a regular expression can be defined to validate the entered values.

month

Staying on the topic of types regarding the dates, the type month is completely equal to the date or datetime with the only difference that allows you to choose only month and year, without the day.

The attributes supported by this type are:

min : to define the smallest month that can be selected
max : to define the largest month that can be selected
step : to define an interval value with respect to the current month. For example, assuming you are in February and set a step of 2, only the months of April, June and so on will be valid.

Number

The type number is most likely one of the most interesting and, at present, most used. As is easily understood from the name, thanks to it it is possible to accept only numeric values to the input field. Through the min and max attributes, then, it is also possible to define the interval in which the value must be contained. In addition, some browsers also provide darts with which to increase and decrease the value of the field without the need to enter it from the keyboard.

The attributes supported by this type are:

min : to define the lowest value that can be entered
max : to define the largest value that can be entered
step : to define the progress interval. In fact, many browsers provide two small darts to increase or decrease the value contained in the field. Using the step attribute the values will increase or decrease depending on this value. For example, supposing you have defined a step of value 5, the content of the input field will vary by 5 units each time.

Range

The range type has the same functioning as the number type with a different graphic display. The range, in fact, allows the user to select a numerical value between two intervals through the use of a slider.

The attributes supported by this type are:

min : to define the lowest value that can be entered
max : to define the largest value that can be entered
step : to define the progress interval.

Compatibility:

Search

As the name suggests, this type of input is used for the search fields. It is in effect a classic text field that some browsers interpret by adding a simple x inside which it is possible to empty its contents.

The type search also supports the pattern attribute to define regular expressions.

Tel

According to the W3C specification this field can be used to contain telephone numbers. Even if no desktop browser provides its own interpretation, it is advisable to use this type when managing telephone numbers since a numeric keypad is provided in the mobile devices, which obviously facilitates user input.

Also useful for this type the support to the pattern attribute to define the type of telephone number that we expect to be inserted.

Time

Always in theme with the types related to the management of the dates, the time type allows the user to select a time.

The attributes supported by this type are:

min : to define the smallest time that can be selected
max : for defined the largest time that can be selected
step : to define an interval value with respect to the current time.

Url

The url type is very useful when you need to have the user enter the web addresses. This type is also a classic text field that, when sending the form, warns us if the value entered is not a valid address.

The url type supports the pattern attribute to further customize its validation. In addition to the internal validation of the url that already complements it, it is possible to define new regular expressions for the values entered.

Week

The last type introduced in HTML5 is the type week, which is also used to manage dates. The latter has the same behavior as dates, datetime, etc. with the difference that it is used to select the weeks.

The attributes supported by this type are:

min : to define the smallest week that can be selected
max : for defined the last week that can be selected
step : to define an interval value with respect to the current week.

Compatibility

Conclusions and References

In case you want to test the behavior of the various types of input just seen in your browser or, above all, on mobile devices you can use this test page made available by Mike Taylr.

As we can see from the compatibility tables provided for each new type of input, the major problems that were with IE, fortunately, have been overcome with Internet Explorer 10, which now supports some of these types.

The council therefore, at present, is to still take great care in their use. For those that are simple text fields like number, email, search you can immediately integrate and provide a Javascript alternative to their validation for those browsers that do not yet integrate the support. Instead, we need to pay more attention to the fields such as color or dates or even the range given that we risk filling them out with totally unexpected values.

In fact, let’s imagine letting a user choose a color without using a picker; we would risk receiving a field filled with a totally incorrect value (for example “Bordeaux Red” or “Green Hope”). Same situation with a date field that does not help the user to fill it in the correct format. We would risk receiving dates in the most disparate formats (for example “February 10, 2013” or “02/30/2032”).

For those wishing to deepen the subject, the link to official documentation is as follows: W3C input.