HTML HTML Forms Choosing Options Create a Select Menu

Nicole Schulte
Nicole Schulte
7,435 Points

Why isn't the code working?

"Add a label element which says "Shirt Color:" I did.. but it shows me a Bummer. I can't find the mistake?

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

        <optgroup label="Color">Shirt Color:
        <option value="red">Red</option>
        <option value="yellow">Yellow</option>
        <option value="purple">Purple</option>
        <option value="blue">Blue</option>
        <option value="orange">Orange</option>

        </optgroup>
      </select>
    </form>

  </body>
</html>

3 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 81,804 Points

In order to do this, you need to use the label element rather than optgroup.

Each form element in a HTML form has a label and they are assigned with the for attribute which is the same as the id attribute of the target element.

<label for="color">Shirt Color</label>
Christine Hendrickson
Christine Hendrickson
3,424 Points

Hi Nicole,

The <label> element is separate from the <select> element. You'll need to open that element, reference the "color" id and then give it the label text. You'll also want to close the <label> element, since it's not a self-closing tag.

Here's an example of how this should work:

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

  <select id="color" name="shirt_color">

I hope that helps!

Happy Coding ☺