HTML Selected Attribute
BLUF: Mastering HTML Selected Attribute is a fundamental step in becoming a web developer. This guide covers the structure, syntax, and best practices for using this HTML element effectively.
Key Lesson: HTML Selected Attribute
Web structure starts with solid HTML. Learn how HTML Selected Attribute contributes to accessible and semantic web pages in the tutorial below.
The Selected attribute belongs to the <option> element and is utilized to specify the default choice in a dropdown list.
If an option incorporates this attribute, it should be automatically selected and shown as the initial choice upon the webpage loading.
Syntax
Example
<option selected>
In this instance, the Selected attribute is employed within the <option> tag, featuring the value of Jaguar.
Example
<!DOCTYPE html>
<html>
<head>
<title>
Example of selected attribute
</title>
</head>
<body>
<h4> Select Your favourite Car from the following given options: </h4>
<br>
<select name="cars">
<option value="Mercedes"> Mercedes </option>
<option value="Lamborghini"> Lamborghini </option>
<!-- In the following option tag we specify the selected attribute for the Jaguar value, which is display as selected on the web page by default. -->
<option value="Jaguar" selected> Jaguar </option>
<option value="BMW" > BMW </option>
<option value="Audi"> Audi </option>
</select>
</body>
</html>
Output:
Illustration 2: In this instance, the Selected attribute is applied within the <option> tag, set to the value Pomegranate.
Example
<!DOCTYPE html>
<html>
<head>
<title>
Second Example of selected attribute
</title>
</head>
<body>
<h4> Select Your favourite fruit from the following list of fruits: </h4>
<br>
<select name="fruits">
<option value="Apple"> Apple </option>
<option value="Banana"> Banana </option>
<option value="Orange"> Orange </option>
<!-- In the following option tag we specify the selected attribute for the Pomegranate value, which is display as selected on the web page by default.-->
<option value="Pomegranate" selected> Pomegranate </option>
<option value="Grapes"> Grapes </option>
<option value="Mango"> Mango </option>
</select>
</body>
</html>
Output:
Browser Support
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<selected> |
Yes | Yes | Yes | Yes | Yes |
