Use autocapitalize on inputs for better mobile experience
autocapitalize is an attribute of the input element that hints a mobile browser how it should handle capitalization.
For example, when you need your users to capitalize every word (like, for a name), you can use autocapitalize="words":
<input autocapitalize="words">
Or you might want all characters to be upper-cased, for example, for bank account details. Use autocapitalize="characters" in this case:
<input autocapitalize="characters">
You can use the following values:
- nothing: no hints, follow the default behavior
- "off": do not capitalize
- "sentences"
- "words"
- "characters"
You need to keep in mind two things when you use autocapitalize. First, it only works on mobile browsers, it has no effect on desktop ones. And second, it is only a hint, so don't rely on it. For example, don't assume the entered input is in upper-case even if you used autocapitalize="characters". Some users' browsers might disregard it entirely.