HTML: <select> tag
This HTML tutorial explains how to use the HTML element called the <select> tag with syntax and examples.
Description
The HTML <select> tag creates a dropdown list of values that a user can choose from. These dropdown values are defined by a series of <option> tags within the <select> tag. This tag is also commonly referred to as the <select> element.
Syntax
In HTML, the syntax for the <select> tag is:
<body>
<label for="tutorial_choice">Tutorials: </label>
<select id="tutorial_choice">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="sql">SQL</option>
</select>
</body>
Sample Output
Attributes
In addition to the Global Attributes, the following is a list of attributes that are specific to the <select> tag:
Attribute | Description | HTML Compatibility |
---|---|---|
autocomplete | Value of either on or off to indicate whether the browser can automatically complete the values in the <select> control based on values previously entered in the form |
HTML 4.01, HTML5 |
autofocus | Boolean value indicating that the <select> control has input focus when the page is loaded, unless the user overrides it. | HTML 4.01, HTML5 |
disabled | Boolean value indicating that the user cannot interact with the <select> control. | HTML 4.01, HTML5 |
form | Value indicating the form that owns the <select> control. It is the id of a <form> in the same document. |
HTML 4.01, HTML5 |
multiple | Boolean value indicating whether multiple options can be selected in the <select> control. The default value for the <select> control is to only allow one option to be selected. | HTML 4.01, HTML5 |
name | Name of the <select> control | HTML 4.01, HTML5 |
required | Boolean value indicating whether the <select> control is required. Required <select> controls must be completed before the form can be submitted. | HTML 4.01, HTML5 |
size | The number of rows visible in the <select> control when multiple is specified or the <select> control is displayed as a scrolling list box. The default value for size is 0. |
HTML 4.01, HTML5 |
Note
- The HTML <select> element is found within the <body> tag. The <select> tag is usually found within the <form> tag.
- The <select> tag contains a set of <option> tags that provide the list of dropdown values.
- By default, the first option in the <select> tag will appear as the selected item. The user can select another option in the dropdown list.
Browser Compatibility
The <select> tag has basic support with the following browsers:
- Chrome
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer (IE)
- Edge Mobile
- Opera
- Opera Mobile
- Safari (WebKit)
- Safari Mobile
Example
We will discuss the <select> tag below, exploring examples of how to use the <select> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.
Advertisements