autocapitalize
The autocapitalize global HTML attribute sets the virtual keyboard capitalization behavior for user input on an element, such as the first letter of sentences or all words. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The autocapitalize global HTML attribute sets the virtual keyboard capitalization behavior for user input on an element, such as the first letter of sentences or all words. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 43 | 79 | 111 | | 43 | 5 | |
| DOM API | ||||||
| The autocapitalize property of the HTMLElement interface represents the element's capitalization behavior for user input. It is available on all HTML elements, though it doesn't affect all of them, including: | 66 | 79 | 111 | | 66 | 10.3 |
- This browser only partially implements this feature
- This feature was removed in a later browser version (66)
- Supported on `HTMLInputElement` and `HTMLTextAreaElement` only.
- This browser only partially implements this feature
- This feature was removed in a later browser version (66)
- Supported on `HTMLInputElement` and `HTMLTextAreaElement` only.
- This browser only partially implements this feature
- This feature was removed in a later browser version (10.3)
- Supported on `HTMLFormElement`, `HTMLInputElement`, and `HTMLTextAreaElement` only.
Syntax
<input type="text" autocapitalize="words" placeholder="名前">
<input type="text" autocapitalize="none" placeholder="ユーザーID">
<textarea autocapitalize="sentences"></textarea>Live demo
Contact form input
Use different autocapitalize modes for names, messages, and reference codes.
Checkout fields
Choose modes that match given names, city names, and all-caps promo codes.
Prose versus codes
Turn autocapitalize off for handles or codes while keeping it on for natural language.
Use cases
Use autocapitalize
Use autocapitalize when standard HTML needs a more specific platform feature, semantic signal, or browser capability.
Handle edge cases
Apply autocapitalize to solve a focused requirement without redesigning the whole page architecture.
Cautions
- Test autocapitalize in your target browsers and input environments before depending on it as a primary behavior.
- Provide a fallback path or acceptable degradation strategy when support is still limited.
Accessibility
- Make sure autocapitalize supports the intended task without making the page harder to perceive, understand, or operate.
Related links
Powered by web-features