HTML5 <select> Tag

The HTML <select> tag is used to represent a control that provides a menu of options.

The only content permitted inside this element is zero or more <option> or <optgroup> elements. Both the starting and ending tag are mandatory for this element. The parent of the <select> tag can be any element that accepts phrasing content

The content of this element is static and cannot be edited by the user.

Here is an example of using this tag:

<select id="unittype" name="unittype">
  <option value="1"> Miner </option>
  <option value="2"> Puffer </option>
  <option value="3" selected> Snipey </option>
  <option value="4"> Max </option>
  <option value="5"> Firebot </option>
</select>

<!-- Nothing Selected | Placeholder Value Shown -->
<select name="unittype" required>
  <option value=""> Select unit type </option>
  <option value="1"> Miner </option>
  <option value="2"> Puffer </option>
  <option value="3"> Snipey </option>
  <option value="4"> Max </option>
  <option value="5"> Firebot </option>
</select>

<!-- Allowing users to select multiple Values -->
<select id="allowedunits" name="allowedunits" multiple>
  <option value="1" selected> Miner </option>
  <option value="2"> Puffer </option>
  <option value="3"> Snipey </option>
  <option value="4" selected> Max </option>
  <option value="5" selected> Firebot </option>
</select>

Attributes

autofocus (HTML5)

This attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the autofocus attribute, which is a Boolean.

disabled

This Boolean attribute indicates that the user cannot interact with the control. If this attribute is not specified, the control inherits its setting from the containing element. For example fieldset, if there is no containing element with the disabled attribute set, then the control is enabled.

form (HTML5)

The form element that the select element is associated with (its “form owner”). If this attribute is specified, its value must be the ID of a form element in the same document. This enables you to place select elements anywhere within a document, not just as descendants of their form elements.

multiple

This Boolean attribute indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time.

name

The name of the control.

required (HTML5)

A Boolean attribute indicating that an option with a non-empty string value must be selected.

size

If the control is presented as a scrolled list box, this attribute represents the number of rows in the list that should be visible at one time. Browsers are not required to present a select element as a scrolled list box. The default value is 0.

Examples

See the Pen HTML select Tag by Tutorialio (@tutorialio) on CodePen.

Further Reading

  1. Read more about the HTML <select> element on MDN.
  2. You can also read the HTML <select> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top