Quick Reach
HTML select tag
The select in HTML is the way to show users pre-defined values in a dropdown. For example, giving a user option to select a title from the Mr, Miss, Mrs etc. options. The HTML dropdown is used in forms.
The tag used to create dropdown in HTML is <select> with <option>. So basically, you are enabling visitors to select from the available options. The basic syntax of creating HTML dropdown is:
<select>
<option value=”some value”>Visible text</option>
<option value=”some value”>Visible text</option>
……..
</select>
Note: The select tag is supported by all major browsers.
A few examples with code of select option
HTML dropdown with disabled attribute example
Basic example of using HTML select-option
The example below shows how to create a dropdown with <select> and <option> tags.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Select example</title>
</head>
<body>
Select Title:
<select name=“title”>
<option value=”Mr”>Mr</option>
<option value=”Miss”>Miss</option>
<option value=”Mrs”>Mrs</option>
</select>
</body>
</html>
|
Select tag attributes
The HTML select has a few attributes as follows:
- name: Sets the name of the dropdown to identify it
- required: is used to make it mandatory before submitting a form. This is HTML 5 attribute.
- multiple: To allows users selecting multiple values, use the multiple attribute (see example below).
- disabled: To disable a dropdown
- autofocus: To make dropdown focused as the webpage loads, use autofocus attribute.
HTML option tag
The option tag is used with the <select> tag. The <option> adds available options in HTML dropdown. After the <select> tag, you have to use the <option> to create a selectable value. The <option> tag has a few important attributes as follows:
- value: As such the select tag is used in forms that are submitted with the given information. You can get the value of selected option in dropdown by using value attribute in server or client side script.
- selected: The selected attribute sets the default option visible as a web page is loads. See example below.
- disabled: Disables the option in a dropdown list (see example below)
HTML select selected example
You may need to show an option in select as selected as the web page loads, which is not the first option. The HTML select default value is the first option as web page loads. In order to make an option as selected, use the selected attribute of the <option> tag as shown below:
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Select example</title>
</head>
<body>
Choose color:
<select name=“colors”>
<option value=”Bl”>Black</option>
<option value=”Wh”>White</option>
<option value=”re” selected>Red</option>
<option value=”Gr”>Green</option>
<option value=”Ye”>Yellow</option>
<option value=”Cy”>Cyan</option>
</select>
</body>
</html>
|
As you can see, the Red which is the third option in the dropdown is pre-selected.
HTML dropdown with disabled attribute example
The example below shows using the disabled attribute of the <option> tag. The disabled option is not selectable by the user, though visible.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Select example</title>
</head>
<body>
Choose color:
<select name=“colors”>
<option value=”Bl”>Black</option>
<option value=”Wh”>White</option>
<option value=”re” selected>Red</option>
<option value=”Gr”>Green</option>
<option value=”Ye” disabled>Yellow</option>
<option value=”Cy”>Cyan</option>
</select>
</body>
</html>
|
The Yellow is visible but not selectable.
An example of using multiple attribute
By default, a user can select only one option in a dropdown list. In order to enable users select multiple options, you can use multiple attribute of the <select> tag. To select multiple values, users has to hold the Ctrl key in windows. See the following example:
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Select example</title>
</head>
<body>
Choose color:
<select name=“colors” multiple>
<option value=”Bl”>Black</option>
<option value=”Wh”>White</option>
<option value=”re” selected>Red</option>
<option value=”Gr”>Green</option>
<option value=”Ye”>Yellow</option>
<option value=”Cy”>Cyan</option>
</select>
</body>
</html>
|
Styling select with CSS
You can apply the power of CSS to style dropdown to blend it with the other form or web page elements. You can apply the class(es) of CSS to the <select> tag. You can also use <style> attribute in the <select> tag to apply CSS properties. The CSS also applies to options. See both examples below.
CSS select example with class name
The following example uses CSS class to specify the style of a dropdown.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Select example</title>
<style>
.selectcalss
{
font-size:18px;
color: #FFFFFF;
border: solid 1px red;
background-color: gray;
}
</style>
</head>
<body>
Choose color:
<select name=“colors”>
<option value=”Bl”>Black</option>
<option value=”Wh”>White</option>
<option value=”re” selected>Red</option>
<option value=”Gr”>Green</option>
<option value=”Ye”>Yellow</option>
<option value=”Cy”>Cyan</option>
</select>
</body>
</html>
|
Select CSS example with style attribute
The following example applies CSS properties by using Style attribute in the <select> tag.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Select example</title>
</head>
<body>
Choose color:
<select name=“colors” style=“font-size:18px;color: #FFFFFF;border: solid 1px red;background-color: gray;”>
<option value=”Bl”>Black</option>
<option value=”Wh”>White</option>
<option value=”re” selected>Red</option>
<option value=”Gr”>Green</option>
<option value=”Ye”>Yellow</option>
<option value=”Cy”>Cyan</option>
</select>
</body>
</html>
|
Also see HTML Forms
Leave A Comment?