One of customization I’ve done for this WordPress  theme was to put label text over search input.   I’ve found that quite nice design element and space saving optimization.

Basically there are 2 main approaches:

a) Use HTML5

This is very straightforward, but I did not like  usability of the solution – the problem is that label disappears only after you write your first letter, which I have to say I found bit annoying.
But solution is super-simple, just add attribute  placeholder

<input id="s" type="text" placeholder="Search This Site ..." name="s">

b) Use <label> tag, plus style, plus javascript

HTML:

<label for="s">Search This Site ...</label>
<input id="s" type="text" name="s" value="">

CSS:

nav #search-inputs label {
 display: inline;
 cursor: text;
 position: absolute;
 top: 5px;
 left: 5px;
}

Javascript (requires JQuery library):

jQuery(function () {
var $input=jQuery('nav #search-inputs #s');
var $label=jQuery('nav #search-inputs label');
if (! $input.val() ) {
$label.show();
}
else {
$label.hide();
}
$input.focus( function () {
$label.hide()
});
$input.blur( function () {
if (! this.value) $label.show();
});
$label.click( function () {
$input.trigger('focus');
});
});

For WordPress theme it is recommended to have JavaScript in A separate file – the proper way to load code on page is using PHP function wp_enqueue_script:

wp_enqueue_script(
        'search-script',
        get_template_directory_uri() . '/scripts/search.js',
        array('jquery')
    );

The best place to put this code is functions.php in the theme – the function which is called on wp_enqueue_scripts action.