HTML tags | select
Tags: html, tags, select
Published: 2021-11-04 07:20:12

It is used to **represent a control that provides a menu of options**. Each menu option is defined by an `<option>` element nested inside the `<select>`.

Each `<option>` element should have a `value` attribute containing the data value to submit to the server when that option is selected. If no `value` attribute is included, the value defaults to the text contained inside the element. You can include a `selected` attribute on an `<option>` element to make it selected by default when the page first loads.

The `<select>` element has some unique attributes you can use to control it, such as `multiple` to specify whether multiple options can be selected, and `size` to specify how many options should be shown at once. It also accepts most of the general form input attributes such as `required`, `disabled`, `autofocus`, etc.

You can further **nest** `<option>` **elements inside** `<optgroup>` **elements to create separate groups of options** inside the dropdown.

### autocomplete
A [DOMString](https://developer.mozilla.org/en-US/docs/Web/API/DOMString) providing a hint for a user agent's autocomplete feature.

### autofocus
This Boolean attribute lets you specify that a form control should have input focus when the page loads. Only one form element in a document can have the `autofocus` attribute.

### 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
The `<form>` element to associate the `<select>` with (its form owner). The value of this attribute must be the `id` of a `<form>` in the same document. (If this attribute is not set, the `<select>` is associated with its ancestor `<form>` element, if any.)

This attribute lets you associate `<select>` elements to `<form>`s anywhere in the document, not just inside a `<form>`. It can also override an ancestor `<form>` element.

### 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. When `multiple` is specified, most browsers will show a scrolling list box instead of a single line dropdown.

### name
This attribute is used to specify the name of the control.

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

### size
If the control is presented as a scrolling list box (e.g. when `multiple` is specified), 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`.

According to the HTML5 specification, the default value for size should be `1`; however, in practice, this has been found to break some web sites, and no other browser currently does that, so Mozilla has opted to continue to return `0` for the time being with Firefox.

## Styling

The `<select>` element is notoriously difficult to style productively with CSS. You can affect certain aspects like any element — for example, manipulating the [box model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model), the [displayed font](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts), etc., and you can use the `appearance` property to remove the default system appearance.

However, **these properties don't produce a consistent result across browsers**, and it is hard to do things like line different types of form element up with one another in a column. The `<select>` element's internal structure is complex, and hard to control. If you want to get full control, **you should consider using a library** with good facilities for styling form widgets, or try rolling your own dropdown menu using non-semantic elements, JavaScript, and [WAI-ARIA](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics) to provide semantics.

- Type: *inline-block*
- Self-closing: *No*
- Semantic value: *No*

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) | [Support](https://caniuse.com/mdn-html_elements_select)