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
Jacob Arias
4,353 PointsNeed help with a challenge
The challenge: Add a label above the radio button group that says "Shirt Size:". Don't associate it with any specific element.
<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">
14 Answers
Jose Luis Lopez
19,179 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"> <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>
jeansmithe
Courses Plus Student 2,191 PointsThink I have got it:
<!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 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">
<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>
<button type="submit">Place Order</button>
</form>
</body> </html>
Oleksandr Komarevych
Front End Web Development Techdegree Student 2,767 Pointsyep, thanks
Marcelo Retana
2,534 PointsI guess what you are doing is <label for="Shirt Size"></label> by doing that you are associating the element to another element. Look the code below.
<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">
Jacob Arias
4,353 PointsMarcelo, That is exactly what I had but it would not accept it. It prompted me to add a label element in the <form> section and above the first radio button. Which is what I thought I was doing. Not sure what the problem is with it.
Josip Ivković
Courses Plus Student 1,455 PointsFinally figured it out, you need to put it like this:
select .... /select
label...
And then add the radio buttons and the label after the whole select section. Please fix it so that you can-t pass the first 2 tasks and then get stuck on the 3rd one because of this. Also, you could choose your wording a bit better here...
James Gill
Courses Plus Student 34,936 PointsJacob,
Remember, the <label> element in the code goes after the radio button (but will appear before).
Jacob Arias
4,353 PointsJames, I tried that but that didn't work.
Marcelo Retana
2,534 PointsShow me your code. I just did it on the challenge and works properly.
Jacob Arias
4,353 Points<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">
Jacob Arias
4,353 PointsI don't know why but every time I copy and paste my code for the forum it shows up in my dialogue box but doesn't show up on my forum post. My code was exactly as you had yours written out.
Jacob Arias
4,353 PointsI don't know why but every time I copy and paste my code for the forum it shows up in my dialogue box but doesn't show up on my forum post. My code was exactly as you had yours written out.
Marcelo Retana
2,534 PointsBelow the field to post a comments says "Markdown Cheatsheet" hit on it, there is the way to put your code properly.
Jacob Arias
4,353 PointsHere you go. Thanks for that.
<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">
Marcelo Retana
2,534 PointsIt is the right one, is still giving you any problem?
Change the browser...
Jacob Arias
4,353 PointsI tried another browser. It still didn't take. I got a prompt that said "you need to add a label element within the form element, right before the first radio button.
Here is the code I entered again:
<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>
Jacob Arias
4,353 PointsI got it. Another user posted a comment telling me to put my radio button below the select menu. That worked. Thank you very much for your help.
tamirg
6,201 PointsTask 3 will not work. I checked the forums and It seems that I am doing it correctly?? I am confused and tried it several different ways? Any other suggestions?
Anika Jaffara
20,364 PointsMe too. Seems it needs some adjusting. I believe it asks a questions that hasn't been covered yet.
Tapiwa Chinembiri
6,285 Pointsim experiencing the same problem, help
Ruth Henry-Ovid
4,437 PointsSame problem here
James Delaplain
5,873 PointsDUDE, I almost finished the Quiz, browser went out, restart now #3 it says BUMMER? You need Shirt Size with new label element. Worked the first Round!
<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><-- What could I be DOING wrong, I had this in my Notes when it passed the first time! <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>
James Delaplain
5,873 PointsNEVER MIND looked above one more time and I put the Radio buttons and label AFTER the /select. FORUMS ARE SPECTACULAR TIME SAVORS, SO MUCH HOMEWORK, SHOOT ME
Ashenafi Ashebo
15,021 PointsPut the radio Element outside of the select Element, Look the following code what I did to fix this problem
<!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>
Viv Fouracre
9,062 PointsPut the radio Element outside of the select Element as it definitely does not work inside the select element even though the 2 tasks before where you are creating the radio buttons pass as correct.
</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>
Rekkai Steed
6,269 Points<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">
</form>
Jacob Arias
4,353 PointsJacob Arias
4,353 Pointssorry, incorrect snapshot of the code. See later posting for correct code. Thanks.