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!
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
Add a label element to the select menu with the text "Shirt Color:"
how to do 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> <select id="color" name="shirt_color" label="Shirt Color:"> <optgroup label="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> </optgroup> </select> </form> </body> </html>
Jonathan GrieveTreehouse Moderator 91,243 Points
So label is an inline element
<label> and you add text inside the tags to indicate what the label will say on the screen.
But to make it work properly you need to link the label so it is associated with a form element, like the
select dropdown box in the code challenge.
How do you do this?
Look at the attributes of the select element. You'll have an id and a name attribute with a value. There's no label attribute. You need to link the
select name attribute with the
label for attribute.
<label for ="shirt_color">Shirt Color: <label> <select id="color" name="shirt_color"> ...
So now if you click on the label it will focus on the select element. :-)
-- --12,382 Points
Label is a tag itself. You can specify what the label is for using for=" ".
<label for="color">Shirt Color:</label>
Place the label tag above the <select> tag (and remove your previous attempts) to pass the task. :)
Did you watch the previous video? It makes it quite clear!
Make sure the
<label>'s "for" attribute matches up with the
<select>'s "ID" attribute.
<label for="color">Shirt Color:</label> <select id="color" name="shirt_color"> ... </select>
Careful now, the
<label>'s "for" attribute is supposed to correspond to the "ID", not the "name" of