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
Jamie Reardon
Front End Web Development Techdegree Student 9,030 Points

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