Question

I have a simple form which is like this:

The HTML:

<form action="post">
    <input class="text" type="text" name="firstname" value="First Name"/>
    <br />
    <input class="text" type="text" name="lastname" value="Last Name" />
    <br />
    <input class="text" type="text" name="username" value="Username" />
    <br />
    <input class="text" type="password" name="password" value="password" />
    <br />
    <input class="button" type="submit" value="Submit" />
    <br />
</form>

The CSS:

fieldset { margin:1em 0; }
form { margin:0; }
input { }
input.text { color: #aaa; }
input:focus { background:#ddd; }
input, select, textarea { display:block; margin-bottom:5px; padding:5px 10px; }
input[type="checkbox"], input[type="radio"] { padding: 0; display:inline; vertical-align:-1px; }
input[type="submit"] { cursor:pointer; }
label { font-weight:normal; display:block; margin-top:0.5em; }

The Output:

What I want is…..

When a visitor clicks in the input field and the background-color changes to #ddd (whch I am achieving by using css input:focus { background:#ddd; }), Can the text like ‘Last Name’ be hidden. Can I use some css like display:none or something else.

If yes, how? Kindly help.

Please note: I do not want to use any JavScript if possible.

Answer 1

In html 5 you can use placeholder lik this:

<input class="text" type="text" name="lastname" value="" placeholder="Last Name"/>

And for older browser i use this jquery script

if ($.browser.msie) {
  $("input[type=text], textarea").each(function() {
    return $(this).val($(this).attr("placeholder")).addClass("placeholder");
  }).bind("focus", function() {
    if ($(this).val() === $(this).attr("placeholder")) {
      return $(this).val("").removeClass("placeholder");
    }
  }).bind("blur", function() {
    if ($(this).val() === "") {
      return $(this).val($(this).attr("placeholder")).addClass("placeholder");
    }
  });
}