HTML5 offers a lot of new features, which were, in my opinion, long overdue. In this article i will show you three great new HTML5 attributes which will make coding your HTML5 Website easier.
placeholder-Attribute
Do you know this placeholder texts within form fields like e.g. “Enter your email adress here”? Well with HTML5 you can add placeholders quite easily to your form fields. Just add the placeholder attribute to your form tag. No Javascript or other hacks needed anymore.
<input type="email" placeholder="Please enter your Email" name="email"> |
Which looks like this:
required-Attribute
The new required Attribute allows you to check, wheather your form field was filled out or not. If a form field with an required attribute is not filled out on submission, the browser won’t submit the form and will display an error message. In my opinion, this is a good solution for a client-side pre validation. Anyway i would not replace a server-side validation with this client-side method.
<input type="email" name="email" required> |
Which looks like this:
autofocus-Attribute
Another most useful attribute is the autofocus. With this attribute you can set the focus to a formfield after page loading automatically. No need for Javascript hacks anymore.
<input type="email" name="email" autofocus> |
Which looks like this:
If working properly, this form field should now have the focus.
The HTML5 attributes, shown above, are really great extensions to HTML. But you shold keep in mind, that this client-side techniques only work, if the web browser supports them.