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.
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.
Description of the new form elements
Mobile devices with touch screens should display on screen special keyboard, containing only that characters allowed for a given element type.
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.
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.
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.
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.
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.
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.
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.
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 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.