Drupal 7
Add the following code snippet to
template.php in your theme and you can:
change the submit button to an image
change the text of the submit button to 'Go!' (just remove the // in
front of that line of code, and delete the image_button code below it)
add default 'Search this site' text in the input form and make it disappear when users click in the input form
<?phpfunction YOURTHEME_form_alter(&$form, &$form_state, $form_id) {
if ($form_id == 'search_block_form') {
$form['search_block_form']['#title'] = t('Search'); // Change the text on the label element
$form['search_block_form']['#title_display'] = 'invisible'; // Toggle label visibilty
$form['search_block_form']['#size'] = 40; // define size of the textfield
$form['search_block_form']['#default_value'] = t('Search'); // Set a default value for the textfield
$form['actions']['submit']['#value'] = t('GO!'); // Change the text on the submit button
$form['actions']['submit'] = array('#type' => 'image_button', '#src' => base_path() . path_to_theme() . '/images/search-button.png');
// Add extra attributes to the text box
$form['search_block_form']['#attributes']['onblur'] = "if (this.value == '') {this.value = 'Search';}";
$form['search_block_form']['#attributes']['onfocus'] = "if (this.value == 'Search') {this.value = '';}";
// Prevent user from searching the default text
$form['#attributes']['onsubmit'] = "if(this.search_block_form.value=='Search'){ alert('Please enter a search'); return false; }";
// Alternative (HTML5) placeholder attribute instead of using the javascript
$form['search_block_form']['#attributes']['placeholder'] = t('Search');
}
} ?>
Note: When you copy the above snippet to an existing
template.php in your theme - you need to replace
YOURTHEME with the name of your theme (sure - it's obvious ...). You also have to pay attention to the use of the php brackets -
<?php and ?>. The first one
<?php should already be at the top of an existing
template.php file and the closing one might not be useful if you later add more snippets, etc.
Alternatively and probably better practice is to add the brackets to
each snippet individually - this would mean you may have to add a
closing bracket
?> to an existing
template.php file before adding the above snippet.
Change drupal default search input type Format:
type="text" to type="search"
It's works well in D6 and D7:
/**
* Changes the search form to use the "search" input element of HTML5.
*/
function YOURTHEME_preprocess_search_block_form(&$vars) {
$vars['search_form'] = str_replace('type="text"', 'type="search"', $vars['search_form']);
}
This snippet goes into the template.php file of your theme. In my
case it's tao, that is why the function starts with "tao_". You have to
rename it to match it your theme name.
Reference Node is--
https://www.drupal.org/node/154137
https://www.drupal.org/node/45295
