Some of you may or may not know that I have been working on an HTML5 WordPress framework that was just released called PressWork. We are still squashing some bugs for the official 1.0 release and one of the issues that came up was in regards to the default WordPress search box and making it 100% HTML5 compliant.

This is what the default search box code looks like:

<form role="search" method="get" id="searchform" action="/">
    <div><label class="screen-reader-text" for="s">Search for:</label>
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="Search" />
    </div>
</form>

If you wanted to overwrite this you could just create a serachform.php file and add it to your theme folder, but I prefer to just hook into the get_search_form filter.

To update the form we need to change the input type to the new HTML5 “search” type. Here is what you need to add to your functions.php file:

/**
 * Replacing the default WordPress search form with an HTML5 version
 *
 */
function html5_search_form( $form ) {
    $form = '<form role="search" method="get" id="searchform" action="' . home_url( '/' ) . '" >
    <label class="assistive-text" for="s">' . __('Search for:') . '</label>
    <input type="search" placeholder="'.__("Enter term...").'" value="' . get_search_query() . '" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="Search" />
    </form>';

    return $form;
}
add_filter( 'get_search_form', 'html5_search_form' );

What’s cool about the HTML5 search form is that you can use the placeholder parameter to set default text. No more need for JavaScript onblur and onfocus. Also, setting the input type to “search” will add a little “x” in certain browsers so that you can clear the search field.

I have added a label with the class “assertive-text” to give the form a header title. Just add the following CSS to your theme’s style.css file if you don’t want it to appear:

.assistive-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    }

HTML5 offers some pretty cool new features so it is totally worth it to start upgrading to take advantage of them all.