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
Lukas Johnson (That One Guy)
2,738 PointsTask 4 not working with task 3 label element
Am i doing something wrong? When i do task 3, which is create a label with "Shirt Size:" and don't associate it with anything. In task 3, it passes, then on task 4 it asks for me to add a label to label a radio button and label it "Small" and associate it with radio button with the id small. When i finish it gives me an error "task 3 is no longer responding"
Lukas Johnson (That One Guy)
2,738 PointsWayne Priestley Here is the code from task 3 that 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>
Then it says for task 4: Create and associate a label with each of the 3 shirt size radio buttons. Give them the text "Small", "Medium", and "Large".
So i put this:
<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>
<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">
<button type="submit">Place Order</button>
</form>
When i click check work it says: Oops! It looks like Task 3 is no longer passing.
EDIT: From looking at another code challenge, i was able to get through this quiz using this code:
<label>Shirt Size:</label>
<input type="radio" id="small" value="small" name="shirt_size"><label for="small">Small</label>
<input type="radio" id="medium" value="medium" name="shirt_size"><label for="medium">Medium</label>
<input type="radio" id="large" value="large" name="shirt_size"><label for="large">Large</label>
Although shouldn't they both work the same?
3 Answers
ivomiranda
30,286 PointsI thought your problem was that you put the for attribute of each label as small. I changed this to small, medium and large but the step 4 isn't recognizing the changes in the html but it works here: http://web-akqrw5sa6s.treehouse-app.com/
It's exactly your code but with the for attribute changed to small, medium and large and it all works as it is supposed to. Still not passing in step 4. When you put the labels and go to html view mode you see that no label appears but the markup is 100% correct and valid. Try to do as I said and see if it works. If it doesn't contact the support and copy paste them this thread.
Wayne Priestley
19,579 PointsHi,
You have the `for=" on all your inputs as small instead of small, medium and large.
Can you correct them then try that, if you still get a error can you position them like this:
<input type="radio" id="small" value="small" name="shirt_size">
<label for="small">Small</label>
And see if that passes.
Hope this helps.
Wayne Priestley
19,579 PointsGlad you found the problem :)
Lukas Johnson (That One Guy)
2,738 PointsYep! but im still wondering, shouldn't both ways work?
ivomiranda
30,286 PointsWayne Priestley I think you added your comment in wrong comment... My html is working with the for attribute from the label matching the id attribute from the input.
The HTML is 100% valid and I've always seen the labels above the the inputs as far as I can remember.
My guess is that treehouse checks in step 3 if you have a label before the input since they expliclty ask you to not insert the label. Then in step 4 they check the step 3 and it finds a label before the input and marks step 3 as invalid or something like that. It's just a bug... If it's not it would be nice to have someone here explaining why the validator.w3.org doesn't mark this as invalid HTML if it is incorrect.
Lukas Johnson (That One Guy)
2,738 PointsIvo Miranda This is what i originally thought was happening. But i wanted to double check it on here before i made any assumtions. A bug on the code challenge. Do you happen to know what i should do to report this as a bug? or can i do anything? Im not sure how to do this on this website. Im only on it at school for a class so i havent really looked into that. And by the way thanks for helping me with this, Wayne Priestley Thank you as well!
Wayne Priestley
19,579 PointsWayne Priestley
19,579 PointsCould you please post your html and css so we can take a look and help you out.
Here is a link to explain how to use Markdown to post your code How to post code