HTML search box with hints

[mikeyb2009]

What is the best way to design a HTML search box with hints of what you can search for, ie 'recipe, book, member'?

One example I have seen is on John Lewis's website - http://www.johnlewis.com - see how in the search box is says 'keyword, produce code, shop name'

Would I need to use Javascript to achieve this?

Thanks in advance for any help you can give.

[Fang]

<input type="text" value="recipe, book, member" onfocus="if(this.value==this.defaultValue){this.value='';}" onblur="if(this.value==''){this.value=this.defaultValue;}">

[Charles]

A bit easier:<input value="recipe, book, member" onfocus="this.value = ''; this.onfocus = function () {}">

[mikeyb2009]

A bit easier:<input value="recipe, book, member" onfocus="this.value = ''; this.onfocus = function () {}">
Thanks, this was a great help, is there anyway I can change the CSS class for the predefined text, ie 'recipe, book, member'? I would like to make it slightly lighter and italic, but when a user then types an actual search string, it revet6s to normal type set.

[Fang]

<input value="recipe, book, member" onfocus="this.value = ''; this.style.fontWeight = 'bold'; this.onfocus = function () {}">
or
<input value="recipe, book, member" onfocus="this.value = ''; this.className = 'someClass'; this.onfocus = function () {}">

[Charles]

If you use Mr. Fang's second example and change the className you could precede those with an asterix. See http://www.w3.org/TR/CSS2/generate.html#propdef-content .

[mikeyb2009]

Great work guys, works like a dream!! Thanks so much