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 Brian Campbell
Brian Campbell
12,544 Points

Possible Bug?

Hey i'm doing exactly what the question prompt is telling me and i checked the example multiple times and i keep getting a message telling me to "place the label within the form". Please help.

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

Brian Daws
Brian Daws
15,127 Points
Brian Daws
Brian Daws
15,127 Points

Hi Brian,

This is just a guess, but maybe you need labels for your radio buttons.

jobbol
seal-mask
.a{fill-rule:evenodd;}techdegree
jobbol
Full Stack JavaScript Techdegree Student 16,610 Points
jobbol
.a{fill-rule:evenodd;}techdegree
jobbol
Full Stack JavaScript Techdegree Student 16,610 Points

This is a fine example of tunnel vision in its purest case and happens to all coders. Your label is within the form, but it's also inside the select tags which belong to something else.

Take this section of code: 

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

And move it onto the line after the </select>

Also how did you format your codeblock? I used the three backticks, but mine seems to come out differently in this post.