UtahRails.net Tech Talk
…being a log of web site changes, along with technical discussions of computer-related subjects.
(Click here for a description of how this UtahRails web site is configured and how it works.)
Making Google Custom Search Validate for XHTML Strict
I wanted to use custom search inside of a top menu bar, without a label, but I was getting the same 6 validation errors for XHTML Strict as many other people. After some searching in this forum and others, and with some tweaking, this is what works:
<div id="googlesearch"><!-- Google CSE Search Box Begins -->
<form action="http://www.utahrails.net/search.php" id="searchbox_my-cse-account">
<div>
<input type="hidden" name="cx" value="my-cse-account" />
<input type="hidden" name="cof" value="FORID:11" />
<input id="searchbox" type="text" name="q" size="17" value="" />
<input type="submit" name="sa" value="Go" />
</div>
</form><script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=searchbox_my-cse-account"></script>
</div><!-- Google CSE Search Box Ends -->
I put the "input" inside of a <div> because IE screws it up if I put it inside of a <p>.
I didn't use a <label> because of the limited space, both vertical and horizontal.
================
A message in an on-line forum said to put a <p> around the "input" box, but I used a <div> instead so as not to confuse IE.
Another message said to add a <label> for accessibility. This is good, but I didn't want to take up any more space than what was in the top menu already.
If I were to add a <label>, it would likely be thus:
Change this line:
<input type="text" name="q" size="25" />
...to read as:
<label id="searchlabel" for="searchbox">Google Custom Search:</label>
<input id="searchbox" type="text" name="q" size="17" value="Google Custom Search" />
You need to do add an id="anameyouchoose" to the "input" tag, then put a label above it to say that the id belongs to that label.
This will make your site Priority 3 for WAI (Web Accessibility Initiative).
***
