1

In Mozilla html tutorial it says

Don't place interactive elements such as anchors or buttons inside a label. Doing so will make it difficult for people to activate the form input associated with the label.

Don't

<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions">
  I agree to the <a href="terms-and-conditions.html">Terms and Conditions</a>
</label>

Do

<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions">
  I agree to the Terms and Conditions
</label>
<p>
  <a href="terms-and-conditions.html">Read our Terms and Conditions</a>
</p>

I tried both and can't find any serious problem with the first usage, what does "make it difficult for people to activate the form input associated with the label" exactly mean?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
mzoz
  • 1,273
  • 1
  • 14
  • 28
  • Refer to: https://stackoverflow.com/questions/17964418/is-it-standard-to-use-hyperlinka-tag-within-label-tag – Chaska Sep 05 '18 at 03:18

3 Answers3

1

If you click on the link in the "Don't" example, you'd be taken to that page before you've had a chance to submit the form on the page that link and the checkbox were in. (Though, I guess, technically, you've still managed to activate the checkbox...)

HTML doesn't actually stop you from putting links inside labels though. But it does stop you from putting other form controls inside labels, particularly if they have an ID and the label has a for attribute that's trying to point to another control (since a label can only be associated with one control at a time).

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Thanks but technically what if such link contains `target="_blank"` it doesn't necessarily prevent user ticking the checkbox? – mzoz Sep 05 '18 at 04:25
0

In a nutshell, click in the label associated with a checkbox or radio button. By adding a link the behavior becomes inconstant, clicking part of the label does one thing, yet does something different on another.

On a side note, labels associated with other fields also perform a function. Clicking on those labels bring focus to the associated field.

The general rule of thumb is that interactive elements should not be nested. In this instance the label can be considered an interactive field (though a special case is where the label encapsulates the associated element).

Jon P
  • 19,442
  • 8
  • 49
  • 72
0

If you use the Don't example user might accidentally click the link instead of the text while trying to tick the checkbox. They will be forwarded to a new page while trying to agree with the terms.

In a different scenario you may also have a button and user might click that while trying to tick the box.

Notice how the link/anchor is under the checkbox and label and not inline with them. It guarantees there is no confusion for the user while interacting with these items.

codejam
  • 1
  • 3
  • 1
    As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 24 '23 at 10:29