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.

The HTML

<div id="wrapper">
 <form action="" method="post">
  <fieldset>
   <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>
      <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>
    </div>    
    <input type="submit" name="submit" value="Send"/>
  </fieldset>    
 </form>
</div>

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.

Compatibility:
Firefox
Safari
Opera

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.

Share the knowledge

  • Facebook
  • Twitter
  • Google Plus
  • LinkedIn
  • StumbleUpon
  • Digg
  • Delicious
  • Reddit

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

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> <pre lang="" line="" escaped="" cssfile="">

Comment moderation is enabled. Your comment may take some time to appear.