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 Jordan Sessions
Jordan Sessions
Courses Plus Student 9,225 Points

Properly labeling the Radio group

I can't figure out what i'm doing wrong with this part of the challenge.

It's telling me to add a label above the radio button group I just made, but says that I haven't properly placed it within the <form> element.

Maybe someone can take a look for me? It's the code <label>Shirt Size:</label> that's giving me trouble

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

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



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

2 Answers

Phillip Elkins
.a{fill-rule:evenodd;}techdegree
Phillip Elkins
Front End Web Development Techdegree Student 14,875 Points

Your radio buttons and label are nested within your select menu code; put those four lines below the select element's closing tag instead and your code works.

<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> 
   <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>
Jordan Sessions
PLUS
Jordan Sessions
Courses Plus Student 9,225 Points
Jordan Sessions
Jordan Sessions
Courses Plus Student 9,225 Points

Worked like a charm, big thanks