Kermode

/ˈkɜːrmoʊd/
The Spirit Bear

Written by Gray Gilmore

I make websites for a living. I love CSS and building simple and modular stylesheets. Somewhere along the way I also turned into a Ruby developer. Life comes at you fast I guess. You can read my resume to learn about my journey so far.

You can find me as @graygilmore on several platforms:

Good ol' fashion email works, too: hello@kermode.co

You can subscribe to this blog via RSS: XML, JSON

Disable Auto Capitalization on Text Inputs

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" />