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

Inna Nesterenco
Inna Nesterenco
1,331 Points
Posted by Inna Nesterenco
Inna Nesterenco
1,331 Points

radio button

<!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">

    <label>Shirt Size</label>
      <input type="radio" id="small" value="small" name="shirt_size">
     <input type="radio" id="medium" value="medium" name="shirt_size">
      <input type="radio" id="large" value="large" name="shirt_size">
      <input type="radio" id="under_13" name="user_age">
     <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>



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

</body> </html>

Inna Nesterenco
Inna Nesterenco
1,331 Points
Inna Nesterenco
Inna Nesterenco
1,331 Points

Add a label above the radio button group that says "Shirt Size:". Don't associate it with any specific element.

HERE IS THE QUESTION. WHAT AM I DOING WRONG

4 Answers

Emma Willmann
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer
Emma Willmann
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

I copied your code into the challenge and go the same error on that step.

You have the radio buttons in two places right now. Remove the label and radio buttons that is between the select tags, and this should work for you.

Once I did that, I was able to move on.

Christian Andersson
Christian Andersson
8,712 Points

+1. You really never should have anything other than option tags inside of a select. The correct format is:

<select>
   <option value="example1">Example 1</option>
   <option value="example2">Example 2</option>
   <option value="example3">Example 3</option>
</select>
Emma Willmann
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer
Emma Willmann
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

I'm noticing a few things that, together, are probably causing the problems.
First, they want the code after the select menu, so it should come after the select closing tag.

Second, it looks like you accidentally included some of the code from other examples.

<input type="radio" id="under_13" name="user_age">
     <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>

Third, it should be Shirt Size: with a colon.

Hope this helps. :-)

Inna Nesterenco
Inna Nesterenco
1,331 Points
Inna Nesterenco
Inna Nesterenco
1,331 Points

<!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">

    <label>Shirt Size:</label>
      <input type="radio" id="small" value="small" name="shirt_size">
      <input type="radio" id="medium" value="medium" name="shirt_size">
      <input type="radio" id="large" value="large" name="shirt_size">
     <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>
      <input type="radio" id="small" value="small" name="shirt_size">
      <input type="radio" id="medium" value="medium" name="shirt_size">
      <input type="radio" id="large" value="large" name="shirt_size">


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

</body> </html>

THIS IS STILL NOT WORKING

Umar A
Umar A
4,041 Points

I copied your code and tried it. It works!

Christian Andersson
Christian Andersson
8,712 Points

Umar, it may work, but it's incorrect HTML markup.

Umar A
Umar A
4,041 Points
Umar A
Umar A
4,041 Points

I didn't know that, Christian. Thank you :)