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

Ted Wahl
Ted Wahl
3,234 Points
Posted by 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
Jamie Reardon
.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
Ted Wahl
Ted Wahl
3,234 Points

Thank you, Jamie