Text Fixer Tools

HTML Search Box

In case you missed it, you can find more simple HTML Search Boxes in part 1. I covered the basic standard search bar and a version of it that uses default placeholder text that disappears when the text field is clicked.

On this page I'll cover two more very popular search styles and talk briefly about HTML5 search forms.

Search Bar Without a Submit Button

This one has the default placeholder text that appears in the search box but the difference for this one is that it doesn't actually need a search button.

I'm not particularly fond of this style but in some instances where space or size is a factor, this might be the right choice for you. Otherwise I think it's all too easy for a visitor not to notice this style of search bar.

<!DOCTYPE html>
<html>
<head>
<title>Search Box Example 3 - No submit button and default placeholder text that gets cleared on click</title>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<!-- JAVASCRIPT to clear search text when the field is clicked -->
<script type="text/javascript">
window.onload = function(){ 
	//Get submit button
	var submitbutton = document.getElementById("tfq");
	//Add listener to submit button
	if(submitbutton.addEventListener){
		submitbutton.addEventListener("click", function() {
			if (submitbutton.value == 'Search our website'){//Customize this text string to whatever you want
				submitbutton.value = '';
			}
		});
	}
}
</script>
<!-- CSS styles for standard search box with placeholder text-->
<style type="text/css">
	#tfheader{
		background-color:#c3dfef;
	}
	#tfnewsearch{
		float:right;
		padding:20px;
	}
	.tftextinput3{
		margin: 0;
		padding: 5px 15px;
		font-family: Arial, Helvetica, sans-serif;
		font-size:14px;
		color:#666;
		border:1px solid #0076a3;
		border-top-left-radius: 5px 5px;
		border-bottom-left-radius: 5px 5px;
		border-top-right-radius: 5px 5px;
		border-bottom-right-radius: 5px 5px;		
	}
	.tfclear{
		clear:both;
	}
</style>
</head>
<body>
	<!-- HTML for SEARCH BAR -->
	<div id="tfheader">
		<form id="tfnewsearch" method="get" action="http://www.google.com">
		        <input type="text" id="tfq" class="tftextinput3" name="q" size="21" maxlength="120" value="Search our website">
		</form>
		<div class="tfclear"></div>
	</div>
</body>
</html>

Search Box Using an Image instead of a Submit Button

This one is increasingly popular. Instead of the standard html search button it uses an image instead. Typically an icon like a magnifying glass is used instead of a search form button.

For this example I created my own magnifying glass search icon which is free to use - no link backs or thanks or rigmarole are necessary - just download the search icon and use it if you want to.

There are many different ways to use an image instead of the standard submit button for a search form but this is one of the easier ways I've found to implement this type of functionality.

<!DOCTYPE html>
<html>
<head>
<title>Search Box Example 4 - Image used as submit button and default placeholder text that gets cleared on click</title>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<!-- JAVASCRIPT to clear search text when the field is clicked -->
<script type="text/javascript">
window.onload = function(){ 
	//Get submit button
	var submitbutton = document.getElementById("tfq");
	//Add listener to submit button
	if(submitbutton.addEventListener){
		submitbutton.addEventListener("click", function() {
			if (submitbutton.value == 'Search our website'){//Customize this text string to whatever you want
				submitbutton.value = '';
			}
		});
	}
}
</script>
<!-- CSS styles for standard search box with placeholder text-->
<style type="text/css">
	#tfheader{
		background-color:#c3dfef;
	}
	#tfnewsearch{
		float:right;
		padding:20px;
	}
	.tftextinput4{
		margin: 0;
		padding: 6px 15px;
		font-family: Arial, Helvetica, sans-serif;
		font-size:14px;
		color:#666;
		border:1px solid #0076a3; border-right:0px;
		border-top-left-radius: 5px 5px;
		border-bottom-left-radius: 5px 5px;	
	}
	.tfbutton4 {
		margin: 0;
		padding: 0;
		width:30px;
		height:30px;
		font-family: Arial, Helvetica, sans-serif;
		font-size:14px;
		font-weight:bold;
		outline: none;
		cursor: pointer;
		text-align: center;
		text-decoration: none;
		color: #ffffff;
		border: solid 1px #0076a3; border-right:0px;
		border-top-right-radius: 5px 5px;
		border-bottom-right-radius: 5px 5px;
		background: #438db8 url('tf-search-icon.png');
	}
	/* Fixes submit button height problem in Firefox */
	.tfbutton4::-moz-focus-inner {
	  border: 0;
	}
	.tfclear{
		clear:both;
	}
</style>
</head>
<body>
	<!-- HTML for SEARCH BAR -->
	<div id="tfheader">
		<form id="tfnewsearch" method="get" action="http://www.google.com">
		        <input type="text" id="tfq" class="tftextinput4" name="q" size="21" maxlength="120" value="Search our website"><input type="submit" value=" " class="tfbutton4">
		</form>
		<div class="tfclear"></div>
	</div>
</body>
</html>

Hey! If you want you can download all the search examples code and images.

HTML5 Search box

There are some other features available in HTML5 that aren't fully supported by all browsers yet but will soon become very useful - when I get the energy I'll create a full page on building HTML5 forms - but otherwise I've covered the most common site search styles used on websites today.

Also HTML5 forms can handle placeholder text without having to add javascript to make it work - a feature that more and more web developers are starting to leverage.

For most modern browsers at this time the placeholder text in a HTML5 form will disappear once a new first letter is typed - as opposed to disappearing once the text box is clicked on. It's a slight behavioral difference from what I would expect but it's still pretty neat how HTML5 can handle this type of behavior naturally.

I'll do a rewrite on the HTML5 features across the browsers sometime in the very vaguely defined future.

The Most Popular Tools

The Newest Tools