Disable Auto Capitalization on Text Inputs

Written on January 5, 2012

Text inputs that automatically capitalize the first letter when it’s not needed (e.g., username, password) are a huge pet peeve of mine. In some cases, this can actually be easily avoided by using proper input types (email, password). In other cases (username), you need to use a simple attribute. A common example:

<form>
  <input type="text" placeholder="Username" />
  <input type="password" placeholder="Password" />

  <input type="submit" value="Login" />
</form>

Using this form, a mobile user (on an iPhone, at least, I’m not sure about other devices) will have an auto-capitalized first letter for the username field. This is frustrating as the vast majority of users will not have a capitalized user name – that would just look plain weird.

Helping out your users is dead simple:

<input type="text" autocapitalize="off" placeholder="Username" />

That’s it! You can also disable auto-correct in a similar fashion:

<input type="text" autocorrect="off" placeholder="Username" />