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

Jacob Tennyson
Jacob Tennyson
6,240 Points
Posted by Jacob Tennyson
Jacob Tennyson
6,240 Points

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

does the label need to surround my input elements?

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>
efi domb
efi domb
9,569 Points

hi,

just a few minutes after you post your question, i reached the same challenge and got stuck to for same reason you did.

i subscribed to this question, and in the meantime i passed to next video, and then the next challenge.

i noticed that the default position of the code was different than you expected to be, and when i applied the strange order to the previous challenge, all of the sudden it work out.

i guess this is some bug in the challenge examiner.

''' <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>
    <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> ''' you just need to put all of the radio element in the end, after the select element closed.

good luck.

6 Answers

efi domb
efi domb
9,569 Points
efi domb
efi domb
9,569 Points

you are missing the "for" attribute the associate the label to the input id.

tip: in challenge like this open the video by clicking the left arrow on top right side of the browser. this isn't a memory challenge. the point is to practicing it.

Jacob Tennyson
Jacob Tennyson
6,240 Points
Jacob Tennyson
Jacob Tennyson
6,240 Points

@efi domb or anyone else... thanks btw for that tip couldnt figure it out for the life of me. However im stuck again on the next one. Any suggestions?

Challenge Task 4 of 5

Create and associate a label with each of the 3 shirt size radio buttons. Give them the text "Small", "Medium", and "Large".

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


      <button type="submit">Place Order</button>
    </form>
  </body>
</html>
casthrademosthene
casthrademosthene
6,274 Points

@efi domb Thank you because a year later it's still giving people the same issue and you saved me a lot of time trying to figure out what is wrong with the code. Life saver.

Danish Saleem
Danish Saleem
7,965 Points
Danish Saleem
Danish Saleem
7,965 Points

and year later as well :D

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

Rodney Buljubasic
PLUS
Rodney Buljubasic
Courses Plus Student 13,899 Points
Rodney Buljubasic
Rodney Buljubasic
Courses Plus Student 13,899 Points

this doesnt work

Bhanuprakash Reddy Seethi
Bhanuprakash Reddy Seethi
5,216 Points
Bhanuprakash Reddy Seethi
Bhanuprakash Reddy Seethi
5,216 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>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 >Small</label> <input type="radio" id="small" value="small" name="shirt_size"> <label >Medium</label> <input type="radio" id="medium" value="medium" name="shirt_size"> <label >Large</label> <input type="radio" id="large" value="large" name="shirt_size">

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

</body> </html>

Mahin Rahman
Mahin Rahman
7,037 Points
Mahin Rahman
Mahin Rahman
7,037 Points

elf domb you're a star!"