FreeFind Search Box Example

Genealogy Computer Tips (Rootsweb) uses the FreeFind Search engine.

powered by FreeFind

The code as it is given by FreeFind which will NOT validate.

<!-- start of freefind search box html -->
<table cellpadding=0 cellspacing=0 border=0 >
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 7.5pt;">
<form style="margin:0px; margin-top:4px;" action="https://search.freefind.com/find.html" method="get" accept-charset="utf-8" target="_self">
<input type="hidden" name="si" value="34737488">
<input type="hidden" name="pid" value="r">
<input type="hidden" name="n" value="0">
<input type="hidden" name="_charset_" value="">
<input type="hidden" name="bcd" value="&#247;">
<input type="text" name="query" size="15">
<input type="submit" value="search">
</form>
</td>
</tr>
<tr>
<td style="text-align:left; font-family: Arial, Helvetica, sans-serif; font-size: 7.5pt; padding-top:4px;">
<a style="text-decoration:none; color:gray;" href="https://www.freefind.com" rel="nofollow">search engine</a><a style="text-decoration:none; color:gray;" href="https://www.freefind.com" rel="nofollow" > by
<span style="color: #606060;">freefind</span></a>
</td>
</tr>
</table>
<!-- end of freefind search box html -->

Coding has been tweaked to allow it to validate and the styles moved to a css file.

<!--Beginning of validated search box-->
<form id="myform" action="http://search.freefind.com/find.html" method="get">
<div>
<input name="id" type="hidden" value="34737488" >
<input name="pageid" type="hidden" value="r" >
<input name="mode" type="hidden" value="ALL" >
<input name="n" type="hidden" value="0" >
<input name="_charset_" type="hidden" value="" >
<input name="bcd" type="hidden" value="÷" >
<input name="query" size="15" type="text" value=" " >
<input class="go" type="submit" value=" Go " > </div>
<p>powered by <a href="https://www.freefind.com/">FreeFind</a></p>
</form>

<!-- end of freefind search box html -->

Style block for FreeFind Search Form

<style>
#container {
width:80%;
margin: auto;
}

#search {
}
#myform {
text-align: center;
margin: 0;
padding: 0;
}
#myform .textinput {
width: 100px;
border: 1px solid gray;
font-size: small;
}
#myform .submit {
font: bold 11px Verdana;
height: 22px;
background-color: #B8D4BA;
}
#myform p {
margin: 0px 0px 7px 0px;
}
#myform a:link {
font-weight: bold;
color: #004145;
background: transparent;
text-decoration: underline;
}
.go {
background-color: #000000;
color: #ffffff;
}
#myform fieldset {
border: 0px;
margin: 5px;
width: 80%;
border: 1px #000000 solid;
}
input:focus {
border: 2px solid #993300;
}
.code {
font-family: "Courier New", Courier, monospace;
padding: 5px;
background-color: #FFFFCC;
margin-left: 5px;
}
</style>