Here is the form we will be creating:
<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