In this post, I will be going over some of the new HTML5 input types that you can start using now. The reason they are so great is they enhance the look and usability of your forms, while gracefully degrading for browsers that do not yet support HTML5. Win!
Here is the form we will be creating:
New HTML5 Input Types for Forms:
<input type=”email” >
The email input type is amazing because it comes with built-in client-side validation. In the screenshot below, I forgot to type in my @ symbol in the email field in Firefox. The error message that is displaying, including its style, is completely automatic.
No more client-side validation scripting! Um, can we say awesome?? Keep in mind the validation will not work in older versions of IE, but as of right now it is currently being supported by Firefox 6+, Opera, Safari (limited), and Chrome.
But wait! The email input also currently has support for Safari’s browser on the iPhone – iPhone users pull up the ‘web’ keyboard that includes the @ symbol instead of the regular alphabetic keyboard:
<input type=”url” >
The URL input type also automatically validates in most current browsers.
One day, browsers may allow it to auto-complete based on our browsing history. Additionally, the iPhone OS also has added support for this with their keyboard that includes a .com and a /.
<input type=”search” results=”5″ >
Although you probably won’t be using the search input type within a form, it’s pretty neat with limited support right now and will definitely be used frequently in the near future.
Currently, the search input type only looks different in Webkit browsers, where it is given additional styling – rounded corner boxes.
However, if you include the results attribute, a magnifying glass symbol appears and a user is able to see as many previous searches as you define.
Here’s a great reference on how to style the search input type for webkit browsers.
There are other new input types for HTML5 that you should look into, but I am not covering in this post. For example, the new native date pickers – time, datetime, date, week, month, and datetime local inputs. Also, the new range input type, which allows users to scroll a bar to choose from a range of numbers, and the new color input type, which will allow users to select a color similar to a color picker in Photoshop (but has very limited support as of right now).
New HTML5 Attributes for Input Types:
<input type=”email” placeholder=”email@example.com” >
The placeholder attribute allows for text to display inside a field until the field is focused on with a mouse click.
<input type=”email” placeholder=”firstname.lastname@example.org” required >
The required attribute allows for super easy client-side form validation – it will not allow a browser to submit a form until it has been filled in.
<input type=”text” name=”name” placeholder=”Allie” autocomplete=”on” required >
Autocomplete allows for a field to fill in data that a user has previously entered in a form. Autocomplete should always be set to OFF for certain fields, such as those related to credit card or other financial information.
The autofocus attribute tells the browser to put the cursor automatically within a form field. For example, on Google’s homepage, your cursor is already focused in the search bar so you can start typing your query immediately without having to click on anything. In the past, developers had to use a script to do this, but now HTML5 does it for us! It also degrades gracefully – any browser that does not support the autofocus attribute will ignore it completely.
Keep in mind you will not always want to use autofocus – especially if it will autofocus a field within a form that is placed lower on a page.
Our HTML5 Form:
Download/view the code here: html5 form