In an HTML <select>, what value does a chosen <option> submit, and how do you control which option is selected when the page first loads?

## What a select is made of `<select>` is a control whose choices are its `<option>` children, optionally clustered inside `<optgroup>` elements. The `name` lives on the `<select>`, not on the options — the options only supply the value: ```html <label for="fruit">Fruit</label> <select id="fruit" name="fruit"> <option value="">Choose one…</option> <optgroup label="Citrus"> <option value="orange">Orange</option> <option value="lime">Lime</option> </optgroup> <optgroup label="Berries"> <option value="fig" selected>Fig</option> </optgroup> </select> ``` ## Where the submitted value comes from An option's value is its `value` attribute if the attribute is present, and otherwise the option's text content (whitespace stripped and collapsed). Both of these are legal: ```html <option value="gb">United Kingdom</option> <option>United Kingdom</option> ``` The first sends `gb`; the second sends `United Kingdom`. Relying on text content is fragile — a copy edit or a translation silently changes the value your server receives — so give every option an explicit `value` unless the visible text *is* the data. There is a third, separate attribute: `label` on an `<option>` overrides the text the browser displays. It changes presentation, not the submitted value. A `disabled` option cannot be chosen at all, so it never contributes a value. `disabled` on an `<optgroup>` disables all of its options at once. ## Which option starts selected Mark one option `selected`. That attribute is the *initial* state, which is also what a form reset restores; the current selection afterwards lives in the DOM, not in the attribute. If you mark none, a dropdown (no `multiple`, no `size` above 1) still has a selection — the browser selects the first option in document order that is not disabled. This surprises people who expect an "empty" select. It is why the placeholder pattern is written as a genuine first option: ```html <select name="plan" required> <option value="" selected disabled>Choose a plan…</option> <option value="free">Free</option> <option value="pro">Pro</option> </select> ``` The empty `value` is what makes that placeholder distinguishable from a real answer on the server, and it is also what a `required` select treats as "nothing chosen". Note that `<select value="pro">` does nothing. There is no `value` content attribute on `<select>`; only the DOM property `select.value` exists, and setting it selects the option whose value matches. ## Grouping, size, and multiple `<optgroup>` needs its `label` attribute — that string is the group heading, it is not selectable, and assistive technology announces it as the group a focused option belongs to. Groups do not nest; an `<optgroup>` inside an `<optgroup>` is invalid and browsers will not render nested levels. `size` sets how many rows are visible. `size="1"` (the default for a plain select) is the familiar dropdown; a larger `size` renders a scrolling list box that is always expanded. `multiple` turns the control into a multi-select list box, rendered with several visible rows even without `size`. Two consequences matter. First, selection requires modifier-clicking or shift-clicking on desktop, which many users never discover — a group of checkboxes is usually the kinder control. Second, each selected option contributes its own entry under the same `name`, and a multi-select with nothing selected contributes nothing at all, so server code must handle both "a list" and "absent". ## The bugs that actually ship - Options with no `value` whose text later changes, silently changing the data. - A placeholder written as text on the select instead of a first `<option>`, so there is no way to represent "not answered". - Assuming an untouched dropdown submits nothing — it submits its first non-disabled option. - Reaching for a styled `<div>` list because the native dropdown is hard to style. You lose keyboard type-ahead, mobile's native picker, and form participation; if the design truly demands it, that is a full combobox implementation, not a styling exercise.