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 Choosing Options Create Radio Buttons

Jamil Jones
Jamil Jones
10,852 Points
Posted by Jamil Jones
Jamil Jones
10,852 Points

It keeps sending me back to step 3 after I make the labels for the radio button

It telling me that my label "Shirt Size" should be disassociated. I've been working on this for hours not sure what I am doing wrong. Please check my code.

index.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML Forms</title>
  </head>
  <body>
    <form action="index.html" method="post">
      <h1>Shirt Order Form</h1>
      <label for="color">Shirt Color:</label>
      <select id="color" name="shirt_color">
        <option value="red">Red</option>
        <option value="yellow">Yellow</option>
        <option value="purple">Purple</option>
        <option value="blue">Blue</option>
        <option value="green">Green</option>
        <option value="orange">Orange</option>
      </select>
      <label>Shirt Size:</label>

      <label for="small">Small</label>
      <input type="radio" id="small" value="small" name="shirt_size">
      <label for="medium">Medium</label>
       <input type="radio" id="medium" value="medium" name="shirt_size">
       <label for="large">Large</label>
       <input type="radio" id="large" value="large" name="shirt_size">



      <button type="submit">Place Order</button>
    </form>
  </body>
</html>

1 Answer

huckleberry
huckleberry
14,636 Points
huckleberry
huckleberry
14,636 Points

Your placement of the label tags is incorrect. Right now you have 

 <label>Shirt Size:</label>

      <label for="small">Small</label>
      <input type="radio" id="small" value="small" name="shirt_size">
      <label for="medium">Medium</label>
       <input type="radio" id="medium" value="medium" name="shirt_size">
       <label for="large">Large</label>
       <input type="radio" id="large" value="large" name="shirt_size">

The label tag, when it doesn't have a <code>for=""</code> attribute, associates with the element directly below it. Right now, your initial label element with "Shirt Size: " as its content is trying to associate with the next label element and that's not working out too well lol.

With the for="" attribute, your label can be anywhere, so just move the label element that's interfering with the first one.

Sorry, don't want to give it away entirely by just pasting the code ;)

Let me know if you get it.

Jamil Jones
Jamil Jones
10,852 Points
Jamil Jones
Jamil Jones
10,852 Points

Your tip did the trick! Thanks so much.