Form

Date input

Published on

Description

The date input provides a native date picker for selecting calendar dates. It uses type="date" which renders a platform-appropriate date picker widget.

Example

Open in new tab
View HTML markup 
  <form method="POST" novalidate="">
  <div><label for="date">
      <hgroup>
        <h1>Date of your last adventure</h1>
      </hgroup>
    </label> <input value="" id="date" name="date" type="date" /> </div> <button type="button">Submit</button>
  <p>Need help? <a href="/form/input-date" target="_top">View our guidance </a></p>
</form>

Accessibility

  • Use explicit <label for="id"> association.
  • Use autocomplete="bday" or the appropriate token for the date type.
  • Provide min and max attributes to constrain the valid range.
  • Provide hint text describing the expected format via aria-describedby.

References

Variables

None for input