It’s Called Web Design

This is the search box that I always use.  It has >> for the button and a value of “Search…” that disappears when clicked.

<form method="get" id="searchform" action="http://mrcomplain.com/">
<div><input type="text" value="Search" onclick="value=''" name="s" id="s" />
<input type="submit" id="searchsubmit" value=">>" />
</div>
</form>

You can then position the search form using CSS.  The following is an  example, but you will obviously need to change the information contained therein to make it fit on your page -

#searchform {
	position: absolute;
	top: 231px;
	left: 50%;
	margin-left: -250px;
	padding: 5px 3px;
	}

#searchform #s {
	width: 135px;
	padding: 2px;
	}

#searchsubmit {
	padding: 1px;
	}

Tags: absolute, box, click, CSS, on, onclick, position, search

This entry was posted on Thursday, September 18th, 2008 at 9:16 pm and is filed under CSS, HTML, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.