Please note that HTML5 is an emerging technique. These examples are not intended for use on a production site. Results may vary according to browser implementation. Please use Chrome or Safari for best results.
Required fields
Whose ever tried to submit a form and gotten an error message saying that you “forgot” to enter your email address? Probably not a lot of us: In fact, 99 percent of all web forms have at least one field marked as required.
In good ol’ HTML, we had to manually display that a specific field is required, most of the time by using a red asterisk. But with HTML5, you can set up a input field to be required:
<input type="text" name="client_name" required>
And on the CSS side, something like
input:required {
border: 1px red solid;
}
will save you a lot of time.
Two similar attributes are also available: optional and invalid. They work exactly as the required attribute explained above.
Placeholders
In a form, an input field always has a label explaining what kind of information is required. While you can currently use the label tag to display a label for a specific text field, HTML5 introduces the placeholder attribute. As shown below, using it is pretty simple:
<input name="firstname" placeholder="Please enter your first name">
The HTML5 placeholder attribute works exactly as the value attribute, except that when the user click on the text field, the placeholder text is automatically removed so the user can easily enter his information.
The placeholder attribute currently works only in safari/webkit. Don’t worry about other browsers though, it is pretty easy to simulate placeholders using javascript:
Autofocus
A new HTML5 attribute is named autofocus. If applied to an element, the element will automatically receive the focus once the page is loaded. This can be seen on some sites and most search engines.
Nothing complicated, just use the syntax below, and remember that in HTML5, there’s no more need for attributes to have a value like in XHTML 1.0.
<input name="search" autofocus>
Email fields
Asking someone’s email on a web form is extremely common because email is still the easiest way to contact someone over the internet. HTML5 introduces a new type for the input element, named email.
<input name="email" type="email">
Pattern attribute
When validating a web form, we have to validate the data entered by the visitor. The new pattern HTML5 attribute allows you to define a regular expression pattern. Only the data that matches the defined pattern will be validated. If the data doesn’t match the pattern, then the form will not be submitted.
This is, in my opinion, an extremely good thing, which will save lots of time to developers when coding forms. Though, remember that you should always validate data on the server side as well.
<input type="text" name="Phone" pattern="^0[1-689][0-9]{8}$" placeholder="Phone" required>
Url fields
Nowadays, many people have a website, blog, or at least a Twitter profile. This is why many web forms offer the possibility to enter an url.
HTML5 introduces a new type for the input element, designed specifically for entering urls:
<input name="url" type="url">
Although I didn’t test it myself, I heard that the W3C validator will raise an error if the value of a url field doesn’t match a proper url structure.
Date pickers
Many businesses are offering an appointment request through their website. In that case, the visitor has to specify the day they would like an appointment. HTML5 introduces the date type for the input element:
<input name="day" type="url">
When clicked, the date attribute will display a date picker so visitors will simply have to choose a date instead of entering it manually. Unfortunately, except in Opera, most browsers don’t have it implemented yet.
Note that a date picker can be implemented on your forms using the following types:
<input type="date"> <input type="datetime"> <input type="month"> <input type="week"> <input type="time">
Isn’t that user friendly? Personally, I can’t wait to implement this in my forms but as I said earlier this isn’t very well implemented in browsers at the time of writing this post. Of course, Javascript is always here to help. On this site I found a simple fallback implementation for the input type=date HTML5 attribute:
var i = document.createElement("input");
i.setAttribute("type", "date");
if (i.type == "text") {
// No HTML5 native date picker support, use jQuery or your favorite framework to create one.
}
Search boxes
To enhance ease of retrieving information, many websites have implemented their own search engine. HTML5 has created a new type for search fields.
<input name="q" type="search">
For now, the only difference with regular text inputs is that, if you use Safari, the search box will have rounded corners. But maybe interesting functionalities will be implemented in the future. Let’s hope, because right now I have to admit that I don’t really see why we should use this type.
Sliders type and step attribute
HTML5 is also introducing sliders: A new type for the input element, which allows visitors to easily select a number instead of entering it manually.
<input name="number" type="range" min="0" max="10">
The example above allows the visitor to choose a number between 0 and 10. If you want the slider to be incremented/decremented 2 by 2, you’ll have to use one more new attribute: step. Here is an example:
<input name="number" type="range" min="0" max="10" step="2" >
That way, visitors will only be able to select numbers like 0, 2, 4, and so on.
Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!
Enhance your web forms with new HTML5 features