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

Question

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

Answer 1

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.