HTML Element: select

The HTML select element is the classic dropdown most often seen in forms. It allows users to select something from a set of options. Multiple options can be selected but users are most often required to choose one option per select field.

Examples

Syntax

1
 
<select name="name" required>

2
 
 <option value="1">John</option>

3
 
 <option value="2">Jane</option>

4
 
 <option value="3">Donald</option>

5
 
 <option value="4">Chuck</option>

6
 
 <option value="5">Leslie</option>

7
 
</select>

A select element with the multiple attribute enabled (true) allows for multiple options to submit with a form submission.

1
 
<select multiple name="name" required>

2
 
 <option value="1">John</option>

3
 
 <option value="2">Jane</option>

4
 
 <option value="3">Donald</option>

5
 
 <option value="4">Chuck</option>

6
 
 <option value="5">Leslie</option>

7
 
</select>

Result

Browser Support

The select element is supported in all modern browsers. Read more on caniuse.com. 

Browsers display select elements differently, depending on their rendering engine. Take a look at this example which shows the same select element in Google Chrome (powered by Blink), Firefox (powered by Quantum), and Safari (powered by WebKit). 

select elements rendered by different browsersselect elements rendered by different browsersselect elements rendered by different browsers
All browsers here are on MacOS

Attributes

A select element supports Global Attributes in HTML. Global Attributes are common to all HTML elements and can be used on all of them (though they may not have much of an effect on some of them).

In addition to global attributes the select element has a group of other attributes:

  • autocomplete: Hit for a form to autofill.
  • disabled: Whether or not the form control is disabled.
  • form: Associates the select with a form element.
  • multiple: Whether or not to allow multiple values.
  • name: The name of the element to use for form submissions or via the form.elements API.
  • required: Whether the select is required for form submission.
  • size: Size of the select.

Content

The select element supports zero or more option, optgroup, and script-supporting elements.

If selecting a value is optional, you might want to include an empty <option> at the top of your <select> element.

Related HTML Elements

  • The <select> element is usually found within a <form>, though it’s perfectly valid HTML to have a <select> elsewhere.
  • The <select> element is very similar to the <datalist> element, as both give users multiple <option>s to select from. However, <datalist> is more a list of suggested options, and users can actually enter their own value.

Learn More


This content originally appeared on Envato Tuts+ Tutorials and was authored by Andy Leverenz

The HTML select element is the classic dropdown most often seen in forms. It allows users to select something from a set of options. Multiple options can be selected but users are most often required to choose one option per select field.

Examples

Syntax

1
 
<select name="name" required>

2
 
 <option value="1">John</option>

3
 
 <option value="2">Jane</option>

4
 
 <option value="3">Donald</option>

5
 
 <option value="4">Chuck</option>

6
 
 <option value="5">Leslie</option>

7
 
</select>

A select element with the multiple attribute enabled (true) allows for multiple options to submit with a form submission.

1
 
<select multiple name="name" required>

2
 
 <option value="1">John</option>

3
 
 <option value="2">Jane</option>

4
 
 <option value="3">Donald</option>

5
 
 <option value="4">Chuck</option>

6
 
 <option value="5">Leslie</option>

7
 
</select>

Result

Browser Support

The select element is supported in all modern browsers. Read more on caniuse.com. 

Browsers display select elements differently, depending on their rendering engine. Take a look at this example which shows the same select element in Google Chrome (powered by Blink), Firefox (powered by Quantum), and Safari (powered by WebKit). 

select elements rendered by different browsersselect elements rendered by different browsersselect elements rendered by different browsers
All browsers here are on MacOS

Attributes

A select element supports Global Attributes in HTML. Global Attributes are common to all HTML elements and can be used on all of them (though they may not have much of an effect on some of them).

In addition to global attributes the select element has a group of other attributes:

  • autocomplete: Hit for a form to autofill.
  • disabled: Whether or not the form control is disabled.
  • form: Associates the select with a form element.
  • multiple: Whether or not to allow multiple values.
  • name: The name of the element to use for form submissions or via the form.elements API.
  • required: Whether the select is required for form submission.
  • size: Size of the select.

Content

The select element supports zero or more option, optgroup, and script-supporting elements.

If selecting a value is optional, you might want to include an empty <option> at the top of your <select> element.
  • The <select> element is usually found within a <form>, though it’s perfectly valid HTML to have a <select> elsewhere.
  • The <select> element is very similar to the <datalist> element, as both give users multiple <option>s to select from. However, <datalist> is more a list of suggested options, and users can actually enter their own value.

Learn More


This content originally appeared on Envato Tuts+ Tutorials and was authored by Andy Leverenz


Print Share Comment Cite Upload Translate Updates
APA

Andy Leverenz | Sciencx (2023-03-07T10:31:19+00:00) HTML Element: select. Retrieved from https://www.scien.cx/2023/03/07/html-element-select/

MLA
" » HTML Element: select." Andy Leverenz | Sciencx - Tuesday March 7, 2023, https://www.scien.cx/2023/03/07/html-element-select/
HARVARD
Andy Leverenz | Sciencx Tuesday March 7, 2023 » HTML Element: select., viewed ,<https://www.scien.cx/2023/03/07/html-element-select/>
VANCOUVER
Andy Leverenz | Sciencx - » HTML Element: select. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/03/07/html-element-select/
CHICAGO
" » HTML Element: select." Andy Leverenz | Sciencx - Accessed . https://www.scien.cx/2023/03/07/html-element-select/
IEEE
" » HTML Element: select." Andy Leverenz | Sciencx [Online]. Available: https://www.scien.cx/2023/03/07/html-element-select/. [Accessed: ]
rf:citation
» HTML Element: select | Andy Leverenz | Sciencx | https://www.scien.cx/2023/03/07/html-element-select/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts