Form

Username input

Published on

Description

The username input is a Text input with autocomplete="username". Use it for the account identifier in sign in and sign up forms, so password managers pair it with the password field.

If people sign in with an email address, use the Email input with autocomplete="username" instead.

Example

Open in new tab
View HTML markup 
<form method="POST" novalidate="">
  <div><label for="username"> Username</label> <span id="username-hint">The name you sign in with</span> <input value="" id="username" name="username" dir="auto" autocapitalize="off" autocomplete="username" autocorrect="off" spellcheck="false" type="text" aria-describedby="username-hint" /> </div> <button type="button">Submit</button>
  <p>Need help? <a href="/form/input-username" target="_top">View our guidance</a></p>
</form>

Accessibility

  • Use explicit <label for="id"> association with clear label text.
  • autocomplete="username" identifies the input purpose and lets password managers fill it.

References

Variables

  • None for input