HTML5 Form Elements

           A Form is one of the most basic and essential features of any web site. The form elements available in HTML so far include the textbox, checkbox, radio, button, drop-down list, password and file picker. While these have sufficed so far, there is a clear need for newer form elements. The question is not just of newer form elements, but the ability to inject behavior into existing form elements so that usability and validity, which is a cornerstone of any good UI, is given highest consideration.

We shall break up HTML5 Form features into 2 parts in this series. This part will be more focused on the different types of input elements that are introduced in HTML5. In the next part, we shall look at how additional attributes introduced in HTML5 bring in significant improvements to both usability and also to the development code.

New Input Types

HTML5 brings to the table several new input types, a total of 13. The philosophy behind these new input types is to address the common types of data fields that users typically have to fill up in a web form. Apart from plain text, there is data to be filled up like email address, web site URLs, Phone Numbers, Date/Time, Numeric data, Colors, etc.

HTML5 introduces these data types via the <input type=”_NEW_TYPE_HERE_”/> format.

What if my browser does not support these new HTML5 form elements?

No problem. One of the key design decisions in HTML5 is backward compatibility. What this means is that if the new input types are not supported, then by default it falls back to <input type=”text”…./>, so it will be rendered as a plain text box, which the user can then fill data in.

One may ask, what is the advantage of these new input types and how are the browsers supposed to implement them? By supporting the new input types, two things happen:

a) You get automatic validity of the fields as per the format. This means that the form is not going to get submitted if the value entered is not as per the default validation of that type

b) The browser inspects the input type and if it finds that it is of a specific type, then it does something quite clear to aid the input of that data. For e.g. On the Smart Phones, which do not have a physical keyboard but instead a virtual keyboard, the keyboard that will be shown up will only contain keys that will aid the user in filling out the data.

Let us look at the new HTML5 input types that are present.

Email Address

This input type allows for entry of email addresses. The format is shown below:

<input type="email"/>

This input type is useful for entering email ids like test@test.com

Web URLs

<input type="url"/>

This input type is useful for entering web urls like http://www.xoriant.com

Tel

This input type is useful for entering telephone numbers

<input type="tel"/>

The email, url and tel input types are meant to instruct to the browser that the input would be valid only if it contains characters that validate the input type. Additionally, Smart Phone browsers like Apple iPhone do a very neat trick when they encounter input types like URL, Email and Telephone. Since they have a virtual keyboard, they will only show those keys that aid in entering the value quickly. So if you are trying to type the Telephone, it will only show the numbers and some characters, the other keys are hidden from you.

Shown below is a screenshot of the Android Web browser accessing a form which contains an input element of type tel. Notice that in the virtual keyboard, it only shows keys that aid in faster and less error prone data entry.

Date Time

HTML5 provides for 6 types of DateTime inputs, which cater to a variety of date time entries, as your application may require. They are date, time, datetime, local-datetime, month, year. The syntax is shown below:

<input type="datetime"/>   <input type="date"/>   <input type="time"/>   <input type="month"/>   <input type="week"/>   <input type="local-datetime"/>

Shown below is the datetime input type rendered in the Opera Browser:

Spin Box

A frequent requirement in forms is to fill out numeric values. An input type number has been added. This will render the input as a spinbox if the browser supports it. It will even honor themin, max values that you specify. The step attribute is used to indicate the increment/decrement if the user clicks the up/ down spin button. The value attribute specifies an initial value for the control.

<input type="number"        min="1"        max="5"        step="1"        value="3">

Slider

Spin boxes are not the only way to enter numeric input. You can also allow a user to use a slider to specify a value. The syntax is shown below:

<input type="range"        min="1"        max="5"        step="1"        value="3">

If the browser supports the number and range types, it will render as shown below:

Browser supports the number & range types

Search

This input is specified by giving the type=”search” as shown below.

<form>   <input name="search_terms" type="search">   <input type="submit" value="Go"> </form>

It will be rendered as shown below:

As you type, a cross icon will appear at the end of the input box and you can clear the search term by clicking on it.

autofocus, placeholder and novalidation

There are 3 attributes that we can apply to HTML5 forms that aid in data entry.

• autofocus: This attribute when applied to any form element, will result in the field receiving focus. For e.g. consider the form shown below:

<form>   <label for=”firstname”>First Name</label>   <input type=”text” id=”firstname” name=”firstname” autofocus>               <label for=”lastname”>Last Name</label>   <input type=”text” id=”lastname” name=”lastname”>   <input type=”submit” label=”Go”> </form>

We have added the attribute autofocus to the firstname input field. When the form loads, you will find that the focus is already set on that field, thereby making it easier for the user to start filling the form.

• placeholder: This attribute when applied to any form element, will display helper text to aid the user to fill up the value. When you give focus to the element, the placeholder value will go away and let the user enter the value. If no value is entered and you move away to another field, then the placeholder value will be shown again. Consider the same example as above but with placeholder values for both firstname and lastname fields.

<form>   <label for=”firstname”>First Name</label>   <input type=”text” id=”firstname” name=”firstname” placeholder=”Enter First Name here” autofocus>               <label for=”lastname”>Last Name</label>   <input type=”text” id=”lastname” name=”lastname” placeholder=”Enter Last Name here” >   <input type=”submit” label=”Go”> </form>

When we visit this page, we see the following form:

You will notice that we had put placeholders for both the fields, but since the firstname field also had the autofocus, the placeholder text is not shown. Instead it has the focus so that the user can start entering the text. The lastname field has the placeholder text as shown. As you tab in and out the First Name field without entering any data, you will find the placeholder text returning back there.

Do note that not all browsers support placeholder text. The above support was from Google Chrome browser.

• novalidation: By default, when you submit a form, all the fields in the form will be validated. This means that the browser that fully supports the HTML5 input types, will validate all the fields as per the input types and if they are not valid, the form is not submitted. Browser support varies over here so be careful. By default, all the forms are validated before submission. However, you can opt for the form to not be validated, by adding the novalidation tag to the <form> tag as shown below:

<form …. novalidation>