How do you associate a label with a form control?

Associate a <label> with its control explicitly, through a for attribute that matches the control's id. Or do it implicitly, by nesting the control inside the label.

1. Using the for attribute matching the input's id:

<label for="username">Username:</label>
<input type="text" id="username">

1. Nesting the input inside the label:

<label>Username: <input type="text"></label>

Explicit association is the safer default, because it works with more assistive technologies and external tools. Either way, a screen reader reads the label when the input gets focus. Clicking the label focuses the input, which gives a bigger hit area on touch screens. Don't put links or buttons inside a label, since they make the input harder to activate.