Search code examples
htmllabelforms

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>

Solution

  • 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>