Click to See Complete Forum and Search --> : Search Form Field
Brachole
09-22-2008, 09:34 AM
Not sure this is done with CSS, Javascript or just HTML. But I have a single text field that acts as a search box on my webpage. I use the traditional Text Field with a Submit button.
I really like the search box Dell has on it's home page (www.dell.com). It's a simple Text Field but instead of using the Submit button next to the Text Field, it has a Magnifying Glass inside the Text Field that acts as the Submit Button...
Any idea how I can do that?
The magnifying glass is just a background image applied to the text area.
Brachole
09-22-2008, 09:44 AM
Are you sure? You can actually click on the magnifying glass and acts as a Submit Button...
opifex
09-23-2008, 04:07 PM
you're right... the magglass.gif is actually the link used to submit. this is the form from the page.
<form style="margin: 0px; padding: 0px;" name="search" action="http://search.dell.com/results.aspx?c=us&l=en&s=gen" method="get">
<input name="s" value="gen" type="hidden">
<input name="c" value="us" type="hidden">
<input name="l" value="en" type="hidden">
<input name="cs" value="" type="hidden">
<div align="right"><table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr><td>
<input autocomplete="off" id="searchinput" title="Search " class="searchinput ac_input" onFocus="if(value=='Search')value='';" value="Search" name="k" size="20" type="text">
</td><td>
<label for="cat" class="searchtypelabel">Search In</label>
<select class="searchtype" id="cat" name="cat" title="Search In" onChange="SetSeachComboTitle(this)">
<option value="all" selected="true">All Results</option>
<option value="prod">Browse Products</option>
<option value="sup">Support & Help</option>
<option value="ans">Services & Solutions</option>
<option value="abt">About Dell</option><option value="cmu">Community</option>
</select>
</td><td>
<a href="javascript:document.forms['search'].submit();"><input onClick="if(document.forms['search'].searchinput.value=='Search')document.forms['search'].searchinput.value='';" class="searchaction" src="dell_files/magglass.gif" alt="Search" border="0" height="17" hspace="2" type="image" vspace="0" width="21"></a>
</td></tr>
</tbody>
</table>
</div>
</form>
it's not the best example of a search form, but it does work