How to Select Default Value in HTML
-
Use the
selected="selected"to Select Default Value for an HTML<select>Element -
Use the
<option selected>to Select Default Value for an HTML<select>Element
This article will discuss two methods to select the default value for an HTML <select> element.
Use the selected="selected" to Select Default Value for an HTML <select> Element
We can use the selected="selected" option to select default value in an HTML code. We write the selected attribute in the <option> tag. We can set the selected attribute’s value to selected to select the specific option by default when the web page is first loaded. It is called the boolean attribute in HTML. The pre-selected option will be displayed first in the drop-down list. This attribute can be used only on the <option> element. It supports the web browsers like Google Chrome, Internet Explorer, Firefox, Opera, etc.
For example, inside the HTML body, create a <select> tag followed by five options inside it. Write the numbers from 1-5 for the value attribute for each option. Write the text from One to Five between the <option> tag for each option. Next, write the selected attribute with the value selected just after opening the <option> tag in that particular value you want to select as the default value (option 3 in the example below). Finally, close the <select> tag.
The example below uses the select=selected method to select the default value in a drop-down list. We created a drop-down list that lets us select values from One to Five. When the page reloads, the option Three loads by default because we have used the selected attribute to specify the element as default.
Example Code:
<body>
<select>
<option value="1">One</option>
<option value="2">Two</option>
<option selected="selected" value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
</body>
Use the <option selected> to Select Default Value for an HTML <select> Element
We can use the <option selected> option to select a default value in HTML. This process is also somewhat similar to the first one. It is also a boolean attribute. The <select> element is mostly used to collect input from the user. The <option> tag, which we write inside the <select> element, defines the available items contained in the drop-down list. We can write the selected option in the particular <option> tag to specify the option as a default selected option.
For example, inside the HTML body, create a <select> tag followed by the <option> tag as in the method above. In the next line, specify values from 1-5 to the option tag and close the option tag. Repeat this process five times. Then, write <selected> just after the second <option> tag to select it as your default value. Finally, close the <select> tag.
The example below uses the <option selected> option to select the default value. When the page loads, we can see the option 2 is loaded by default in the drop-down list because we used the <option selected> in the case of the second element.
Example Code:
<body>
<select>
<option> 1 </option>
<option selected> 2 </option>
<option> 3 </option>
<option> 4 </option>
<option> 5 </option>
</select>
</body>
Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.
LinkedIn