# The first “option” element in a “select” element with a “required” attribute, and without a “multiple” attribute, and without a “size” attribute whose value is greater than “1”, must have either an empty “value” attribute, or must have no text content. Consider either adding a placeholder option label, or adding a “size” attribute with a value equal to the number of “option” elements.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-first-option-element-in-a-select-element-with-a-required-attribute-and-without-a-multiple-attribute-and-without-a-size-attribute-whose-value-is-greater-than-1-must-have-either-an-empty-value-attribute-or-must-have-no-text-content
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

A required `<select>` drop-down must start with a placeholder `<option>` whose value is empty, so the browser can tell when the user hasn't picked anything.

A `<select>` with no `multiple` attribute and no `size` greater than `1` renders as a drop-down, and the browser selects its first option by default. For `required` to block an untouched drop-down, that first option has to mean "no choice yet". HTML calls it the placeholder label option, and it only counts as one when its value is the empty string.

An option's value is its `value` attribute or, if it has none, its text. Both `<option value="none">Select a topic</option>` and `<option>Select a topic</option>` have a non-empty value, so the browser accepts the prompt as a real answer. The form submits even if the user never opens the drop-down, and the server receives `none` or `Select a topic` as the chosen topic.

Give the first option `value=""` and keep the prompt as its text. An empty `<option></option>` also passes this check, but the validator then asks for a `label` attribute, so a text prompt is simpler. If you want a list box that shows every option at once instead of a drop-down, set `size` to the number of options, and the validator stops asking for a placeholder.

## Invalid example

```html
<label for="topic">Topic</label>
<select id="topic" name="topic" required>
  <option value="none">Select a topic</option>
  <option value="billing">Billing</option>
  <option value="support">Technical support</option>
</select>
```

## Valid example

```html
<label for="topic">Topic</label>
<select id="topic" name="topic" required>
  <option value="">Select a topic</option>
  <option value="billing">Billing</option>
  <option value="support">Technical support</option>
</select>
```