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>
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!