3 Great HTML5 Attributes That Simplify Coding

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.

(Visited 56 times, 1 visits today)

Leave a Comment