In this first part of the tutorial I’m going to talk about the HTML5 attribute
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"> <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>
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.
input's. You can do that from CSS3. But you will see the CSS in the next part of the tutorial.