'Lighthouse error: "Form elements do not have associated labels"

How do I fix this Lighthouse error:

Form elements do not have associated labels

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

<select id="main-menu-mob">

<textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea>
htmllabelforms


Solution 1:[1]

For each of these you can add a label that references the element, or use the aria-labelledBy attribute. I think labels are easiest but I will show you one of each. 

<label for="s">Arama...</label>
<input type="text" id="s" name="s" value="Arama..." onfocus="if (this.value == 'Arama...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Arama...';}">

<label id="lbl-main-menu-mob">Select Item</label>
<select id="main-menu-mob" aria-labelledby="lbl-main-menu-mob">

<label for="comment">Enter Comment</label>
<textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea>

Solution 2:[2]

You can also try to add placeholder='lorem ipsum' to input element.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sridhar
Solution 2 mikolaj

Related Questions