HTML <option>

BrandonDusch's avatar
BrandonDusch's avatar
BrandonDusch
Published Apr 19, 2022Updated Jul 1, 2022
Contribute to Docs

The <option> element represents one possible selection in the dropdown created by the <select> tag.

The <select> element is typically used with <option> elements to gather user input in a form.

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Free course

    Learn HTML

    Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.
    • Beginner Friendly.
      7 hours

Syntax

<select name="dropdown name">
  <option value="value of option 1">Text for option 1</option>
  <option value="value of option 2">Text for option 2</option>
  <option value="value of option 3">Text for option 3</option>
</select>

The <select> element is given a name attribute to reference it in the form data, and the <option> elements will each have a value attribute to pass along when the form is submitted with that option selected.

Attributes

The attributes that can be used with the <option> tag include:

  • disabled indicates that the option should be disabled.
  • label specifies a shorter label for an option.
  • selected indicates that the option is pre-selected when the page loads.
  • value specifies the value to be sent when the option is selected.

Example

The example form below allows the user to select one of four different types of meals:

<html>
  <head> </head>
  <body>
    <form>
      <label for="food">Select Meal Type</label>
      <select name="food" id="food">
        <option value="1">Beef</option>
        <option value="2">Chicken</option>
        <option value="3">Fish</option>
        <option value="4">Vegetarian</option>
      </select>
      <input type="submit" value="Order Dinner" />
    </form>
  </body>
</html>

All contributors

Contribute to Docs

Learn HTML on Codecademy

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Free course

    Learn HTML

    Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.
    • Beginner Friendly.
      7 hours