Creative Web Development - CSS, XHTML, Javascript and RTML for Yahoo Store

Default search input text, and using CSS to clean up your search box

Quick one tonight, a nice simple script so your search box is a little more informative. By using the following code your search input will have the text "Enter Keywords", and it will disappear when the user clicks in the box. If they don't enter anything, it will reappear, otherwise it will let their entered text remain.

Is it necessary? Nope. But you might as well make it as simple as possible for those who are newer to the web - especially considering how little code it actually is.

<input 
 type="text" 
 name="query" 
 class="search" 
 value="Enter Keywords!" 
 onfocus="if(this.value=='Enter Keywords!') 
             this.value='';" 
 onblur="if(this.value=='') 
            this.value='Enter Keywords!';" />

And you can add the following CSS code to make it a little cleaner looking.

.search {
    border: 1px inset #000080;
    width: 150px;
    font: normal 11px verdana;
    padding: 1px;
    height: 18px;

}

Tags

internet, javascript, css, search, input, form, forms, usability,

posted by steve at 2:19 AM