![Paul Kinlan](https://web.dev/images/authors/paulkinlan.jpg) Paul Kinlan [X](https://twitter.com/paul_kinlan) [GitHub](https://github.com/PaulKinlan) [LinkedIn](https://www.linkedin.com/in/paulkinlan) [Mastodon](https://status.kinlan.me/@paul) [Bluesky](https://bsky.app/profile/paul.kinlan.me) [Homepage](https://paul.kinlan.me/)

<br />

This may look like the most unimpressive feature in existence, but I think it is important because everyone dislikes typing on mobile: You hate it, I loathe it. In Chrome for Android (prior to Chrome 43 - Beta as of April 2015) a developer has little control over how the browser can help the user enter text. If you are typing on a device today, it might look like:

Notice everything is in lowercase apart from some values that Android recognized was a name.

Apple introduced an attribute on `HTMLInputElement` and
`HTMLTextAreaElement` called [autocapitalize](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-autocapitalize) [in iOS 5](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-autocapitalize)
and it allows the page author to hint at how the browser should present the
virtual keyboard for a user to optimize text entry for the user. In its
simplest form, you could indicate that a text box should automatically
capitalize the first letter of every new sentence.

From Chrome 43, Chrome will support the *autocapitalize* attribute on both
`HTMLInputElement` and `HTMLTextAreaElement`, which will allow you to control
the autocapitalization behavior of the virtual keyboard and bring it inline
with Safari on iOS.

*autocapitalize* will only apply to `HTMLInputElement`s that have
the *type* attribute set to: `type="text"`, `type="search"`, `type="url"`, `type="tel"`,
`type="email"` or `type="password"`. The default is to **not** autocapitalize.

Here's a simple example letting you autocapitalize sentences in a text area:

```html
<textarea autocapitalize="sentences">
```

## What values can autocapitalize take?

The following table shows the different states that an input element can be in:

|   | State | Keywords |
|---|---|---|
| `<input>` `<input autocapitalize=off>` | No Capitalization | none \[default\] |
|   |   | off |
| `<input autocapitalize=characters>` | Characters Capitalization | characters |
| `<input autocapitalize=words>` | Words Capitalization | words |
| `<input autocapitalize=sentences>` | Sentences Capitalization | sentences |

For `HTMLInputElement`, the invalid value default is *Sentences Capitalization* if the type of the element is type=`text` or type=`search`. Otherwise, it is *No Capitalization*.

- `<input autocapitalize="simon">` would be a text field with *Sentences Capitalization*
- `<input type="email" autocapitalize="simon">` would be a text field with *No Capitalization*.
- `<input>` would be a text field with *No Capitalization*.

For `HTMLTextAreaElement`, the invalid value default is *Sentences
Capitalization*. This is a change from the default behavior.

- `<textarea autocapitalize="terry"></textarea>` would be a text area with *Sentences Capitalization*
- `<textarea></textarea>` would be a text area with *Sentence Capitalization*.
- `<textarea autocapitalize="none"></textarea>` would be a text area with *No Capitalization*.

For `HTMLFormElement` we have decided not to implement the attribute, because we've
found that it is rarely used on pages today, and when it is used, it is mostly
used to disable autocapitalization on the form entirely:

`<form autocapitalize=off><input></form>`

The above is odd, as the default state for `HTMLInputElement` is *No Capitalization*.

## Why are you using this over `inputmode`?

`inputmode` is meant to solve the same type of problem, among other things.
However, it has been lacking browser implementations - to the best of our
knowledge, only Firefox OS has an implementation and it is prefixed
(x-inputmode) - but it also has very little usage on the web. On the other hand,
`autocapitalize` is used across millions of pages on hundred of thousands of
websites already.

## When should I use this?

This isn't an exhaustive list of when you should use `autocapitalize`; however
there are a number of places where helping the user enter text provides great value:

- Use `autocapitalization=words` if you are
  - Expecting people's names (note: not all names follow this rule, but the majority of western names will capitalize automatically as expected)
  - Company names
  - Addresses
- Use `autocapitalization=characters` if you are expecting:
  - US states
  - UK postal codes
- Use `sentences` for input elements if you are expecting content that is entered in normal paragraph form - for example, a blog post.
- Use `none` on TextAreas if you are expecting content that should not be affected - for example, entering code.
- If you don't want hinting, don't add autocapitalize.

## Other interesting links

- [Original implementation proposal by Mounir Lamouri](https://github.com/mounirlamouri/html-autocapitalize/blob/master/proposal.md)