How to Select Default Value in HTML

This article shows how to make an option the initial choice in an HTML drop-down. Put the selected attribute on the intended <option> inside the <select>. You can write the attribute with an explicit value or use its Boolean form without a value. Both examples below use the same options and values, so you can compare the two forms directly.

Set a default option with selected="selected"

Write selected="selected" in the opening tag of the option that should be selected when the page first loads. The attribute belongs on <option>, not on <select> and not in a separate <selected> tag. In this example, the third option is initially selected, and its submitted value is 3.

The selected option stays in its original position in the list. Adding the attribute sets the initial selection; it does not move the option above the other choices. A person using the page can choose another option, which becomes the current selection.

The name attribute gives the control a form field name, and the selected option’s value supplies that field’s value when the form is submitted. The label is associated with the control through matching for and id values, so selecting a value remains understandable to people using assistive technology. If your page needs a different starting choice, move the selected attribute to that option.

The following HTML is a static markup example. It illustrates the page source and is not an execution result.

<label for="number">Choose a number:</label>
<select id="number" name="number">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3" selected="selected">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

This runnable JavaScript example models the option values from the markup and reports the value for the option marked as selected. The browser behavior itself is shown by the HTML examples above.

const options = [
  { value: "1", selected: false },
  { value: "2", selected: false },
  { value: "3", selected: true },
  { value: "4", selected: false },
  { value: "5", selected: false },
];

const initialValue = options.find((option) => option.selected).value;
console.log(initialValue);

3

Use the Boolean selected attribute

selected is a Boolean attribute: its presence marks the option as selected initially. In HTML, you can omit its value, as in selected, or write the explicit form selected="selected" shown above. The two spellings express the same choice here; the attribute name must remain selected.

In this matching example, the second option is the initial choice. Its value is 2, while the text shown to the reader is Two. Keeping a value on each option makes the form value clear and separate from the display label. If a form is submitted before the reader changes the choice, the selected option’s value is submitted.

Use this Boolean form when you want concise HTML. Add it inside the opening tag of exactly the option you want selected. Do not write <selected> after an option: that is not the attribute syntax. The option remains in its listed position, and the reader may still choose another value.

This is also a static markup example, not a runtime output listing.

<label for="number-short">Choose a number:</label>
<select id="number-short" name="number">
  <option value="1">One</option>
  <option value="2" selected>Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>