Recently i had to work on a form design having labels inside the text inputs. There are many ways to do that using javascript/jquery. The easiest way to do it is


<input type="text" value="First Name" name="yourname" onfocus="this.value = ''">



Being the basic it has limitations like once you focus on it the label is cleared and it will not come back or if you want to edit a field you can not, focusing on it second time will clear the value you entered previously.

Moreover i had to add features like, return of the default value when the cursor is moved from an empty input and initial label text (default value) in different color. And the fully functional code looks like :

$(document).ready(function(){
	//assigning css style for light color
	$('.lebelinput').addClass('lightcolor');	
	// clearing input on focus
	$('.lebelinput').live('focus', function()
	{
		if($(this).val()==$(this).attr('title'))
		{
			$(this).val('').removeClass('lightcolor');
		}
	});
	//restoring input value on blrr if the input is left blank
	$('.lebelinput').live('blur', function()
	{
		if($(this).val()=='')
		{
			var inputtitle=$(this).attr('title');
			$(this).val(inputtitle).addClass('lightcolor');
		}
	});			
});

all the input with css class “.lebelinput” will have the desired effect. I have used additional attributes “title” so that the default value can be restored if the field is left blank and that attribute also works like “tooltip”. CSS class “.lightcolor” is used to overwrite the default color to different color.

You can find the demo here

There is a simpler solution in HTML5 using attributes “placeholder”, but it does not work on focus.