EN
HTML - select / option / combo box example
11
points
Using HTML it is possible to create select field (combo box controll) in few ways.
1. select element example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<form name="my-form">
<label>Fruits: </label>
<select name="my-fruits">
<option value="apples">Apples</option>
<option value="pears">Pears</option>
<option value="bananas">Bananas</option>
<option value="grapes">Grapes</option>
</select>
</form>
</body>
</html>
2. select element with default selected option example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<form name="my-form">
<label>Fruits: </label>
<select name="my-fruits">
<option value="apples">Apples</option>
<option value="pears">Pears</option>
<option value="bananas" selected>Bananas</option>
<option value="grapes">Grapes</option>
</select>
</form>
</body>
</html>
Note: Banana fruit has been selected by default because of used
selectedattribute.
3. select element with grouped options example
In this example optgroup elemnt usage has been presented.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<form name="my-form">
<label>Fruits: </label>
<select name="my-fruits">
<optgroup label="Sale by weight">
<option value="apples">Apples</option>
<option value="pears">Pears</option>
</optgroup>
<optgroup label="Sale by quantity">
<option value="bananas" selected>Bananas</option>
<option value="grapes">Grapes</option>
</optgroup>
</select>
</form>
</body>
</html>
4. select element with disabled option example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<form name="my-form">
<label>Fruits: </label>
<select name="my-fruits">
<option selected disabled></option>
<option value="apples">Apples</option>
<option value="pears">Pears</option>
<option value="bananas">Bananas</option>
<option value="grapes">Grapes</option>
</select>
</form>
</body>
</html>
5. select element with custom styles example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
select {
background: gold;
font-family: monospace;
}
option {
color: gold;
}
option:disabled {
background: grey;
}
option[value="apples"] {
background: red;
}
option[value="pears"] {
background: yellow;
}
option[value="bananas"] {
background: yellow;
}
option[value="grapes"] {
background: red;
}
</style>
</head>
<body>
<form name="my-form">
<label>Fruits: </label>
<select name="my-fruits">
<option selected disabled></option>
<option value="apples">Apples</option>
<option value="pears">Pears</option>
<option value="bananas">Bananas</option>
<option value="grapes">Grapes</option>
</select>
</form>
</body>
</html>