HTML Search Box | Create a Search Bar using HTML and CSS

HTML search box code is included, so you can easily use these example to create a search form on your website. On this page I will show a common search box example in use today. 

The search bar for a website is usually located at the top right of the page, so I added a floating right style, and the search box follows a style similar to one of these four search examples listed below.

These are mainly visual examples that need to be plugged into the search engine to process search queries. You can set the search form method parameter to use any script you want.

Output;

<!--Copy the following CSS code and paste on head to head section of post--><br /><br /><style type="text/css"><br /> #tfheader{<br /> background-color:#c3dfef;<br /> }<br /> #tfnewsearch{<br /> float:right;<br /> padding:20px;<br /> }<br /> .tftextinput{<br /> margin: 0;<br /> padding: 5px 15px;<br /> font-family: Arial, Helvetica, sans-serif;<br /> font-size:14px;<br /> border:1px solid #0076a3; border-right:0px;<br /> border-top-left-radius: 5px 5px;<br /> border-bottom-left-radius: 5px 5px;<br /> }<br /> .tfbutton {<br /> margin: 0;<br /> padding: 5px 15px;<br /> font-family: Arial, Helvetica, sans-serif;<br /> font-size:14px;<br /> outline: none;<br /> cursor: pointer;<br /> text-align: center;<br /> text-decoration: none;<br /> color: #ffffff;<br /> border: solid 1px #0076a3; border-right:0px;<br /> background: #0095cd;<br /> background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));<br /> background: -moz-linear-gradient(top, #00adee, #0078a5);<br /> border-top-right-radius: 5px 5px;<br /> border-bottom-right-radius: 5px 5px;<br /> }<br /> .tfbutton:hover {<br /> text-decoration: none;<br /> background: #007ead;<br /> background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));<br /> background: -moz-linear-gradient(top, #0095cc, #00678e);<br /> }<br /> /* Fixes submit button height problem in Firefox */<br /> .tfbutton::-moz-focus-inner {<br /> border: 0;<br /> }<br /> .tfclear{<br /> clear:both;<br /> }<br /></style><br /><br /><!—css code end--><br /><br /><!--Copy the following HTML Code and paste on body to body of post--><br /><br /> <div id="tfheader"><br /> <form id="tfnewsearch" method="get" action="http://www.google.com"><br /> <input type="text" class="tftextinput" name="q" size="21" maxlength="120"><input type="submit" value="search" class="tfbutton"><br /> </form><br /> <div class="tfclear"></div><br /> </div><br /><br /><!—html code end--><br />