HTML5 Recipes: Forms Enhancements

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

In this recipe, we shall take a look at the following attributes: autofocus, placeholder and required. These attributes can be applied to any input type in the form. In fact, developers over the years have been writing Javascript to provide the behaviour that these attributes will give automatically to the input types now. There is no need to incorporate javascript code for most cases. Let us look at them now:

  • 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/>
  • placeholder: This attribute when applied to a text field, provides a text value that is displayed in the text field to help the user understand what kind of data needs to be filled in there. It is only a hint to the user. When you focus on that text field, the place holder text will be cleared and the user can enter the value as needed. If you tab out of that text field and if there is no value entered by the user, then the placeholder text is again displayed over there. If you have entered a value, the placeholder text is not displayed. The placeholder attributed is strongly recommended and is becoming the norm on most forms now. It is nice to have that now in HTML itself instead of writing Javascript to manage all of it. Example usage is shown below:
<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

  1. New features in HTML5 for Forms
  2. New Form Elements
  3. Form Validation

Back to HTML5 Series

 

Advertisements

One thought on “HTML5 Recipes: Forms Enhancements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s