Hacker News new | ask | show | jobs
by guycook 4918 days ago
Number 1 (and throughout the article) isn't right, the input should go inside the label.

See https://developer.mozilla.org/en-US/docs/HTML/Element/input Permitted content: None, this is a void element.

And https://developer.mozilla.org/en-US/docs/HTML/Element/label for an example of doing it correctly
1 comments
bphogan 4918 days ago
It's completely legitimate to have an input tag outside of a label. Even the link you provided states:

The HTML <label> Element represents a caption for an item in a user interface. It can be associated with a control either by using the for attribute, or by placing the control element inside the label element.

As long as you use the for attribute, it's fine.

link
guycook 4918 days ago
Yes, quite right. I probably wasn't clear enough there, but I was referring to this from the article:

  <input type="text" required><label>Social Security Number</label></input>
Should be marked up as

  <label>Social Security Number<input type="text" required /></label>
if you want to omit the 'for' attribute.

Doing it the wrong way around will still render as you expect, but defeats the purpose as you won't get the click-to-activate behaviour.

link
bphogan 4918 days ago
Ah yes, that's horribly, horribly wrong. :)
link