In this week’s video, Luci and I take a quick look at some of the new Form Input values for the ‘Type’ attribute. Traditionally in HTML, designers and developers have been limited to the traditional Input Type Values like ‘Text, checkbox, radio, password and submit’.
HTML5 offers 13 new values to the input attribute, each tailored to improve the usability of forms. The new values cover the most common types of values input fields are used for – ranging from ‘email’ to ‘url’. But before you switch-off with the ‘HTML5 – look but don’t touch’ philosophy; with the new input values we’re about to look at – they are ready to use today, without the fear of backward compatibility issues. This is because all browsers (including IE6) that don’t recognize the new HTML5 Input Values won’t ignore them – they will simply fall back to the Text Value.
The HTML5 code from the video
In the video above, we focus on 3 of these values – ‘tel’ ‘email’ and ‘url’. the HTML5 code used in the demonstration can be found below:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5 Form</title>
</head>
<body>
<form action="#" method="post">
<label>Your Name
<input name="name" value="" type="text" />
</label>
<label>Phone Number
<input name="phone" value="" type="tel" />
</label>
<label>Email Address
<input name="email" value="" type="email" />
</label>
<label>Website URL
<input name="email" value="" type="url"/>
</label>
<input name="" type="submit" value="submit" />
</form>
</body>
</html>
In conclusion, there’s no downside at all – to start using the new values we look at in the video. Users on computers probably won’t notice the difference, but iPhone/iPad users will experience increased usability when completing forms. Plus – it’s better to stick a finger in the HTML5 pie when you can, rather than waiting for the world, and Internet Explorer – to catch up!
But what about W3C compliance I hear you cry?! The good news is that these new input attribute values will validate, just make sure you’re using the new HTML5 Doc Type when you make your pages.
These also work on BlackBerry 6.0.