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

HTML HTML Forms Fieldsets and Labels

Dana Leventhal
PLUS
Dana Leventhal
Courses Plus Student 13,120 Points
Posted by Dana Leventhal
Dana Leventhal
Courses Plus Student 13,120 Points

Labels

Hi guys, i am trying to input labels on the radio buttons and checklists but for some reason the labels and values are coming up twice. Below is my code, can you please clarify what i am not doing correct? Appreciate it! Dana Leventhal

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

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

    <input type="checkbox" name="foods" value="apple"> Apple<label for="Apple"> Apple </label><br>

    <input type="checkbox" name="foods" value="orange"> Orange<label for="orange"> Orange </label><br>

    <input type="checkbox" name="foods" value="banana"> banana <label for="Banana"> Banana </label><br>

2 Answers

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Dana,

Labels will produce exactly that for you: labels! When you are entering the word "Male" or "Female" (etc.) after your inputs (and before you have your labels written), that is what is causing the duplicate "label" to appear, because you've entered text into your code. The "Male" and "Female" (etc.) between your label tags are the actual labels, and are semantically correct.

Here is an example of what you're looking for - http://codepen.io/erikmcclintock/pen/mhdAg

Just remove the text that you've inserted after your input element and you'll be good to go!

Erik

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Beyond that, take note that you need to keep the same spelling and capitalization across everything in your code that you want to pair up. In this case, you need to verify that the value of the "id" attribute on your inputs and the value of the "for" attribute on your labels match exactly, or they won't sync up as you're expecting them to.

Erik