# The “name” attribute on the “option” element is obsolete. Use the “id” attribute instead.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-name-attribute-on-the-option-element-is-obsolete-use-the-id-attribute-instead
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `name` attribute was historically used on `<option>` elements in older HTML specifications, but it has been obsolete since HTML5. The WHATWG HTML Living Standard does not list `name` as a valid attribute for `<option>`. The valid attributes for `<option>` are `disabled`, `label`, `selected`, and `value`, in addition to the global attributes (such as `id`, `class`, `style`, etc.).

It's important to understand that the `name` attribute on `<option>` never served the same purpose as `name` on `<input>` or `<select>`. For form submission, the browser sends the `name` from the parent `<select>` element paired with the `value` of the selected `<option>`. Putting `name` on individual `<option>` elements has no effect on form data and can mislead developers into thinking it influences form behavior.

Removing the obsolete `name` attribute ensures your HTML is standards-compliant, avoids confusion for developers maintaining the code, and prevents potential issues with future browser behavior. If you need to reference a specific `<option>` in JavaScript or CSS, use the `id` global attribute instead.

## Examples

### Incorrect: using the obsolete `name` attribute

```html
<select id="pet-select" name="pet">
  <option value="">--Please choose an option--</option>
  <option name="dog-option" value="dog">Dog</option>
  <option name="cat-option" value="cat">Cat</option>
  <option name="hamster-option" value="hamster">Hamster</option>
</select>
```

This triggers the validation error because `name` is not a valid attribute on `<option>`.

### Correct: using `id` instead of `name`

If you need to uniquely identify each option (for example, to target them with JavaScript or CSS), use the `id` attribute:

```html
<select id="pet-select" name="pet">
  <option value="">--Please choose an option--</option>
  <option id="dog-option" value="dog">Dog</option>
  <option id="cat-option" value="cat">Cat</option>
  <option id="hamster-option" value="hamster">Hamster</option>
</select>
```

### Correct: simply removing `name` if no reference is needed

In most cases, you don't need to identify individual options at all. The `value` attribute is sufficient for form submission, and you can remove `name` entirely:

```html
<select id="pet-select" name="pet">
  <option value="">--Please choose an option--</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster">Hamster</option>
</select>
```

Note that the `name` attribute on the `<select>` element itself is perfectly valid and necessary — it defines the key used when the form data is submitted. The obsolete attribute warning applies only to `name` on `<option>` elements.