html/required-select-placeholder

Why

A single-choice select always has a selected option; when the first real option is selected by default, required is already satisfied and the form submits whatever was preselected. People who did not notice the field send "Poland" or "Small" without choosing it, and the data is quietly wrong.

Fix

Make the first option a placeholder with an empty value: <option value="">Choose a country</option>. The HTML standard requires it on a required select with one visible row. Keep the label; the placeholder is not a label.

Examples

<!-- bad -->
<select id="country" name="country" required><option value="pl">Poland</option></select>
<!-- good -->
<select id="country" name="country" required><option value="">Choose a country</option><option value="pl">Poland</option></select>

Sources

• HTML Standard, the select element (placeholder label option)
• MDN, the select element

Read it in the terminal

npx github:dawidolko/frontend-skills explain html/required-select-placeholder