How to specify that an option should be pre-selected when the page loads in HTML5?
The <option> tag defines an option in a select list. The <option> tag is generally used with the value attribute to specify which value should be sent to the server for further processing. When a drop-down list is created using the <select> element, the first option or the first choice defined by the <option> tag is seen as the selected choice.
Example 1: The following example demonstrates that the first option will be pre-selected.
HTML
<!DOCTYPE html> < html > < head > < style > #container { margin: 0 auto; height: 300px; width: 650px; border: 5px solid black; background-color: rgb(104, 241, 104); opacity: 0.5; display: flex; flex-direction: column; justify-content: center; align-items: center; } .courses { height: 60px; width: 130px; border: 2px solid black; font-family: cursive; } </ style > </ head > < body > < div id = "container" > < h1 id = "heading1" > Welcome to w3wiki </ h1 > < select class = "courses" > < option value = "tag" >Choose Course</ option > < option value = "Option A" >Python</ option > < option value = "Option B" >DSA</ option > < option value = "Option C" >C++</ option > < option value = "Option C" >Java</ option > </ select > </ div > </ body > </ html > |
Output: The first option “Choose Course” is pre-selected by default. But this is just not limited, we can also specify that any other option should be pre-selected when the page loads in HTML5. This can be done using the “selected” attribute. This is demonstrated in the following example.
Example 2: The following example demonstrates pre-selecting some other option using the selected attribute.
HTML
<!DOCTYPE html> < html > < head > < title >Page Title</ title > < style > #container { margin: 0 auto; height: 300px; width: 650px; border: 5px solid black; background-color: rgb(104, 241, 104); opacity: 0.5; display: flex; flex-direction: column; justify-content: center; align-items: center; } .courses { height: 60px; width: 130px; border: 2px solid black; font-family: cursive; } </ style > </ head > < body > < div id = "container" > < h1 id = "heading1" > Welcome to w3wiki </ h1 > < select class = "courses" > < option value = "tag" >Choose Course</ option > < option value = "Option A" >Python</ option > < option value = "Option B" selected>DSA</ option > < option value = "Option C" >C++</ option > < option value = "Option C" >Java</ option > </ select > </ div > </ body > </ html > |
Output: The third option “DSA” is pre-selected. This is due to the use of the “selected” attribute that has been specified in the option tag of “DSA”. We can pre-select any option by just specifying the selected attribute in its respective option tag.