On this page I'll show the 4 most common search box examples in use today. The HTML search box code is included so that you can easily use these examples to build a search form on your website.The search bar for a website is typically located on the upper right side of the page so I've added a float right style and the search box itself generally follows a style like one of these four search examples listed below.
These are mainly visual examples, you'll need to hook them up to a search engine to process the search queries. You can set the search form method parameter to use whatever script you want.
HTML Search Box Example
Standard Search Bar with some Basic CSS Style Enhancements
I've eliminated the bevel, added a gradient, rounded some corners so that the text input box and search button form one nice styled package together. The submit button also has a nice little subtle color change on hover. The rounded corners and etc for this search bar rely on CSS3 and so if you're using an old browser the appearance won't be exactly identical as something more modern but it will be a fully functional fallback rendering.
Grab the search form html code below. I have included both the necessary html and the css in a whole page example that you can easily use.
I've eliminated the bevel, added a gradient, rounded some corners so that the text input box and search button form one nice styled package together. The submit button also has a nice little subtle color change on hover. The rounded corners and etc for this search bar rely on CSS3 and so if you're using an old browser the appearance won't be exactly identical as something more modern but it will be a fully functional fallback rendering.
Grab the search form html code below. I have included both the necessary html and the css in a whole page example that you can easily use.
<head> <title>Search Box Example 1</title> <meta name="ROBOTS" content="NOINDEX, NOFOLLOW" /> <!-- CSS styles for standard search box --> <style type="text/css"> #tfheader{ background-color:#c3dfef; } #tfnewsearch{ float:right; padding:20px; } .tftextinput{ margin: 0; padding: 5px 15px; font-family: Arial, Helvetica, sans-serif; font-size:14px; border:1px solid #0076a3; border-right:0px; border-top-left-radius: 5px 5px; border-bottom-left-radius: 5px 5px; } .tfbutton { margin: 0; padding: 5px 15px; font-family: Arial, Helvetica, sans-serif; font-size:14px; outline: none; cursor: pointer; text-align: center; text-decoration: none; color: #ffffff; border: solid 1px #0076a3; border-right:0px; background: #0095cd; background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5)); background: -moz-linear-gradient(top, #00adee, #0078a5); border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; } .tfbutton:hover { text-decoration: none; background: #007ead; background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e)); background: -moz-linear-gradient(top, #0095cc, #00678e); } /* Fixes submit button height problem in Firefox */ .tfbutton::-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" class="tftextinput" name="q" size="21" maxlength="120"><input type="submit" value="search" class="tfbutton"> </form> <div class="tfclear"></div> </div> </body>
Article 
0 Comments: