Form

Name input

Published on

Description

The name input captures a person's name. Use autocomplete values like given-name, family-name, or name to enable browser autofill.

Example

Open in new tab
View HTML markup 
  <form method="POST" novalidate="">
  <div><label for="name">
      <hgroup>
        <h1>Name</h1>
      </hgroup>
    </label> <span id="name-hint">How we should refer to you</span> <input value="" id="name" name="name" dir="auto" autocapitalize="off" autocomplete="nickname" autocorrect="off" spellcheck="false" type="text" aria-describedby="name-hint" /> </div> <button type="button">Submit</button>
  <p>Need help? <a href="/form/input-name" target="_top">View our guidance </a></p>
</form>

Accessibility

  • Use explicit <label for="id"> association with clear label text.
  • Use appropriate autocomplete values (name, given-name, family-name, additional-name, honorific-prefix, honorific-suffix).
  • Do not split name fields unnecessarily — a single "Full name" field is often more inclusive.

References

Variables

None for input