html-5-new-input-types

21 Dec
0
COMMENTS



Exploring new input types in HTML 5

Source: http://bit.ly/bh9dsC

HTML 5 is not only about the endless possibilities of the <canvas> element or the awesome multimedia support with the <video> tag. HTML 5 offers a wide new range of input types for specific situations, such as url, email, date, etc. In this post we will explore these new HTML 5 input types, along with the <datalist> element, a welcome addition to most input fields that your users will love.

We have talked in the past about the outstanding video capabilities in HTML 5, but video elements are not even close to be as ubiquitous as web forms. Even the most simple search field is a form and  web applications based in HTML 5 are all about forms. Forms are our way to interact with the web and fortunately, the new HTML 5 specification has some very good enhancements to web forms.

For the correctly display of the demo, you should open the demo page in Opera and Chrome. Firefox and Safari lacks support for most new input types. Chrome supports only a few and Opera supports most features.

We’re going to go through each form so load up the demo in a separate tab and let’s start exploring the new input types.

Launch HTML 5 new input types example

There’s no additional stylesheet applied to the forms so you can see what they look like out-of-the-box.

Sliders

The first new type acts like a slider. The type name is range and you can set the minimum value, the maximum value and the step.

<fieldset>
 <legend>Sliders</legend>
 <label for="radioactivity">Radioactivity Level</label>
 <input id="radioactivity" name="radioactivity" type="range" min="-100" max="100" value="0" step="20">
 <label for="slider2">Bigger step</label>
 <input id="slider2" name="slider2" type="range" min="-100" max="100" value="0" step="50">
</fieldset>

Opera renders tick marks according to the step size, so you can see they are far more spaced in the second slider since the value is more than twice the top one.

Steps

Another new input type in HTML 5 is number. When an input is defined as such, it will display arrows pointing up and down to increment the number displayed in the field. You can also set minumum and maximum value as well as the step.

<fieldset>
<legend>Steps</legend>
<label for="step">How old are you?</label>
<input id="step" name="step" type="number" min="1" value="25" max="99"> <span>years old</span><br/><br/>
<label for="step2">Floating numbers too!</label>
<input id="step2" name="step2" type="number" min="1.5" value="25.5" max="30.5" step="0.5"> <span>years old</span>
</fieldset>

The field supports floating point numbers, but the values must be entered as floating point numbers. This input currently works in the same way for both Opera and Chrome

Date and time

We now have new input types for date and time. The terms for each type shown in the example are:

  • time
  • date
  • week
  • month
  • datetime
<fieldset>
 <legend>Date and time</legend>
 <label for="time">Time</label>
 <input id="time" name="time" type="time" value="12:00"><br/><br/>
 <label for="date">Date</label>
 <input id="date" name="date" type="date" value="2010-11-02">
 <label for="week">Week</label>
 <input id="week" name="week" type="week" value="2010-W45">
 <label for="month">Month</label>
 <input id="month" name="month" type="month" value="2010-11"><br/><br/>
 <label for="datetime">Datetime</label>
 <input id="datetime" name="datetime" type="datetime" value="1997-08-29T02:14Z"><br/><br/>
</fieldset>

Strangely enough there is no year type. Check this example with Opera, since it’s not implemented in Chrome. In Opera, the time type is shown with step arrows like the previous field and a complete calendar is displayed the date, week, month, datetime types.

The drawback is that the control is not customizable through CSS so if you want a custom calendar you will have to use a calendar based in jQuery. The advantage is that since the control is in the browser, it is localized, as you can see in the leading image for this article, where I’ve left the calendar as shown in Opera in spanish.

Email, URL, Telephone, Search and Color

HTML 5 now include special input types to handle each one of these data. And even if they look right now like any other common input field, browsers could add different user input functionality depending on which one is selected, providing an optimal user experience. For example, the email field supports an additional multiple boolean attribute that indicates that the field will be populated with many email addresses.

<fieldset>
 <legend>email, url, tel and search</legend>
 <label for="email">Email address</label>
 <input id="email" name="email" type="email">
 <label for="website">Website</label>
 <input id="website" name="website" type="url" placeholder="http://"><br/><br/>
 <label for="query">Search</label>
 <input id="query" name="query" type="search" size="30" placeholder="type your search and hit enter"><br/><br/>
 <label for="phone">Telephone</label>
 <input id="phone" name="phone" type="tel" autofocus><br/><br/>
 <label for="bgcolor">Color</label>
 <input id="bgcolor" name="bgcolor" type="color"> <span>(Not yet implemented by any browser)</span>
</fieldset>

You will also notice a placeholder attribute for some of the input fields. To see it rendered, visit the page using Chrome, since it’s not yet implemented in Opera. It’s simply the default value for the text input, that we once coded using JavaScript, now easier than ever to set up.

The new Datalist element

If you clicked inside the email field in the demo in Opera, you surely noticed the autocomplete list that is displayed. The datalist element is a source of data for one particular field and accepts a value and a label as attributes. Let’s see the full markup for the email field in the demo:

<label for="email">Email address</label>
<input id="email" name="email" type="email" multiple="multiple" list="addresses"> <span>To add multiple addresses, type a comma after selecting an address.</span><br/><br/>
<datalist id="addresses">
 <option value="sconnor@sky.net" label="Sarah Connor">
 <option value="jconner@sky.net" label="John Connor">
 <option value="kreese@sky.net" label="Kyle Reese">
 <option value="cphillips@sky.net" label="Cameron Phillips">
</datalist>

Notice the list attribute in the email input. It’s set to addresses, which is the id of the datalist element. The datalist element is then populated with different option elements, each one with their value, which is mandatory, and a label, which is not required.

The future of web forms

There are a number of other new attributes supported by forms, such as autofocus, that will put the focus on the field where it is applied when the page is loaded, and required, that will allow us to forget about jQuery form fields validation.

Moreover, we will have pseudo selectors like

input[type=email]:required{ background-color: #F6F6CC }

for easy form styling.

As HTML 5 gains more momentum, each one of its features are being enhanced. Web applications will surely benefit from working with standard controls like the upcoming color input type. This will reduce the weight of applications, since they do no longer have to download jQuery, stylesheets and images to create and stylize the control.