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

Winston Quin
Winston Quin
10,359 Points
Posted by Winston Quin
Winston Quin
10,359 Points

using label ELEMENT <label>Shirt Color</label> in line 13 above <select id="color" name="shirt_color"> but that's not it

I feel like this is a somewhat vague/misleading task description. Can you please point out where in the past lesson to refer to for clarification?

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>


      <label>Shirt Color</label>
      <select id="color" name="shirt_color">
       <optgroup>
        <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>
        </optgroup>
      </select>
    </form>

  </body>
</html>

1 Answer

Winston Quin
Winston Quin
10,359 Points
Winston Quin
Winston Quin
10,359 Points

The problem was that the task description did not entail adding an <optgroup label="">, an ATTRIBUTE not an ELEMENT. The task wouldn't complete without it. Please make note of this to make the task more comprehensible to students.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! To be fair, the challenge never explicitly asked for an <optgroup>. This is strictly optional. The<option> element can be found inside <select>, <optgroup>, or <datalist> as evidenced by this MDN documentation.

The answer they were expecting did not contain an <optgroup> with an attribute of label, rather it expected a <label> element with the for attribute.

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

Also, while this did not affect the outcome of the challenge, you did happen to miss the Orange option entirely.

:bulb: Going forward through these challenges, it is generally a good idea to try not to do anything not explicitly asked for by the challenge. Even if functional, it can cause the challenge to fail.

Happy coding! :sparkles: