EN
HTML - select / option / combo box example
11 points
Using HTML it is possible to create select field (combo box controll) in few ways.
xxxxxxxxxx
1
2
<html>
3
<body>
4
<form name="my-form">
5
<label>Fruits: </label>
6
<select name="my-fruits">
7
<option value="apples">Apples</option>
8
<option value="pears">Pears</option>
9
<option value="bananas">Bananas</option>
10
<option value="grapes">Grapes</option>
11
</select>
12
</form>
13
</body>
14
</html>
xxxxxxxxxx
1
2
<html>
3
<body>
4
<form name="my-form">
5
<label>Fruits: </label>
6
<select name="my-fruits">
7
<option value="apples">Apples</option>
8
<option value="pears">Pears</option>
9
<option value="bananas" selected>Bananas</option>
10
<option value="grapes">Grapes</option>
11
</select>
12
</form>
13
</body>
14
</html>
Note: Banana fruit has been selected by default because of used
selected
attribute.
In this example optgroup
elemnt usage has been presented.
xxxxxxxxxx
1
2
<html>
3
<body>
4
<form name="my-form">
5
<label>Fruits: </label>
6
<select name="my-fruits">
7
<optgroup label="Sale by weight">
8
<option value="apples">Apples</option>
9
<option value="pears">Pears</option>
10
</optgroup>
11
<optgroup label="Sale by quantity">
12
<option value="bananas" selected>Bananas</option>
13
<option value="grapes">Grapes</option>
14
</optgroup>
15
</select>
16
</form>
17
</body>
18
</html>
xxxxxxxxxx
1
2
<html>
3
<body>
4
<form name="my-form">
5
<label>Fruits: </label>
6
<select name="my-fruits">
7
<option selected disabled></option>
8
<option value="apples">Apples</option>
9
<option value="pears">Pears</option>
10
<option value="bananas">Bananas</option>
11
<option value="grapes">Grapes</option>
12
</select>
13
</form>
14
</body>
15
</html>
xxxxxxxxxx
1
2
<html>
3
<head>
4
<style>
5
6
select {
7
background: gold;
8
font-family: monospace;
9
}
10
11
option {
12
color: gold;
13
}
14
15
option:disabled {
16
background: grey;
17
}
18
19
option[value="apples"] {
20
background: red;
21
}
22
23
option[value="pears"] {
24
background: yellow;
25
}
26
27
option[value="bananas"] {
28
background: yellow;
29
}
30
31
option[value="grapes"] {
32
background: red;
33
}
34
35
</style>
36
</head>
37
<body>
38
<form name="my-form">
39
<label>Fruits: </label>
40
<select name="my-fruits">
41
<option selected disabled></option>
42
<option value="apples">Apples</option>
43
<option value="pears">Pears</option>
44
<option value="bananas">Bananas</option>
45
<option value="grapes">Grapes</option>
46
</select>
47
</form>
48
</body>
49
</html>