Spiga

Dynamic form input Text With Javascript

by Gabi Solomon

For a lot of forms there is a need to display a text as a default one in the inputs. But it is to nice that the users has to delete that text before entering his own, but you don't really want to give up on the predefined / default text since it sometimes offer some useful tips for the user to understand that inputs purpose.

Another well know scenario are the search forms .. where you see written search and when you click the forms goes empty, that doesn't offer to much information but it makes for a better user experience by providing an elegant dynamic search form.

Well the way to do it is JavaScript. I saw a lot of ways to do it, with functions, but that all seems to complicated to me for such a simple thing. My way is to write the JS directly in the input code:

PLAIN TEXT
JAVASCRIPT:
  1. <form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
  2. <input type="text" name="s" value="Search site..."
  3.  onfocus="if(this.value=='Search site...')this.value=''" onblur="if(this.value=='')this.value='Search site...'" />
  4. <input type="submit" value="Search" />
  5. </form>

DEMO

Because people asked for a demo, i will point them to the right bar, called search ;) . That is the effect you will get.

hope you enjoy this,
Cheers

Related Posts

  • http://latest-mtv.net latest-mtv

    Demo?

  • http://www.gsdesign.ro/ Gabi Solomon

    look at the right bar, the search form on top