Creating More User Friendly Forms with jQuery

About the Author

Mike Rogers is a Web Developer who is currently at University studying Web Technologies. He also is the founder of Full On Design. He has several years experience freelancing and you can follow him on Twitter (Rogem002).

Create forms on a web page is relatively simple, however what most developers forget is the golden rule of usability, “Users are Idiots”. In a large number of websites they fail to provide a clear indication of how a form field needs to be formatted. Some even seem to even forget to clear the field when the user clicks into, which is really useful if your website has users with motor skills.

Here is a really neat piece of jQuery I use to make forms a little easier for users which takes little work to integrate (Just copy and paste before the tag).

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <!-- Pull the jQuery base from Google, it has CDN so it should be a little faster. -->
<script type="text/javascript">
  $(document).ready(function() {
    $("form input, form input, form textarea").css('color', '#484848');
	$("form .submit").css('color', '#000');
	$("form label").hover(function () {
		$("#infobox").html($(this).attr('title'));
	});
	$("form input, form input, form textarea").focus(function () {
		if($(this).val() == $(this).attr('title')){
			$(this).val('');
		}
		$(this).css('color', '#000');
	});
	$("form input, form input, form textarea").blur(function () {
		if($(this).val() == ''){
			$(this).val($(this).attr('title'));
			$(this).css('color', '#484848');
		}
	});
  });
</script>

It takes the title of the field and places it into the value, then clears the value when the user clicks into it. It also takes the value of the label and places it into an information box, which can help explain what a user needs to do.

Here is an example of the script in action. Feel free to copy, change and share it.

Last Updated September 11th, 2009