How To Create CSS Search Box Form Design

Share:

How To Create CSS Search Box Form Design. Usually, on any website always has a search form. This search form has a very important function that is used by visitors to find information on the website like google, yahoo and bing which is basically a web search.
How To Create CSS Search Box Form DesignIn the previous tutorial we have a lot to discuss about how to create a search script to perform a search on the MySQL database server and the xml file. Would not be complete if we did not discuss also a tutorial on how to create a CSS search form. In this tutorial we will try to create a search box with CSS form an attractive design. How ? Follow the tutorial below …

Download now How To Create CSS Search Box Form Design

How To Create CSS Search Box Form Design

Create HTML Search Form
Quite simply, the html code to create a search form are as follows :

<h1><a href="http://tutorial.world.edu/website-design/how-to-create-css-search-box-form-design/">How To Create CSS Search Box Form Design</a> | <a href="http://tutorial.world.edu">Tutorial.World.Edu</a></h1>
<form action="" method="post">
<input type="text" name="name" placeholder="Search here ..."/>
<input value="Search" type="submit" />

Create CSS Code
To enhance the appearance of the search form that you created in earlier step, we need the CSS code. You can use the CSS code below:

form {
    font-family: 'Open Sans', sans-serif;
    color:#848484;
	width:510px;
	float:center;
    padding:4px 4px 4px 4px; 
    margin:5px 5px 5px 350px;

	line-height: 62px;
	border-radius:5px;
	background:#f2f2f2;
}
::-webkit-input-placeholder { color: #acacac;}
input {
    margin:0px 1px;
    border:none;
    background-color:#CCC;
	background-image:url('http://2.bp.blogspot.com/-ZcucRVPWaIo/UtNfv-HAMtI/AAAAAAAABUo/T5aajO9bkxA/s1600/How+To+Create+CSS+Search+Box+Form+Design+Tutorial+2.png');
	background-repeat:no-repeat;
	background-size:45px 45px;
	background-position:left center;
    height:60px;
    width:348px;
    vertical-align:bottom;
    font-size:16px;
	padding-left:40px;
    border-radius:5px;
	
}
input[type=submit]{
    background:#30aa13;
    color:#fff;
	font-size:24px;
    height:60px;	
	width:153px;
    padding:0px 7px;
    border-radius:5px;
}

In here the search box given circle effect with border radius 5px.

Complete html page to make CSS search box in this form are as follows :
css-search-box.html

<html>
<head>
<title> How To Create CSS Search Form Box Design | Tutorial.World.Edu </title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<style>
body {
padding:0px; 
margin:60px;
background: url("http://4.bp.blogspot.com/-YNR7ZZ5GW3Q/UtNf5yl8WdI/AAAAAAAABUw/cLolwiFHXqk/s320/How+To+Create+CSS+Search+Box+Form+Design+Tutorial+3.png") repeat;
}
h1{
text-align:center;
color:#533515;
}
h1 a{
color:#533515;
text-decoration:none;
}
form {
    font-family: 'Open Sans', sans-serif;
    color:#848484;
	width:510px;
	float:center;
    padding:4px 4px 4px 4px; 
    margin:5px 5px 5px 350px;

	line-height: 62px;
	border-radius:5px;
	background:#f2f2f2;
}
::-webkit-input-placeholder { color: #acacac;}
input {
    margin:0px 1px;
    border:none;
    background-color:#CCC;
	background-image:url('http://2.bp.blogspot.com/-ZcucRVPWaIo/UtNfv-HAMtI/AAAAAAAABUo/T5aajO9bkxA/s1600/How+To+Create+CSS+Search+Box+Form+Design+Tutorial+2.png');
	background-repeat:no-repeat;
	background-size:45px 45px;
	background-position:left center;
    height:60px;
    width:348px;
    vertical-align:bottom;
    font-size:16px;
	padding-left:40px;
    border-radius:5px;
	
}
input[type=submit]{
    background:#30aa13;
    color:#fff;
	font-size:24px;
    height:60px;	
	width:153px;
    padding:0px 7px;
    border-radius:5px;
}
</style>
</head>
<body>
<h1><a href="http://tutorial.world.edu/website-design/how-to-create-css-search-box-form-design/">How To Create CSS Search Box Form Design</a> | <a href="http://tutorial.world.edu">Tutorial.World.Edu</a></h1>
<form action="" method="post">
<input type="text" name="name" placeholder="Search here ..."/>
<input value="Search" type="submit" />
</form>
</body>
</html>

Please upload to the web hosting or localhost and see the results.
How To Create CSS Search Box Form Design
Done already, this tutorial. What do you think? The search box is more interesting than the html form. When their less attractive, you can add CSS with various other effects. Please be creative and good luck 🙂
Thanks for reading How To Create CSS Search Box Form Design

[Tutorial.World.Edu]

15 thoughts on “How To Create CSS Search Box Form Design

Leave a Reply

Your email address will not be published. Required fields are marked *