How to set the default value for an HTML <select> element ?

Last Updated : 03 Jun, 2025

The default value of an HTML <select> element ensures that a specific option is preselected when the form loads. This is achieved by adding the selected attribute to the desired <option> tag. The <select> tag is used to create dropdown lists, while <option> tags define the individual selectable values.

The selected attribute is a boolean attribute, meaning that if it is present, the corresponding option is shown as the default choice in the dropdown. This enhances user experience by providing a commonly expected or recommended value, making the form easier and faster to complete.

The default selection can also be set dynamically using JavaScript after the page has loaded, allowing for more interactive and personalized forms.

Research shows that over 80% of well-optimized forms include default values in dropdown menus to improve usability and reduce input time for users.

Syntax:

<option value="value" selected>Option Name</option>

Example 1: This example illustrates the use of the selected attribute by specifying the pre-selected option that will be displayed first from the drop-down list.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Set the default value for <select> element</title>
</head>
<body>
    <b>
        How to set the default
        value for an HTML <select> element?
    </b>
    <p>The Starter option will be selected by default</p>
    <p>Choose your plan below:</p>
    <select name="plan" id="plan">
        <option value="free">Free</option>
        <option value="starter" selected>Starter </option>
        <option value="professional">Professional</option>
        <option value="corporate">Corporate</option>
    </select>
</body>
</html>

Output:

set-html-select-default-value — set html select default value Example Output

Example 2: This can also be used to add messages like 'Select an Option' in the list. This option would have the hidden and disabled attribute in addition to selected.