Question

For example, given:

<label for="username">Username:</label>
<input id="username" name="username" value="" />

When you click on the “Username:” label, focus goes to the corresponding form field.

Without resorting to JavaScript, is it possible to have the same behavior when the form field has no ID?

Real world example where this will be an issue is for dynamically constructed forms, where you may add similar fields to a form, or maybe add multiple instances of the same form.

Answer 1

Yes, the label is associated implicitly with the first input it conatins:

<label>Username:
<input name="username" value="" />
</label>

From the W3:

To associate a label with another control implicitly, the control element must be within the contents of the LABEL element

In fact, I consider nesting the input in the label better-practice; it can be more semantic, and in some cases leads to a better ui, by eliminating non-clickable spaces between radio buttons or check-boxes and their labels.