site logo

Form elements according to HTML5 specification

HTML 5 specification introduced some new form elements. Support of new elements in different browsers is listed in the following table. Below you can find screenshots and description of elements. To inspect live form elements, open this page in the browser Chrome, or Opera. Firefox supports some form elements. Links to a more detailed description of certain elements are situated in the first column of the table, the live form elements can be found in the second column. Try to submit completed form to see elements in full action. For description of the new form attributes, see the following article.

Browsers support

input typelive elementChromeOperaFirefoxIE
email 1094no
url 1099no
number 8929no
date 89nono
search 89nono
color 141129no
range 8923no
outputoutput 8910no
meter meter 8916no
progress progress 898no
  

The intention of the following screenshots of html5 elements is to compare the look in different browsers. Blank input element means that the browser treat the element as standard element <input type="text">. The only one style property used here is the width of input element, in order to obtain comparable visage. Only the latest final versions of browsers are listed here.

For screenshots Czech environment is used, it means that in the element number is a comma used as the decimal separator and date in the date element is written by Czech customs. Certain form elements display controls only when the element is active (has focus), or the mouse pointer is over this element. In Chrome screenshots are inactive elements, active elements are in the Opera screenshots.

screenshot: form elements HTML5 in various browsers

Description of the new form elements

Advantage of the new form elements is built-in, native validation of the element value. Native validation is performed even if javascript is turned off. To trigger naitive validation, attribute reqired in form element have to be specified.This could greatly simplify the form coding, because of the error messages are provided by browser, so no need to write client validation functions. Server validation have to be executed anyway.

Mobile devices with touch screens should display on screen special keyboard, containing only that characters allowed for a given element type.

<input type="email">

The correct email address have to contain just one at-sign and at least one dot. Valid email means only that it is written in syntactically correct format, rather than the address actually exists.

<input type="url">

Used to write the address of the web page. Despite the fact that in the address bar of the browser, or links in the print media do not mention the name of the protocol (http://...), in a form element url  is that required. Again, it does not test whether the address exists, but only if the syntax is correct.

<input type="number" min="1" max="12000" step="0.01">

As expected, the element number will be filled with integer or float number. Element may contain attributes min, max, step, defining the permissible range of the number and value of increment. Part of element are two small buttons (spinner), for setting desired value by help of mouse or by cursor keys on keyboard. Of course it is possible to type a numeric value directly from the keyboard.

Native validation tests the legitimacy of number, out of range error, or more decimal places than specified by attribute step. Browsers that do not implemented this element, displays the element type=text instead, allowing to type anything, including non-numeric characters.

Visible format of the value depends on the setting in the Control Panel (Regional and Language Setting). So in the Czech environment, the decimal part of the number is separated by a comma, but in the same form, in an US environment a decimal point must be used. Thousands separator is not unified, and browsers do not support that.

Internal format of the value in element number is the same as is used when typing the code. Such format uses decimal point and no thousands separator. In this format the value of element is submitted to the server, the same representation is used in Javascript and the value of attributes must be specified in this format.

<input type="date">

There is a series of new elements to pick up the date and time: <input type="date">, <input type="month">, <input type="week">, <input type="time">, <input type="datetime">, <input type="datetime-local">. Type of the element determines what data should be entered. In an empty element Chrome displays a sort of placeholder  or help format based on the locale. In Czech or in most European countries it is dd.mm.yyyy, and in the US browser it is mm/dd/yyyy.

Like in the element number  also here in element date  visible value depends on Regional and Language Setting. Internal format of these elements are submitted to the server and are used in Javascript. Also attributes min, max and value have to be specified in internal format according to ISO 8601 (yyyy-mm-dd). Value of date element can be picked in the calendar, set by the numeric keypad, and by using the spinner.

<input type="search">

Browsers that have implemented this element display inside a small cross on the right of element that is used to clear the entered text. The cross is not visible when the element is empty. To calculate the size of this element Chrome uses a different boxmodel.

<input type="color">

After clicking on this element, a dialog with a choice of color palette appears. Visible value of this element is the color, internal value is the color code. In the screennshots yellow color, the code "#fff200" is picked. The color code is submitted to the server.

<input type="tel">

Because there is great variability in the formats of the telephone number, there is no fixed rule, and thus no native validation for this type of form element. This element is not listed in the table, even in screenshots. It is important for mobile devices, which offer a special digital keyboard on touch screen.

<input type="range" min="0" max="24" step="1">

For setting the range and resolution, element range uses the same attributes as element number. Internal numeric value of this element depends on the position of the slider. To adjust the slider, mouse or cursor keys can be used, without JavaScript enabled. Digital value of this element stays invisible, only position of the slider is adjusted.

Basically it is an analog like input element. To setup the value by slider is much faster than type in digits, but it is less accurate. It is suitable in applications, where absolute value is not important, but subjective feeling of feedback is relevant: volume, color etc.

Elements output, meter, progress

Elements output, meter and progress are not the typical form elements, they are rather output elements. These elements display digital or analog shape of numerical value. The values of these elements are not submitted to the server, even if they are inside the form. In the form example at the beginning of this article, the value of these elements is derived from element range actual value.

Element output  is designed to display the digital result of some calculation. This element can be simply replaced by the div, or input with attribute readonly elements, but at the cost of semantic rules violation.

Element meter  displays the horizontal bar in compliance with the attributes. The length of bar corresponds to the ratio of current and maximum data. It is possible to set high and low attributes, when current value run over these limits, the color of bar is changed as a warnings.

Element progress  also displays a graphic bar corresponding to the actual numerical value. It should serve as degree of solving some task, such as the ratio of an extensive form completion. Attention!!  this element unfits for displaying of form submitting and processing. In such a case, use animated images type of .GIF, indicating that some action is taking place (and duration is unknown).

 

On an intranet, where almost every form contains a data type of date, time, integer or float numbers, new types of elements could provide a considerable simplification of the form design, especially when coding validation scripts.

Form elements according to the HTML5 specification are under development and the finding for optimal functionality. Therefore, this theme will come back here. Let's just hope in happy end, not as file element, which looks like under development forever, namely in all browsers.

updated 2014-05-05