5 useful HTML5 input field attributes

For last couple of years, HTML5 has been the topic of discussion among the web developers, designers and computer geeks. And if you are web designer, some of your clients must already been demanding the websites made with HTML5. While HTML5 has still not been released officially; it is going to create a big change in the web development industry. The main aim of HTML5 is to make the mark-up easier to code and read and to reduce the need of external plugins. Here, I am listing the 5 useful attributes of HTML5 used in input fields which you can start using without any worry about the compatibility of older browsers. All these features eliminate the need of JavaScript and make your life easier as web designers and developers.

 

 

 1. Attribute ‘required’

One of the most useful features which you can use in your form is the ‘required’ attribute. Once you put this attribute in your input field, it becomes mandatory. If someone tries to submit the form leaving this field blank, browser will display an error message and the form will not be submitted.

While the older browsers may not have this functionality, there would not be any negative impact. They will simply ignore this attribute and display the regular text box.

<input type="text" name="RequiredField" required="required">

Now, if you feel a little awkward in writing required=”required”, you can simply write required and it will do. The choice is yours, the former is XML friendly and the later is easy to use !

2. Email Input

If you have an email input in your form and want to allow only the correct email entry by your users, most probably you will use JavaScript to check the form before it is finally submitted. While it was fine, you need to write a few lines of JavaScript.

With HTML5, you just need to add type=”email” in email input and you are good to go. Here also, the older browsers will treat it as regular text box.

<!DOCTYPE html>
 <html>
 <head>
        <title>HTML5 email input</title>
 </head>
 <body>
      <form action="" method="post">
             <label for="email">Email:</label>
             <input id="email" type="email" />
             <button type="submit"> Submit</button>
      </form>
 </body>
 </html>

You may like to use both email type and require attribute together.

3. Attribute ‘autofocus’

You may be using JavaScript to automatically select an input field after page loading. It saves the user from one extra click. This can easily be accomplished with HTML5 ‘autofocus’ attribute. Just add ‘autofocus’ and you are ready to go!

<input type="text" name="AutofocusField" autofocus>

As earlier, you can use XML friendly version autofocus=”autofocus”.

4. Attribute ‘Placeholder’

You must be using the forms where there is some text typed in the input field as hints. Once you click inside this field, the text disappears. For achieving this functionality, you need to use either JavaScript or AjaxControlToolKit if you are coding in asp.net.

With HTML5, you can incorporate this cool feature in your input text boxes with placeholder attribute.

<input type="text" name="emailField" placeholder="Your email here">

Here, the text “Your email here” will be visible till the field is blank. However, once you click inside the field to select it, this text will disappear. Needless to say, if you are using autofocus, placeholder will not work until you click outside the text box after page load.

5. Pattern Attribute

If you wanted your user to follow certain pattern while filling up the value in any field, the best method to do it till now was to use JavaScript. Well….not any more!

Just like email input, with HTML5, we have pattern attribute for regular expression validation. Of course, you will require a little knowledge about regular expression before you can use it.  Here is an example:

<input type="text" name="patternField" pattern="[a-z]{5,10}" >

If you can remember regular expression even a little, you will know that [a-z]{5,10} means alphabets in lowercase letters with 5 to 10 characters.

While using pattern attribute, it is advisable that you use it along with placeholder attribute or provide some hint text to pass on the information about the input pattern. Otherwise, your visitors may not know about the correct pattern to fill out the form.

<input type="text" name="patternField" 
 pattern="[a-z]{5,10}" 
 placeholder="lowercase 5<>10" >

Conclusion

Currently, no browser support all the features of HTML5 and it will take years before we start to see the full-fledged use of HTML5. However, if you just ignore HTML5, you can very soon be left behind. The good news is that almost all new browsers now support the attributes listed above and you can safely start using these in your upcoming projects.

To see these HTML5 attributes in action click here

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>