HTML Guide for input

input elements can be of different types but zip is not one of the allowed. Consider using a generic type like text instead.

The aria-hidden attribute is redundat on an input of type hidden, so it should be removed.

Example:

<!-- Instead of this... -->

<input type="hidden" aria-hidden="true" id="month" value="10" />

<!-- You can just use this -->

<input type="hidden" id="month"  value="10" />

The button role is used to make an element appear as a button control to a screen reader and can be applied to otherwise non-interactive elements like <div>. If you’re already using an <input> element whose type is submit, then it’s redundant to apply it the role button, as that’s implicit.

<!-- Instead of this -->

<input type="submit" role="button">Buy</button>

<!-- Do this -->

<input type="submit">Buy</button>

An element with role=button can’t have an input element as descendant.

The ARIA role button can be added to an element to make it behave like a <button> – just like a <button> is not allowed to contain other <input> elements as descendants, any element with this role is not allowed to contain them either.

All these examples in the following code will raise a similar issue:

<div role="button">
  <input type="checkbox" />
</div>

<button>
  <input type="checkbox" />
</button>

<a>
  <input type="checkbox" />
</a>

An <input> tag can’t be used inside an <a> tag.

An input element cannot be placed inside a button element because the HTML standard prohibits interactive content as descendants of a button.

According to the HTML specification, interactive content (like input, button, select, etc.) must not be nested inside button elements. This restriction exists to prevent invalid or unpredictable behavior in user interfaces. For accessible and valid markup, each form control should be a separate, direct child of its container, not nested inside another interactive element.

Example of invalid HTML

<button>
  Submit
  <input type="text" name="example">
</button>

Correct HTML structure

<form>
  <input type="text" name="example">
  <button type="submit">Submit</button>
</form>

Always ensure that form elements such as input and button are not nested within each other. Keep them as siblings within a form or appropriate container.