How Can I Set the Default Value for an HTML <select> Element?

In web development, while making a form, we need different components, such as input fields, buttons, radio buttons, checklists, and many more. The drop-down menu is one such component that is added in a form to select an option from a list of menus. This can be made on a web page using an HTML <select> element consisting of several options specified within the HTML <option> element.

This study will demonstrate the method to set a default value for an HTML <select> element.

How to Specify Default Value for HTML <select> Element?

Sometimes, the “selected” attribute must be added for setting a default option. Within the drop-down list, the option with the selected attribute will be shown by default.

The syntax below displays how to make an option a default value:

Check out the example below for the demonstration!

Example: Setting Default Value for HTML <select> Element

In HTML, first, add a div element with the class name “content”. Inside this element:

• Add a heading element <h1>.
• Then, add the <p> element with some content. The <strong> element within the <p> element is utilized to make the text bold.
• Include the HTML “<select>” element with the attributes name and id.
• As we have discussed above, the select element contains the available options within the drop-down menu. These options are specified with the HTML “<option>” element.

So, look at the below-given code snippet where the second option is specified with the attribute “selected” to define it as the default value:

In this case, “Technical Author” will be selected and displayed as the default option:

Let’s head over to the CSS section, where we will use different CSS styling properties to style the HTML elements.

Style “content” div

The “.content” is utilized to access the HTML div element with the class content. The explanation of the above-mentioned CSS properties is listed below:

• “width” property adjusts the element’s width.
• “height” property determines the element’s height.
• “border” property specifies the border around the element. The value specifies the border width, border style, and border color.
• “margin” property specifies the amount of space around the element.
• “background-color” specifies the element’s background color.
• “padding” is utilized to increase space around the element’s content.
• “border-radius” is the property that makes the element’s corners round.

Style “p” Element

The <p> element of the div content is styled with the following properties:

• “font-size” sets the element’s font size.
• “color” property adjusts the element’s font color.

Style “select” Element

The select element is applied with the following properties:

• “outline” property specifies a border or outline around the element, mainly when it is selected.
• The “padding”, “border-radius”, and “font-size” properties perform functions as stated above.

Style “h1” Element

The <h1> element is decorated with the following properties:

• “text-align” property adjusts the element’s text alignment.
• “font-size” and “color” properties styled the element in a way as stated above.

The below GIF displays the final result of the code:

This is how you can set the default value for an HTML <select> element.

Conclusion

The HTML <select> element comprises several menus that are selectable. These menus are specified within the HTML <option> element. To set the default value for an HTML <select> element, it is required to specify the attribute “selected” for that option. This study has described the HTML <select> element and the method to set its default value with a practical example.