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

Posted by Jonathan Chaidez
Jonathan Chaidez
3,008 Points

Task 3 no longer passing

I am adding the labels like I think I am supposed to, but it doesn't seem the be working. Task 3 no longer passes after I add my label for's to my radio buttons.

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>

4 Answers

Clayton Tevebaugh
Clayton Tevebaugh
7,617 Points

Try adding the labels below your radio buttons.

Jonathan Chaidez
Jonathan Chaidez
3,008 Points

Thanks man. I didn't even think about the positioning.

Clayton Tevebaugh
Clayton Tevebaugh
7,617 Points

I should have explained my reasoning more but I was holding a baby haha. Glad it worked out. Remember doing the same thing and having the same problem when I first did that challenge. Jeff's response explaining the reasoning to labels second on the radio buttons is great!

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

Hey everyone,

Sorry for the slow reply! While this isn't quite what the challenge intended, it should technically be correct. I have refactored the tests inside this code challenge to allow for this answer to pass. :)

Frederico Graciano
PLUS
Frederico Graciano
Courses Plus Student 2,768 Points
Frederico Graciano
Frederico Graciano
Courses Plus Student 2,768 Points

You're doing everything right, there is nothing wrong with it. the problem is the challenge workspace. I sent them a message with the problem, they i'll be probably fixing it soon.

Jeff Lemay
Jeff Lemay
14,268 Points
Jeff Lemay
Jeff Lemay
14,268 Points

It's not a problem with the challenge. In most forms across the web, you put a radio button before its label, like this (o is the radio button):

o Small

o Medium

o Large

With the code provided by OP, it would output:

Small o

Medium o

Large o

Frederico Graciano
PLUS
Frederico Graciano
Courses Plus Student 2,768 Points
Frederico Graciano
Frederico Graciano
Courses Plus Student 2,768 Points

But it should work anyway why wouldn't just because of the position of the label.

Jeff Lemay
Jeff Lemay
14,268 Points
Jeff Lemay
Jeff Lemay
14,268 Points

You're right, the code would still work in reality.