Best Practice for Associating Label with Input: Explicit Association, Implicit Association, or Both?

HTML-CSS
1

Hey everyone :wave: :smile:

When it comes to associating a label with an input element, is there a recommended way of doing things / best practice? Is it preferred to do explicit association (giving the label element a for attribute matching the input element’s id), implicit association (putting the input element inside the label element), or both, or does it not really matter?

Explicit association example:

<label for="fname">First Name: </label> 
<input type="text" name="fname" id="fname">

Implicit association example:

<label>First Name: <input type="text" name="fname"></label>

Both:

<label for="fname">
First Name: 
<input type="text" name="fname" id="fname">
</label>

Thanks!

2

Hi. According to this website, an implicit association is not always handled correctly by assisted technologies. It is recommended to use explicit association.

HTML Inputs And Labels: A Love Story | CSS-Tricks.

2 Likes
3

Well-noted. Thank you, my friend.

2 Likes