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
Alistair Olson
Courses Plus Student 4,283 PointsAdd a label not working.
In the third part of the radio challenge, adding the label above the radio buttons does not appear to work. I've formatted it as in Nick's tutorial video but I keep getting the error message that it has to be added to the form element BEFORE the radio buttons. This doesn't jibe with the instruction.
<!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>
3 Answers
Mark VonGyer
21,239 PointsHi..
You have mixed up your code for the radio buttons and the select ooptions. The radio buttons should not be inside the select options.
Try this:
<!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="small">Small</label>
<input type="radio" id="small" value="small" name="shirt_size">
<label for="medium">Medium</label>
<input type="radio" id="medium" value="medium" name="shirt_size">
<label for="large">Large</label>
<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>
Alistair Olson
Courses Plus Student 4,283 PointsMy code had been working until this stage. "Add a label above the radio group that says "Shirt Size:". Don't associate it with any specific element. I put this in above the radio group and that is when I received the error message. <label>Shirt Size:</label> Clearly I'm doing something wrong but I can't tell what even after referring to the tutorial and questions from other students.
Mark VonGyer
21,239 PointsHi Alistair.
Browsers and HTML is forgiving. You have placed the select elements around the radio buttons. HTML is forgiving - it has ignored this mistake and placed the buttons and select options (although the select options probably wont appear properly).
The label however is not forgiven by the browser - it doesn't understand why there is a label inside the select option.
Kishore Goven
6,664 PointsMany thanks. I wasted sooo much time trying to figure out where I went wrong. The question instuction was misleading!