HTML <select> Tag

Description

The <select> HTML element allows you to create an interface element in the form of a drop-down list, as well as a list with one or multiple choices. The final look depends on the use of the size attribute, which sets the height of the list. The width of the list is determined by the widest text specified in the <option> element, and can also be changed using styles. Each item is created using the <option> element, which must be nested in the <select> container. If you plan to send list data to the server, you need to put <select> inside the form. This is also necessary when the list data is accessed through scripts.

Properties

Permitted Parents: Any element that accepts phrasing content
Content: One or more of <optgroup> and/or <option>
Start/End Tags: Start tag: required, End tag: required

Example

HTML

<select>

  <option value ="new york">New York</option>

  <option value ="london">London</option>

  <option value ="sydney" selected>Sydney</option>

  <option value ="auckland">Auckland</option>

</select>

Result

Attributes

Attribute	Definition
autofocus	Specifies that the drop-down list should automatically get focus when the page loads
disabled	Disables the input control. The button won't accept changes from the user. It also cannot receive focus and will be skipped when tabbing
form	Defines one or more forms the select field belongs to
multiple	Specifies that multiple selections can be made
name	Assigns a name to the select list.
required	Specifies that the user is required to select a value before submitting the form
size	Specifies the number of rows to be visible at the same time

Global Attributes

The <select> tag also supports the Global Attributes in HTML5

Event Attributes

The <select> tag also supports the Event Attributes in HTML5

Browser Support

Desktop

Yes	12	Yes	1	Yes	Yes

Tablets / Mobile

Yes	Yes	4	Yes	Yes	Yes

Last updated by CSSPortal on: 6th December 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu