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

Question

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

Rajesh Patel

2022年5月19日 17:06

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

Topic forms Wordpress search

Category Web

Raashid Din · Accepted Answer · 2020年9月4日 10:04

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)

About