============
 = The CSS  =
 ============
#stikkord{
	width: 300px;
	margin-bottom: 10px;
}
.placeholder {
	color:#999999;
	}	
.tag{
	background-color: yellow;
	font-size: 200%;
	margin:2px;
	line-height:1.2;
	}

 ===================
 = The jQuery code =
 ===================	
	
	$(document).ready(function() {
	  var searchLabel = $('#tagsform form label').remove().text();
	  $('#stikkord').addClass('placeholder').val(searchLabel).focus(function() {
	    if (this.value == searchLabel) {
	      $(this).removeClass('placeholder').val('');
	    };
	  }).blur(function() {
	    if (this.value == '') {
	      $(this).addClass('placeholder').val(searchLabel);
	    };
	  });
	  $('#tagsform form').submit(function() {
	    if ($('#stikkord').val() == searchLabel) {
	      $('#stikkord').val('');
	    }
	  });
	});

 =================
 = The HTML form =
 =================
	<div id="tagsform">	
		<form>
		<label for="stikkord">Skriv inn beskrivende stikkord</label>
		<input type="text" name="stikkord" id="stikkord" />
		<input type="submit" value="Ok" name="inputTagsButton" id="inputTagsButton" />
		</form>
	</div><!-- end tagsform -->

 ============
 = The CSS  =
 ============
#stikkord{
	width: 300px;
	margin-bottom: 10px;
}
.placeholder {
	color:#999999;
	}	
.tag{
	background-color: yellow;
	font-size: 200%;
	margin:2px;
	line-height:1.2;
	}

 ===================
 = The jQuery code =
 ===================	
	
	$(document).ready(function() {
	  var searchLabel = $('#tagsform form label').remove().text();
	  $('#stikkord').addClass('placeholder').val(searchLabel).focus(function() {
	    if (this.value == searchLabel) {
	      $(this).removeClass('placeholder').val('');
	    };
	  }).blur(function() {
	    if (this.value == '') {
	      $(this).addClass('placeholder').val(searchLabel);
	    };
	  });
	  $('#tagsform form').submit(function() {
	    if ($('#stikkord').val() == searchLabel) {
	      $('#stikkord').val('');
	    }
	  });
	});

 =================
 = The HTML form =
 =================
	<div id="tagsform">	
		<form>
		<label for="stikkord">Skriv inn beskrivende stikkord</label>
		<input type="text" name="stikkord" id="stikkord" />
		<input type="submit" value="Ok" name="inputTagsButton" id="inputTagsButton" />
		</form>
	</div><!-- end tagsform -->

This is basically the code given in the book "learning jQuery " by Chaffer J & Swednerg K.

Placeholder text on fields (html, css, jquery)

css, html, jquery

Other