Inspect the working example
The single-select control is required. Its first selected option is a prompt with value="". Markup and Layout are real choices with nonempty values. You can inspect validity without submitting a form or making a network request.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| Initial prompt | Read select.value and validity.valueMissing | Empty value; valueMissing=true |
| Choose Markup | Select value html | value=html; validity.valid=true |
| Choose Layout | Select value css | value=css; validity.valid=true |
Follow the browser mechanism
For this required, single-line, non-multiple select, the first direct option with an empty value serves as its placeholder label option. Selecting that prompt leaves the control missing a value. A nonempty real choice clears that missing-value state. Native popup appearance remains browser and operating-system dependent.
A nonempty prompt is accepted as a value
The prompt below is assigned value="choose". Its wording still asks for a topic, but the control has a nonempty selected value.
<label for="topic">Workshop topic</label><select id="topic" required><option value="choose" selected>Choose a topic</option><option value="html">Markup</option></select>The counterexample reports valueMissing=false and valid=true while the prompt is selected. The working prompt correctly reports a missing value.
Try the repair
A third real choice is named “No preference”. Can it have an empty value if it is intended as a completed answer?
Show the worked answer
Give it a distinct nonempty value such as any. Keep the empty value for the unchosen prompt in this fixture. The label alone cannot distinguish those two intentions for native validity.
- Inspect validity before and after a real selection.
- Test values and labels, not an assumed identical operating-system menu.