Theming the Search Form in Drupal
Want to customize the Drupal Search Form with a placeholder, custom size, custom submit button text, or use an image for the submit button? All of the things can be accomplished by adding a function to your theme's template.php file.
function YOURTHEMENAME_form_search_block_form_alter(&$form, &$form_state, $form_id) {
$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(''); // Change the text on the submit button
$form['actions']['submit'] = array('#type' => 'image_button', '#src' => base_path() . path_to_theme() . '/images/YOUR-IMAGE-NAME.jpg');
// 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');
}
Related Posts: