Placeholder Text using HTML5

Placeholder Text using HTML5

Placeholder attribute allows you to display text in a form input when it is empty and when it is not focused

<style>
body {
 font: 90%/150% Arial, Helvetica, sans-serif;
 color: #666;
 width: 700px;
 margin: 30px auto;
}
a {
 color: #000;
 text-decoration: none;
}
a:hover {
 color: #F60;
}
p {
 margin: 0 0 2em;
}
h1, h2, h3 {
 line-height: 110%;
}
h1 {
 font: bold 80% Arial, Helvetica, sans-serif;
 text-transform: uppercase;
 margin: 0 0 2px;
 color: #999;
}
h2 {
 margin: 0 0 8px;
}
h3 {
 border-top: solid 2px #ccc;
 margin: 40px 0 15px;
 padding-top: 10px;
}
form p {
 margin: 0 0 15px;
}
input,
textarea,
input[type=search] {
 background: #f4f4f4;
 border: solid 1px #a3a3a3;
 padding: 5px 10px;
 font: 15px "Times New Roman", Times, serif;
 -webkit-box-shadow: inset 0 2px 3px rgba(0,0,0,.1);
 -moz-box-shadow: inset 0 2px 3px rgba(0,0,0,.1);
 box-shadow: inset 0 2px 3px rgba(0,0,0,.1);
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 -webkit-appearance: none; /* reset webkit search style */
}
/* input:focus */
input[type=text]:focus,
textarea:focus,
input[type=search]:focus {
 background: #fff;
 border-color: #333;
 outline: none; /* remove outline */
}
/* field width */
input[type=text], input[type="search"] {
 width: 200px;
}
textarea {
 width: 400px;
 height: 250px;
}
/* placeholder */
.placeholder {
 color: #bbb;
}
/* webkit placeholder */
::-webkit-input-placeholder {
 color: #bbb;
}
/* moz placeholder */
:-moz-placeholder {
 color: #bbb;
}
</style>

</head>

<form class="form" method="post">
 <p><input type="text" placeholder="Your name please"></p>
 <p><input type="text" placeholder="Enter your email"></p>
 <p><textarea placeholder="Write your comments here"></textarea></p>
 <p><input type="submit" name="submit" value="Submit"></p>
</form>