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

Help with challenge task 3 of 4 in Choosing Options!

And the questions asks: Add a label element to the select menu with the text "Shirt Color:" Here is what I have:

<form action="index.html" method="post">
  <h1>Shirt Order Form</h1>
  <select id="color" name="shirt_color">
    <label id="color">Shirt Color:</label>
    <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>
</form>

</body> </html>

11 Answers

The label should be before the select option.

You need to change the id to for.

<label for="color">Shirt Color:</label>

Hope this helps! (I tried it and it worked.)

Label needs to go before ID label.... id ....

Your comment is the best here :) Thank you so much :)

Same problem here. Although I've done everything in this post right and it keeps telling me 'Bummer! You need to add a label for the 'color' select element.' <form action="index.html" method="post"> <h1>Shirt Order Form</h1> <select id="color" name="shirt_color"> <label for="color">Shirt Color</label> <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> </form>

You need to switch your label and select tags. It should look like this:

      <h1>Shirt Order Form</h1>
      <label for="color">Shirt Color</label>
      <select id="color" name="shirt_color">
        <option value="red">Red</option>

The label needs to come before the input.

Everything is correct except for the spelling of Label.

<label for="color">"Shirt_Color"</label>

O my gosh thank you so much! I guess I have been on too long! Have a great day man!

i still don't understand this task. Can someone please write it out? Thanks

After you complete task 2, you have this completed:

<form action="index.html" method="post">
      <h1>Shirt Order Form</h1>
      <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>
    </form>

You task is to add an element called "label". Label comes before a form element and tells the user what the form element is used for. The "For" attribute in the label aligns with the 'id' attribute in the form element. If you have this element, when you click on the words "Shirt Color", it will focus on the form element.

Example:

<label for="color">Shirt Color</label>

<input id="color">

I hope this kinda clears it up for you!

<html> <head> <meta charset="utf-8"> <title>HTML Forms</title> </head> <body>

<form action="index.html" method="post">
  <h1>Shirt Order Form</h1>
  <lable for="color">Shirt Color:</lable>
  <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>
</form>

</body> </html>

Please help me, I can't see my mistake!

<label for="color">Shirt Color:</label> Correct answer.

<form action="index.html" method="post"> <h1>Shirt Order Form</h1> <label for= "color" id="Shirt_Color">Shirt Color:</label> <select id="color" name="shirt_color"> <option value = "red">Red</option> <option value = "yellow">Yellow</option> <option value = "purpule">Purpule</option> <option value = "blue">Blue</option> <option value = "green">Green</option> <option value = "orange">Orange</option> </select> </form>

This Answer is working

<!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>
    </form>

  </body>
</html>