How to Fix Form elements do not have associated labels in Wordpress Search Form (without button)

admin管理员组

文章数量:1122832

Is there any way to fix the "Form elements do not have associated labels" issue in WordPress search form without having the search button.

Google Light House Audit:

Form elements do not have associated labels. Labels ensure that form controls are announced properly by assistive technologies, like screen readers. Failing Elements input

<input type="text" value="Search" name="s" id="psf" onblur="if (this.value == '') {this.value = 'Search';}" onfocus="if (this.value == 'Search') {this.value = '';}">

I want to add a label in the form w/o displaying the search button?

I'm using this code in my Wordpress website to display search form:

<div id="psform"> 
<?php $search_text = "Search"; ?> 
<form method="get" id="searchform"  
action="<?php bloginfo('home'); ?>/"> 
<input type="text" value="<?php echo $search_text; ?>"  
name="s" id="psf"  
onblur="if (this.value == '')  
{this.value = '<?php echo $search_text; ?>';}"  
onfocus="if (this.value == '<?php echo $search_text; ?>')  
{this.value = '';}" /> 
<input type="hidden" id="searchsubmit" /> 
</form> </div>

Code can be found at

Is there any way to fix the "Form elements do not have associated labels" issue in WordPress search form without having the search button.

Google Light House Audit:

Form elements do not have associated labels. Labels ensure that form controls are announced properly by assistive technologies, like screen readers. Failing Elements input

<input type="text" value="Search" name="s" id="psf" onblur="if (this.value == '') {this.value = 'Search';}" onfocus="if (this.value == 'Search') {this.value = '';}">

I want to add a label in the form w/o displaying the search button?

I'm using this code in my Wordpress website to display search form:

<div id="psform"> 
<?php $search_text = "Search"; ?> 
<form method="get" id="searchform"  
action="<?php bloginfo('home'); ?>/"> 
<input type="text" value="<?php echo $search_text; ?>"  
name="s" id="psf"  
onblur="if (this.value == '')  
{this.value = '<?php echo $search_text; ?>';}"  
onfocus="if (this.value == '<?php echo $search_text; ?>')  
{this.value = '';}" /> 
<input type="hidden" id="searchsubmit" /> 
</form> </div>

Code can be found at https://tumrai.com/WordPress_Search_Form_without_Search_Button

• search
• forms

Share Improve this question edited Sep 3, 2020 at 23:14 Rajesh Patel asked Sep 3, 2020 at 21:58 Rajesh PatelRajesh Patel 111 silver badge22 bronze badges 3

• 2 Please reformat your code, do not put everything in one line. Thanks :) – fuxia ♦ Commented Sep 3, 2020 at 22:20
• 1 I'm not sure how this is a WordPress issue, this looks like a generic HTML problem ( an issue with your themes HTML? ). Also your code is super difficult to read when it's all on a single line. Break it up into several lines so it can be read – Tom J Nowell ♦ Commented Sep 3, 2020 at 22:43
• Anyone here to help? – Rajesh Patel Commented Sep 4, 2020 at 9:18

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Use <label> tag before <input> like this.

<label>Email Adress:
    <input type="text">
</label>

This is a simple method to do this. You can simply omit the use of the submit button if you don't need it to show.

Here is the modified code of yours.

<div id="psform"> 
    <?php $search_text = "Search"; ?> 
    <form method="get" id="searchform" action="<?php echo home_url(); ?>"> 
        <label>Email Adress:
            <input type="text" value="<?php echo $search_text; ?>" name="s" /> 
        </label>
    </form>
</div>

Edit:

If you want to add a title to the search form, you can use any heading tag. If you need any other help, please don't hesitate to ask.

本文标签： How to Fix Form elements do not have associated labels in Wordpress Search Form (without button)