HTML Forms are one of the most important part of how the web works and operates. They drive and support the user-website communication and data exchange in web applications like e-commerce, business and social websites.

The HTML5 specification extends the functionality of Forms through new element attributes, new input types and new functions in the Forms 2.0 api.

We’re going to be over viewing the new improvements brought by the HTML5 spec and see how they can be used right now future proofing and enhancing your HTML5 web application.

We’re going to go through the new input types:
search, email, url, tel, range(min, max, step), number, date and time, color
and some new attributes:
placeholder, autofocus, required, autocomplete, list
and in a second part we’re going to use the new API to show how you can use HTML5 validation to improve you apps’ User Experience.

Before we start to go into the details you must remember that the HTML5 specification describes only the elements’ functionality i.e. how they work and not how they look and how they affect the UI. This gives the browser vendors and the web developers greater flexibility in building their Uis. Unfortunately the new controls can not be styled in any browser at the time I am writing this article, but things will improve for sure in this direction.

Another bad news is that the only browser that supports the majority of the new inputs introduced by the HTML5 spec is Opera 10+. The good part is that the other browsers won’t be bothered by the new markup they don’t understand and will fall back to standard HTML4 elements.

*use Opera 10+ that supports the many of the new inputs introduced by the HTML5

HTML5 Forms new input types

Search

The search input type is used for inputs supplying text to search engines. Until now the input type text was used for search boxes. Apart from it’s semantic value this input type also has some ui perks. Some browsers(Safari, Opera) display a small “x” that you can use to clear the input. Generally, the browsers try to replicate the UI of the operating system for search boxes. Browsers that don’t know about this tag will render a regular text input.

search

Email, Url, Tel

The email, url and tel input types are defined by HTML5 to enrich the contact details types of input. They tell browsers what kind of data they can expect and conduct validation accordingly. In general they are displayed to the user as regular input fields. The only browsers that differentiates between these is mobile safari which displays a different keyboard for each one helping users input data faster.

Number(min, max, step)

Number input types are for… you guessed it, inputting numbers, but not in the regular way we were used to using text fields. There are many types of numbers and sometimes we want to limit the possibilities of the input to make the interaction easier for the user.

Using the min, max and step attributes it’s easier for the user to input the correct number without getting frustrated with errors and having to come back to correct the input. Opera draws the UI for this input as a spinbox.

number

Range(min, max, step)

Similar to the number input type the Range input type let’s the user select a number in a range but this time using a slider. Safari and opera display this input as a slider but other browsers fall back to a text field.

The range control doesn’t offer a display for the selected value. That’s why we have to extend it’s functionality using JavaScript.

range

Dates

There are multiple date fields defined by the spec. They are:

  • date: 2010-09-02
  • datetime: 12010-09-02 T15:13:00+01
  • datetime-local: 2010-09-02 T15:13:00
  • time: 15:13:00
  • month: 2010-09
  • week: 2010 w52

The only browser that supports them is Opera 9+ that also displays custom calendars according to the date type. The date pickers are now browser native and we don’t have to script them ourselves as we did in HTML 4.

datepicker
date picker control in Opera
dates
date inputs in Opera

Color picker

The color picker control is the most “exotic” input type introduced by the HTML5 spec. It should let the user select a a color and return the hexadecimal representation (eg #FFFFFF). It’s not implemented yet in any browser so we won’t include it in our example code.

HTML5 Forms new attributes

Placeholder

The place holder attriubute specifies a hint/description that the input should show. This is currently a common UI pattern and is implemented as a greyed-out text that populates the input and is cleared out on input focus. Currently this attribute only works in Chrome and Safari.

placeholder
placeholder text in Safari

Autofocus

The autofocus replaces another js implementation of a used UX pattern and makes the application or website focus on the input it’s added to. It is a boolean attribute so you can use it without a value in HTML5. You should be careful with this attribute as it cam some times disrupt a pleasant user experience. It can only be used once on a web page. At the moment of this writing it only works in Chrome and Safari.

Autocomplete

The autocomplete attribute with it’s values “on” or “off” specifies if the browser should remember inputted values for a certain input or for the whole form.

Required

The required attribute specifies if a certain form element is necessary for form submission. If an element is marked as required the browser should stop the form from being submitted and display a notification regarding this field. Out off the browsers that support this boolean attribute Opera is the only one that displays an error message.

required
required message in Opera

List (datalist)

The list attribute works together with a new element introduced in HTML5 datalist that specifies a list of possible values for a certain input. First you have to define the datalist and the attach it to an element using the list attribute. Until now only Opera supports this attribute and displays the available options under the input.

list
list input in Opera

Testing for form features

As we showed some of the new input types and attributes of the Forms 2.0 HTML5 specification surely you’d want to know how to test for these new features and offer fall-back solutions for your HTML5 web applications. We will write to Javascript functions, one that tests for supported attributes and another one that test for new input types.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function supportsAttribute(element, attribute){
    var el = document.createElement(element);
    if(attribute in el) alert(attribute + " IS supported for " + element + "!");
    else alert(attribute + " IS NOT supported for " + element);
}
         
supportsAttribute("input", "autocomplete");
function supportsInputType(type){
    var input = document.createElement("input");
    input.setAttribute("type",type);
    if(input.type ==  "text"){
        alert("input type " + type + " is NOT supported");
        //fallback javascript here
    }
    else alert("input type " + type + " IS supported!");
}
supportsInputType("date");

This is a bit of a hassle but it will ensure that your web apps are future proof. You can test for features using the functions above or you can use the Modernizr Javascript library to test for most form features an most HTML5 features. The The All-In-One Almost-Alphabetical No-Bullshit Guide to Detecting Everything shows you how you can detect HTML5 features using Modernizr.

*use Opera 10+ that supports the many of the new inputs introduced by the HTML5

That’s it for now, in the second part of the HTML5 Forms article we’re going to go deep into the API and show how you can use it for client side custom validation in HTML5 websites.

Tagged with: , ,