Register form with HTML5 using placeholder and CSS3 part 1

In this first part of the tutorial I’m going to talk about the HTML5 attribute placeholder.The placeholder attribute shows text in a field until the field is focused upon, then hides the text. You’ve seen this technique a billion times with JavaScript, but native HTML5 support is even better!

This is the demo of this first part of the tutorial.

What I’m going to do in this tutorial is create a register form. But I’ve inserted an textarea so you can see that the placeholder attribute it’s working even in textarea and on input type password.

This is how the form it looks at the moment without the CSS.


<div id="wrapper">
 <form action="" method="post">
   <legend>Register Form</legend>
    <div><input type="text" name="first_name" placeholder="First Name"/></div>
    <div><input type="text" name="last_name" placeholder="Last Name"/></div>
    <div><input type="password" name="first_name" placeholder="Password"/></div>
    <div><input type="text" name="email" placeholder="Email"/></div>
      <div class="small">this textarea is just for test so you can see the placeholder working on textarea as well</div>
      <textarea name="message" placeholder="Message"></textarea>
    <input type="submit" name="submit" value="Send"/>

Yes using this attribute you don’t need all that JavaScript overtext, hint or any other javascript plugin to have an text over the input value.
Unfortunately it’s not supported by all browsers so if you or your client need an input hint you still need to install a plugin that does that.


None of the Internet Explorer version supports this attribute. I know it sucks, not even IE9.

Here is the demo page.

In the next part of this tutorial I am going to create the CSS for this form and you will see that with the help of CSS3 you don’t need to use JavaScripts effect for animate your input's. You can do that from CSS3. But you will see the CSS in the next part of the tutorial.

5 thoughts on “Register form with HTML5 using placeholder and CSS3 part 1

  1. Hi there, just became alert to your blog through Google, and found that it’s truly informative.
    I am going to watch out for brussels. I’ll appreciate if you continue this in future.
    Many people will be benefited from your writing. Cheers!

  2. どうも、更新記事を読ませてもらいました。当方にとってものすごく参考になりました。

Leave a Reply

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