Customising the HTML of the WordPress search form

Changing the markup used for the global search form (which is normally displayed in the header or at the top of the sidebar) is pretty straightforward .

Using a custom function

Yet another option is to create a custom function in your functions.php file:

function custom_search_form( $form ) { 
     $form = '<form method="get" id="quick-search" action="/" >';
     $form .= '<div><label for="s">Search this site for:</label>';
     $form .= '<input type="text" value="' . get_search_query() . '" name="s" id="s" />';
     $form .= '<input type="submit" value="Search" />';     
     $form .= '</div>';      $form .= '</form>';    
return $form;
  }
  add_filter( 'get_search_form', 'custom_search_form' );

In the file that contains your global search form

 (typically header.php or sidebar.php), replace <?php get_search_form(); ?>