One of the key features of any web application is the ability to gather input data from the user. HTML Forms have been the way to do that and over the years, developers have innovated to bring a better experience to the web as far as filling out data is concerned. HTML5 brings to the table a host of enhancements and new features that make forms more responsive and improve their usability manifold. Given the fact that users are now employing various devices for accessing web sites (e.g. mobile phone / tablet devices) and not just the desktop PCs, these enhancements are a welcome change to make filling forms easier, no matter which device you use. In the next few recipes including this one, we shall look at several features introduced in HTML5 vis-a-vis Forms, including how developers stand to benefit too via easier validation routines
- autofocus : This attribute when applied to a particular input type in the form, will result in that field being auto focused so that the user can start entering the value without needing to first set the focus to that field. Example usage is shown below:
<input name="username" type="text" autofocus/>
<input name="username" type="text" placeholder="Enter Username here"/>
- required: This attribute when applied to a text field means that the field needs to be entered by the user before submitting. We shall be looking at this in more detail in a future recipe, but it is interesting to note that currently the browsers which support this feature will give an indication that the field is required whenever if you try to submit the form without entering a value in it, the best example of that is the Opera browser and I strongly suggest that you see it in action in the Opera browser. Example usage is shown below:
<input name="username" type="text" required/>
Note that HTML5 Forms support is currently a bit sketchy in most browsers. You will need to use tools like caniuse.comthat we covered earlier. You could also use tools like modenizr to first detect if the feature is supported in the browser and then go for some callback mechanism as needed. Let us look at a simple form example that incorporates all the 3 attributes:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>HTML5 Form Elements</title> </head> <body> <form id="registrationform"> <label for="username">Username</label> <input name="username" id="username" type="text" required autofocus /><br/> <label for="firstname">First Name</label> <input name="firstname" id="firstname" type="text" placeholder="Your First Name"/><br/> <label for="lastname">Last Name</label> <input name="lastname" id="lastname" type="text" placeholder="Your Last Name"/><br/> <button type="submit">Register</button> </fieldset> </form> </body> </html>
The form is a simple registration form. When the page finishes loading, the focus is first set on the username field via the autofocus attribute. You will also notice that placeholder text is present for the other two fields i.e. firstname and lastname. The username field also has a required attribute. Try to submit the form and see how your browser handles it. Most browsers currently do not give much visual indication that the field is required, but we should see better support atleast this year. To see the required effect at its best, check the example out in the Opera browser, you will be amazed by its implementation.
See it in action here.
HTML5 Forms Recipes
Back to HTML5 Series