One of the biggest challenges one has to face when deciding to pass from the transitional xhtml validation to the strict one is certainly the recalcitrant searchform script. In this text, I present you a simple piece of code that will strict validate.
The most common searchform script
Currently, the most common searchform script is this one:
<form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="text" value="Search…" name="s" id="searchbox" onfocus="if (this.value == ‘Search…’) {this.value = ”;}" onblur="if (this.value == ”) {this.value = ‘Search…’;}" />
<input type="submit" id="submitbutton" value="GO" />
</form>
<input type="text" value="Search…" name="s" id="searchbox" onfocus="if (this.value == ‘Search…’) {this.value = ”;}" onblur="if (this.value == ”) {this.value = ‘Search…’;}" />
<input type="submit" id="submitbutton" value="GO" />
</form>
I found it in the intensively used wordpress themes, and I bet it appears in many others. Its problem? It doesn’t validate.
The valid script
The simples solution is to nest the “input” tags in a “p” tag. The valid code will be:
<form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<p><input type="text" value="Search…" name="s" id="searchbox" onfocus="if (this.value == ‘Search…’) {this.value = ”;}" onblur="if (this.value == ”) {this.value = ‘Search…’;}" />
<input type="submit" id="submitbutton" value="GO" /></p>
</form>
<p><input type="text" value="Search…" name="s" id="searchbox" onfocus="if (this.value == ‘Search…’) {this.value = ”;}" onblur="if (this.value == ”) {this.value = ‘Search…’;}" />
<input type="submit" id="submitbutton" value="GO" /></p>
</form>
A strict validating and simplier script
If you wish to use a less fancy script, i.e. without the onfocus – onblur value, grab this piece of code:
<form method="get" id="searchform" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<p>
<input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" size="12" />
<input type="submit" id="ssubmit" value="SEARCH" />
</p>
</form>
<p>
<input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" size="12" />
<input type="submit" id="ssubmit" value="SEARCH" />
</p>
</form>
Published on the 11th of January, 2009, in WordPress · Print
I searched for ages trying to find this answer – I’ve now bookmarked for next time I want to use it!
Thanks
Thanks a lot. When I used the WP widget search form, it didn’t validate for Strict. Don’t have enough on my site yet to warrant a search form, but your code is now in my sidebar–commented out and good to go!
Nice! I have bookmarked this and will use this extensively. Is there a way to update the wordpress widget to use this code so that search is still a widget. I looked (briefly) for the code within the wordpress files but didn’t find it.
Yes, there is a way, but I wouldn’t recommend it; you’d have to hack a core file, which is risky and not productive at all (the file will be overwritten with every WordPress update, so you’ll need to start over and over again). If you want to use this code and still have widgets enabled in the same sidebar, there’s a much more elegant solution: just paste the code outside of the dynamic area, above the line stating “if function exists dynamic sidebar” or below the closing “endif”.