HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

HTML Tags

HTML <select> Tag

The <select> tag is used to create a drop-down list in a form.
It allows users to choose one or multiple options from a predefined list.
Each option is defined using the <option> tag, and options can be grouped with <optgroup>.

Syntax

html

<select name="dropdownName" id="dropdownId" multiple size="4" required>
  <option value="value1">Option 1</option>
  <option value="value2">Option 2</option>
</select>

Attributes

AttributeDescription
nameName of the select element, used in form submission.
idUnique identifier for the element.
multipleAllows selection of multiple options.
sizeNumber of visible options without scrolling.
requiredMakes selection mandatory.
disabledDisables the dropdown entirely.
autofocusAutomatically focuses the dropdown when page loads.
formAssociates the select with a specific form (useful if outside the form).

Example

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Select Example</title>
</head>
<body>
  <h2>Select Your Favorite Fruit</h2>
  <form action="/samples/form_processor.php" method="post">
    <label for="fruits">Choose a fruit:</label><br>
    <select name="fruits" id="fruits" required>
      <option value="">--Select--</option>
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
      <option value="orange">Orange</option>
      <option value="mango">Mango</option>
    </select><br><br>

    <input type="submit" value="Submit">
  </form>
</body>
</html>

Output

Browser Output

html

You will see a drop-down menu where users can select a single fruit.
Clicking the arrow shows all available options, and the selected option is sent when submitting the form.
Try it in our TryIt Editor to see how selection works.

Browser Support

Chrome
Edge
Firefox
Safari
Opera
IE9+
YesYesYesYesYesYes

All major browser supports <select> tag

Notes

  • The <select> tag must contain <option> elements.
  • Use multiple for multi-selection lists.
  • Use <optgroup> to group related options for better UX.
  • Always include a placeholder option (value="") for validation purposes.

Conclusion

The <select> tag provides an organized way for users to pick from a list of choices.
It is widely supported and essential for forms requiring selection input.

PreviousHTML <button> TagNextHTML <option> Tag