HTML HTML Forms Choosing Options Create a Select Menu

Greg Wilson
Greg Wilson
Front End Web Development Techdegree Student 3,526 Points
Posted by Greg Wilson
Greg Wilson
Front End Web Development Techdegree Student 3,526 Points

What am I doing wrong?

I put the optgroup label tag but it's saying it's wrong.

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="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>
Kristina McElveen
Kristina McElveen
152 Points
Kristina McElveen
Kristina McElveen
152 Points

Remove the optgroup element. Use a label element and put it above the select element. The label has an attribute by the name of for. Check out this link to look at the for attribute https://www.w3schools.com/tags/tag_label.asp

1 Answer

Camilo Lucero
Camilo Lucero
26,564 Points
Camilo Lucero
Camilo Lucero
26,564 Points

The challenge wants you to use the <label> tag just before the <select>. You are using an <optgroup> instead.

Delete the optgroup and add a <label> tag just before the <select> tag. Add the attribute for="color" to the <label> tag, so that it references the select group.

Then write "Shirt Color:" inside of the <label> tag, as the challenge asks to:

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