Quick Reach
The select with option in HTML
The option tag is used with <select> tag. The <option> adds available options in HTML dropdown. After <select> tag you have to use <option> tag to create selectable values.
Attributes of <option> tag:
value: As such HTML select is used in forms, that are submitted with given information. You can get value of selected option in dropdown by using value attribute in server side script.
selected: The selected attribute sets the default option visible as web page is loaded. See example below.
disabled: Disables the option in dropdown list (see example below)
Select option example with selected attribute
You may need to show an option in select as selected as web page loads, which is not the first option. The select default value is the first option as web page loads. In order to make an option as selected use selected attribute of <option> tag as shown below:
|
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>The 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 Red which is third in dropdown is pre-selected.
The select and option example with disabled attribute
The example below shows using disabled attribute of <option> tag. The disabled option not selectable by user, though visible.
|
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>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>
|
As you can see Yellow is visible but not selectable.
Also see HTML Form | HTML input type
Leave A Comment?