HTML5 Webforms tutorial: new data types

HTML5 forms: new data types

Good old HTML4 forms consist of fields that can only wait for nothing else than for input. Validation of completed forms is required on the server. If you want to make the form user friendly then validation on the client using JavaScript and / or Ajax is recommended. Given the fact that we encounter one or several forms on almost every website, wouldn't it be nice if browsers would have a built-in validation possibility? Surprise surprise, HTML5 provides that opportunity!

HTML5 makes development of forms easier and faster. Handy elements are added like (besides the current get and post) two types of HTTP methods for the form action: update and delete. Even more convenient is that the elements that previously had to be placed as child elements within the <form> element (such as <button>, <fieldset>, <input>, <label>, <select>, <textarea> and <object> and new elements such as <keygen>, <m>, <output> and <progress>) now may be placed anywhere on the page, while pointing with a form attribute to the id of the form to which they belong. See the example below:

<form id="form1"> 
	<input type=”text”>
<textarea form="form1"></textarea>

The <input> element belongs to the form 'form1'. The <textarea> is outside the form, but because the form attribute refers to the id of the form, it still belongs to the form

But the biggest gains are the new input and built-in validation capabilities of HTML5 forms. Eventually the whole Javascript thing will be superfluous, but that is, up to the moment that everyone uses HTML5 browsers, still in the future.

New input types in HTML5

The new form fields were at the forefront of the emergence of HTML5, and they illustrate the typical backward compatibility principle of new enhancements in HTML5. The new form enhancements are characterized mainly by the new values for the type attribute of the <input /> element. for example, in the case of an e-mail entry field, we can use:

 <input type="email">

instead of

<input type="text">

With this we give the browser a hint that the field is for entering an email address, after which the browser can take appropriate action. Older browsers that do not understand this new HTML5 form enhancement fall back to the default value and treat the user input as plain text in a plain text field. Note that the HTML5 specification impose no requirements on on how browsers should present the form fields on the screen or special styling in case of errors. Different browsers on different devices will display their own user interfaces, such as the difference in the appearance of a select box in Safari desktop and Safari for iPhone). See the form once in different browsers, including Internet Explorer, Firefox, Safari, Opera, Chrome or a mobile browser. You will see that different browsers have their own interface for a large number of input fields in the form.

Note: the form below is styled with CSS. Watch the unstyled form


HTML5 Web Form

The email input field

<input type="email" id="email" required>

The above markup tells the browser that the form should not be sent before a valid email address in this field is filled in (checked whether the right format, not whether it is an existing email address). When the required attribute is missing, the field may remain empty. The manner in which the browser handles errors is not defined.

The multiple attribute is allowed, which means that the entered value of the field can contain a comma-separated list of email addresses. This does not mean that the user must manually enter a comma-separated list, the browser may very well roll out a contact list of users from his clientcomputer or iPhone, fitted with checkboxes.

The URL input type

<input type="url" id="url" required>

The <input type = url> causes the browser to check whether the entered value is acorrect URL. A browser can then assist by showing a list of the user's last visited URLs and automatically write "http: //" if the URL starts with "www" .

The date input type

<input type="date" id="date">

The date type is really a godsend. We are all familiar with web pages where the user must enter a date, for example, for a job, a plane reservation, a movie ticket and so on. Because data are difficult to implement (is it DDMM-YYYY or MM-DD-YYYY or DD-MMM-YY?), developpers are constantly working to program date widgets, which unfortunately however, look different in terms of appearance, usability and accessibility on numerous websites .

<input type = date> solves this problem. In Opera for example a calendar widget appears, see image 2.

type date input field
Image 2. Calendar widget in Opera using <input type = date>.

The time input type

<input type="time" id="time">

With <input type =time> you can enter a time in the 24 hour format and validate. And again, the user interface is charged to the browser. This can be as simple as entering a number and give an error if the entered hours is greater than 24 or more extensive: a dial for example with draggable hands. The user interface could also allow the entry of a time zone setting.

The datetime input type

<input type="datetime" id="datetime">

Date and Time validate an exact date and time. Local date and time work as datetime apart from the fact that the browser does not allow the user to add a time zone setting

The month input type

<input type="month" id="month">

In <input type = month> you can enter a month which is then validated. Despite the fact that the month is stored internally as a number between 1 and 12 , the browser can (already HTML4) offer a selection option that is based on the names of the month, for example, with a select box with 12 choices, January to December. A HTML5 browser can however automatically offer this in the language of the user.

The week input type

<input type="week" id="week">

In <input type = week> you can enter a week, which is then validated. This should be a simple input field with input of a number (week of the year), in practice, however, it is complex, certain years have 53 weeks. Therefore the format has been adjusted to (for example) 2011-W012 for the 12th week of the year. Opera offers a date picker as a user interface that automatically fills in the input field with the week number of the clicked date(see image 4).

type week input field
Image 4. Date Picker on Opera which enters week numbers of selected date in input field <input type=week>

The number input type

<input type="number" id="number">

The number input type displays an error message if the user enters a non-numeric character. It works perfectly with the min, max and step attributes. In Opera is it printed as a spinner control that does not extend beyond the upper and lower limits and which increases / decreases with the numerical value which is specified in the step attribute, although the user can also type in the value (see image 5).

type number input field
Image 5. Spinner control displayed in the input field <input type="number">


The range input type

<input type="range" id="range">

<input type = range> is displayed as a slider. Figure 6 shows this in Google Chrome. Previously the sliders were simulated using Javascript. Now that the sliders are built in HTML5, the developer's responsibility for this task has been removed, resulting in leaner code and improved accessibility for keyboard users.

type range input field
Image 6. Built slider in Google Chrome for the input field <input type = range>

The search input type

<input type="search" id="search">

The search input type expects a search term as input. The difference between the seach type and text type is mostly stylistic. In Safari and the Mac, the search box on a web page, inherits the style of the operating system (see image 7), however, it can be transformed into a text field by of overwriting CSS rules, such as, for example, with the following SCC code:

{-webkit-appearance: textfield;}
type search input field

Image 7. Standard search field (round borders) in webpage on the Mac

type search input field

Image 7a. Corrected search field (using the CSS rule -webkit-appearance: textfield) in webpage on the Mac

The tel input type

<input type="tel" id="tel">

The tel type expectes a phone number as input. There is no special validation; there is not even a purely numerical input required because many phone numbers are written with additional characters as in +31 (0) 40 123 456 7891. It is up to the browser manufacturers to determine which functions are to be developed around tel input field. Conceivable is an autocomplete function on mobile phones that already has numbers in its memory, though this feature is not yet available on any mobile phone. However, the iPhone already has a phone number input screen (see image 8).

input type tel op iPhone
Image 8. Telephone input screen
on the iPhone when selecting the
<input type="tel" />


The color input type

<input type="color" id="color" value="#f16529">

The <input type = color> field makes it possible for the user to enter a color using a color picker.

Leave a comment