Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript DOM Scripting By Example Editing and Filtering Names Filter Invitees Who Have Not Responded

Posted by cyber voyager
cyber voyager
8,859 Points

Can't understand what label does and why it is useful

While I was reviewing one of the videos I stumbled upon the "label" HTML tag and I couldn't understand the benefit of using the "label" tag and how it works. Thank you for your time.

Jens Höfflin
Jens Höfflin
19,934 Points
Jens Höfflin
Jens Höfflin
19,934 Points

A <label> is used as a label for an <input> element in a HTML form. If a user clicks on the label it will activate the input element. A label can be bound to an element either by using the "for" attribute, or by placing the element inside the <label> element. Example usage:

<form action="some action"> <label for="male">Male</label> <input type="radio" name="gender" id="male" value="male"><br> <label for="female">Female</label> <input type="radio" name="gender" id="female" value="female"><br> <label for="other">Other</label> <input type="radio" name="gender" id="other" value="other"><br><br> <input type="submit" value="Submit"> </form>

cyber voyager
cyber voyager
8,859 Points

Thank you very much.

Tom Geraghty
Tom Geraghty
24,174 Points
Tom Geraghty
Tom Geraghty
24,174 Points

Just cleaning up Jens' code using Markdown: 

<form action="some action">
  <label for="male">Male</label> 
  <input type="radio" name="gender" id="male" value="male"><br> 

  <label for="female">Female</label> 
  <input type="radio" name="gender" id="female" value="female"><br> 

  <label for="other">Other</label> <input type="radio" name="gender" id="other" value="other"><br><br> 
  <input type="submit" value="Submit"> 
</form>

"for" is the id of the form element that the label should be associated with

So the label for male points to the input with type radio and id male above.