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

Jack Cummins
Jack Cummins
17,417 Points
Posted by Jack Cummins
Jack Cummins
17,417 Points

I don't understand why this doesn't work.

The assignment is: Add a line break element after each shirt size label. The error is: You need to add three <br> elements, right after the three labels for the radio buttons.

Whoever answers a helpful answer first will get a best answer and an upvote. If it's good, but it's not the first one then I just upvote it.

Thanks for the help, Jack

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"><br>
       <label for="medium">Medium</label> <input type="radio" id="medium" value="medium" name="shirt_size"><br>
       <label for="large">Large</label> <input type="radio" id="large" value="large" name="shirt_size"><br>

      <button type="submit">Place Order</button>
    </form>
  </body>
</html>
Tim Strand
Tim Strand
22,458 Points
Tim Strand
Tim Strand
22,458 Points

Add them after the label not after the radio el. Because the error checking in these challenges is programmatic you need to follow the exact orders of the quiz. its not looking for if you added it after the radio associated with the label (usually you put the radio first then the label for css reasons)

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

1 Answer

Steven Parker
Steven Parker
229,771 Points
Steven Parker
Steven Parker
229,771 Points

You seem to have a knack for confusing the validator! In this case, the challenge is apparently expecting the radio labels to be placed after the buttons. But didn't seem to mind them being in front for the previous task!

But it is more conventional to place the labels after the buttons, so that the buttons line up vertically on the form. And if you put your labels between the buttons and the <br>'s, you should pass the last task.

The fact that the previous challenge passed could be considered a bug. You might want to report it as described on the Support page.