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 a Select Menu

Posted by hi iam
.a{fill-rule:evenodd;}techdegree
hi iam
Full Stack JavaScript Techdegree Student 394 Points

Add a label element to the select menu with the text "Shirt Color:"

how to do it

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

3 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 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.

Like this

<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. :-)

rospa
rospa
2,945 Points

Careful now, the <label>'s "for" attribute is supposed to correspond to the "ID", not the "name" of <select>! ;)

-- --
-- --
12,382 Points
-- --
-- --
12,382 Points

Hi there,

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. :)

rospa
rospa
2,945 Points
rospa
rospa
2,945 Points

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>