HTML Tag <option>
We will look at the HTML Tag option with examples in this post. It should meet the learning needs.
The <option> tag in HTML is used to define an option in a dropdown list, which is usually placed inside a <select> tag. The content of the <option> tag is the text that is displayed to the user in the dropdown list.
There are six options in the drop-down list:
Example:
<!DOCTYPE html>
<html>
<body>
<label for="laptops">Choose a Laptop:</label>
<select id="laptops">
<option value="dell">Dell</option>
<option value="hp">HP</option>
<option value="apple">Apple</option>
<option value="lenovo">Lenovo</option>
<option value="alienware">Alienware</option>
<option value="asus">Asus</option>
</select>
</body>
</html>
The use of an <option> within a <datalist> element is as follows:
Example:
<!DOCTYPE html>
<html>
<body>
<datalist id="compiler ">
<option value="Sublime Text">
</option><option value="Atom"></option>
<option value="Visual Studio Code"></option>
<option value="Notepad++"></option>
<option value="Bluefish"></option>
<option value="Brackets"></option>
<option value="Codeshare.io"></option>
<option value="VIM"></option>
</datalist>
<label for="browser">Choose your code editor from the list </label>
<input list="compiler " name="compiler " id="compiler ">
</body>
</html>
The implementation of <option> in <optgroup> elements is as follows:
Example:
<!DOCTYPE html>
<html>
<body>
<label for="laptops">Choose a Laptop:</label>
<select name="laptops" id="laptops">
<optgroup label="United States Laptops">
<option value="dell">Dell</option>
<option value="HP">HP</option>
</optgroup>
<optgroup label="Taiwan laptops">
<option value="acer">Acer</option>
<option value="asus">Asus</option>
</optgroup>
</select>
</body>
</html>
Here is another example of the <option> tag:
Example:
<!DOCTYPE html>
<html>
<body>
<select>
<optgroup label="Europe">
<option value="france">France</option>
<option value="germany">Germany</option>
<option value="italy">Italy</option>
<option value="spain">Spain</option>
</optgroup>
<optgroup label="North America">
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
<option value="usa">USA</option>
</optgroup>
<optgroup label="South America">
<option value="argentina">Argentina</option>
<option value="brazil">Brazil</option>
<option value="chile">Chile</option>
</optgroup>
</select>
</body>
</html>
CSS can also be applied to the <option> tag here is how:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
select {
width: 300px;
padding: 8px;
border-radius: 8px;
font-size: 20px;
}
optgroup {
font-weight: bolder;
}
option {
color: rgb(0, 20, 237);
}
</style>
</head>
<body>
<select>
<optgroup label="Europe">
<option value="france">France</option>
<option value="germany">Germany</option>
<option value="italy">Italy</option>
<option value="spain">Spain</option>
</optgroup>
<optgroup label="North America">
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
<option value="usa">USA</option>
</optgroup>
<optgroup label="South America">
<option value="argentina">Argentina</option>
<option value="brazil">Brazil</option>
<option value="chile">Chile</option>
</optgroup>
</select>
</body>
</html>
Table Of Content-
Tag option Usage
The Tag option <option> specifies an option in a select list.
<option> elements are contained within a <select>, <optgroup>, or <datalist> element.
IMPORTANT: While the <option> tag can be applied with or without attributes, it is typically necessary to use the value attribute, which determines what is transmitted to the server when a form is submitted.
Regular Use of option Tag
Here are some regular uses of the <option> tag in daily web development activites:
- The <option> tag is used to define each option in a dropdown menu. Users can select an option from the list by clicking on it.
- The <option> tag can be used to set a default selected option in the dropdown list. This is done by adding the selected attribute to the desired option.
- The <option> tag can be grouped together using the <optgroup> tag. This is useful when you want to categorize options in the dropdown list.
- The <option> tag can also be used to bind data to each option. This is done using the value attribute, which specifies the value associated with each option. This value can be used to identify the selected option on the server side when the form is submitted.
Advice: When you have many options, you can group them using the <optgroup> tag.
Attributes
Global
The Tag option <option> includes the Global Attributes in HTML.
Event
The Tag option <option> includes the Event Attributes in HTML.
Attributes List
| Attribute | Value | Overview |
|---|---|---|
| disabled | disabled | This indicates that an option-group must be disabled. |
| label | text | Provides a label for an option group. |
| selected | selected | A pre-selected option is displayed when the page loads. |
| value | text | Provides the server with the value it should send. |
Browser Compatibility
| Element |  |  |  |  |  |
|---|---|---|---|---|---|
| <option> | Yes | Yes | Yes | Yes | Yes |
<option> Tag Advantages
Here are some advantages of using <option> tag in HTML:
- The “option” tag allows you to create a wide range of options that users can choose from, making it easy to customize the select element to fit your needs.
- The “option” tag makes it easy to read and understand the available options, which can help users make informed decisions.
- The “option” tag provides valuable information to screen readers and other assistive technologies, making your website more accessible to people with disabilities.
- Using the “option” tag can help ensure consistency across different web browsers and devices, making your website more user-friendly.
- Using the “option” tag can make your code more efficient, reducing load times and improving performance.
- The “option” tag can be customized using CSS, allowing you to style the options to fit your website’s design.
Do leave your reaction below as a source of encouragement or to suggest some valuable feedback for the betterment of this site.
We value your feedback.
+1
+1
+1
+1
+1
+1
+1
