1

I need to create a search box in my default searchform.php file that has similar behaviour as the default ability in HTML5 with the "placeholder" attribute.

This is what I have in my searchform.php at the moment:

 <input type="submit" id="searchsubmit" value="text" />
 <input placeholder="<?php _e( 'Search here..' ); ?>">

The text 'Search here..' appears in the input and it dissapeard when I start typeing in the input. I need it to dissapear when I click the input.

Thx

closed as off topic by s_ha_dum, Wyck, fuxia Jun 7 '13 at 18:04

Questions on WordPress Development Stack Exchange are expected to relate to WordPress within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here. If this question can be reworded to fit the rules in the help center, please edit the question.

4

Placeholder by itself will not disappear when you click the text field. I guess you need a bit of Javascript to achieve that.

<input type="text" onfocus="if(this.value=='<?php _e( 'Search here..' ); ?>'){this.value='';}" onblur="if(this.value==''){this.value='<?php _e( 'Search here..' ); ?>';}" value="<?php _e( 'Search here..' ); ?>">
  • Nowadays & with modern browsers, this can be done in pure CSS, without JS: input:focus::placeholder { visibility: hidden; } see pen – kubi Jun 14 at 8:19
2

Try this, put it into your theme functions file:

function html5_search_form( $form ) { 
     $form = '<section class="search"><form role="search" method="get" id="search-form" action="' . home_url( '/' ) . '" >
    <label class="screen-reader-text" for="s">' . __('',  'domain') . '</label>
     <input type="search" value="' . get_search_query() . '" name="s" id="s" placeholder="Search website" />
     <input type="submit" id="searchsubmit" value="'. esc_attr__('Go', 'domain') .'" />
     </form></section>';
     return $form;
}

 add_filter( 'get_search_form', 'html5_search_form' );

Just ensure that you change domain to your own language domain.

Not the answer you're looking for? Browse other questions tagged or ask your own question.