How to create a label inside an <input> element and style it?

Question 1

This appears to work xbrowser using a combination of jQuery and the Modernizer library.

Requires the jQuery and Modernizer Libraries be on the site and properly referenced.

HTML

<head>
<script src="jquery-1.9.1.min.js"></script>
<script src="modernizr.js"></script>

<script>
$(document).ready(function(){

if(!Modernizr.input.placeholder){

$('[placeholder]').focus(function() {
  var input = $(this);
  if (input.val() == input.attr('placeholder')) {
    input.val('');
    input.removeClass('placeholder');
  }
}).blur(function() {
  var input = $(this);
  if (input.val() == '' || input.val() == input.attr('placeholder')) {
    input.addClass('placeholder');
    input.val(input.attr('placeholder'));
  }
}).blur();
$('[placeholder]').parents('form').submit(function() {
  $(this).find('[placeholder]').each(function() {
    var input = $(this);
    if (input.val() == input.attr('placeholder')) {
      input.val('');
    }
  })
});

}
</script>
</head>

<body>
<form>
<input name="firstName" type="text" maxlength="40" placeholder="Enter your first name">
</form>

CSS

input[type=text] {
color: #000;
}

input[type=text].placeholder {
color: #666;
}

SOURCE: http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text

Question 2

HTML5

HTML5 brings a handy attribute for the <input> tag called placeholder which enables native support of this functionality.

jsFiddle

<input type="text" placeholder="Search..." />

Support

All latest browsers support this, IE9 and below don't however.

`<label>`

Note that the placeholder attribute is not a replacemenr for the <label> tag which every input should have, make sure you include a label for the <input> even if it's not visible to the user.

<label for="search">Search</label>
<input id="search" placeholder="Search..." />

The above <label> can be hidden so it's still available to assistive technologies like so:

label[for=search] {
    position:absolute;
    left:-9999px;
    top:-9999px;
}

Cross-browser solution

Here is a potential cross-browser solution, I've moved the code out of the tag and into script tags and then used the class placeholder to indicate when to fade the text.

jsFiddle

HTML

<input name="firstName" type="text" maxlength="40" value="Enter your first name" 
    class="placeholder" id="my-input" />

CSS

input[type=text].placeholder {
    color: #999;
}

JS

<script type="text/javascript">
var input = document.getElementById('my-input');

input.onfocus = function () {
    if (this.value == this.defaultValue && this.className == 'placeholder') {
        this.value = '';
    }
    this.className = '';
};
input.onblur = function() {
    if (this.value == '') {
        this.className = 'placeholder';
        this.value = this.defaultValue;
    }
};
</script>

Apply to all `input[type=text]`

We can extend the above solution to apply to all input[type=text] by using document.getElementsByTagName(), looping through them and checking the type attribute with element.getAttribute().

jsFiddle

var input = document.getElementsByTagName('input');

for (var i = 0; i < input.length; i++) {
    if (input[i].getAttribute('type') === 'text') {
        input[i].onfocus = inputOnfocus;
        input[i].onblur = inputOnblur;
    }
}
function inputOnfocus () {
    if (this.value == this.defaultValue && this.className == 'placeholder') {
        this.value = '';
    }
    this.className = '';
}
function inputOnblur() {
    if (this.value == '') {
        this.className = 'placeholder';
        this.value = this.defaultValue;
    }
}

How to create a label inside an <input> element and style it?

HTML5

Support

<label>

Cross-browser solution

Apply to all input[type=text]

`<label>`

Apply to all `input[type=text]`