Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML HTML Forms Choosing Options Create a Select Menu

Ted Wahl
Ted Wahl
3,234 Points

label element in a select element

I don't see how I can add a label element to the color select element. I feel I am missing something small, but also added in a few attributes in the label element I don't think I need. Thank you in advance!

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 id="color" text="Shirt Color" for="shirt_color"> </label>
        <option value="blue"> Blue </option> 
        <option value="red"> Red</option> 
        <option value="yellow"> Yellow </option> 
        <option value="purple"> Purple </option> 
        <option value="green"> Green </option> 
        <option value="orange"> Orange </option> 
      </select>


    </form>

  </body>
</html>

2 Answers

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

Hi, you can add a label outside the select element so that a user can click that target area to highlight the select element for more simplicity. Between the label opening and closing tags you can add the text you want to display for that input field. Also, don't add an id attribute to your label element as the for attribute within the label will correspond to the id within the select element:

<label for="shirt_color">Choose a Shirt Color:</label><br>
<select id="color" name="shirt_color">
  <option value="blue"> Blue </option> 
  <option value="red"> Red</option> 
  <option value="yellow"> Yellow </option> 
  <option value="purple"> Purple </option> 
  <option value="green"> Green </option> 
  <option value="orange"> Orange </option> 
</select>

You can also add the optgroup element to group multiple options together aswell.

<label for="shirt_color">Choose a Shirt Color:</label><br>
<select id="color" name="shirt_color">
  <optgroup label="Main Colors">
    <option value="blue">Blue</option> 
    <option value="red">Red</option> 
    <option value="yellow">Yellow</option> 
  </optgroup>
  <optgroup label="Other Colors">
     <option value="purple">Purple</option> 
     <option value="green">Green</option> 
     <option value="orange">Orange</option> 
  </otpgroup>
 </select>
Ted Wahl
Ted Wahl
3,234 Points

Thank you, Jamie