Form Input Missing Label Accessibility Fix

<!-- Wrong — no label associated with input -->
<input type="text" placeholder="Enter your name">

<!-- Right — label with for attribute -->
<label for="name">Full Name</label>
<input type="text" id="name" placeholder="Enter your name">

<!-- Alternative — input inside label (no for/id needed) -->
<label>
    Full Name
    <input type="text" name="name">
</label>

<!-- Wrong — icon-only button, no accessible name -->
<button>
    <span class="icon-search"></span>
</button>

<!-- Right — add aria-label -->
<button aria-label="Search">
    <span class="icon-search"></span>
</button>

<!-- Wrong — input with separate text but no connection -->
<p>Search for products</p>
<input type="text">

<!-- Right — connect the text to the input -->
<p id="search-label">Search for products</p>
<input type="text" aria-labelledby="search-label">

<!-- Wrong — select without label -->
<select>
    <option value="">Choose country</option>
    <option value="us">United States</option>
</select>

<!-- Right — label for select -->
<label for="country">Country</label>
<select id="country">
    <option value="">Choose country</option>
    <option value="us">United States</option>
</select>

<!-- Use fieldset for grouped inputs -->
<fieldset>
    <legend>Contact Preferences</legend>

    <label>
        <input type="checkbox" name="email"> Email
    </label>
    <label>
        <input type="checkbox" name="sms"> SMS
    </label>
</fieldset>

<!-- Wrong — error text with no association -->
<label for="email">Email</label>
<input type="email" id="email">
<span class="error">Please enter a valid email</span>

<!-- Right — connect error to input -->
<label for="email">Email</label>
<input
    type="email"
    id="email"
    aria-describedby="email-error"
    aria-invalid="true"
>
<span id="email-error" class="error">Please enter a valid email</span>