autocapitalize
The HTML autocapitalize attribute controls whether a mobile keyboard automatically capitalizes the first letter of sentences, words, or characters.
What you will learn
- What part of text input
autocapitalizechanges - How to choose between
none,sentences,words, andcharacters - Why email addresses and code often need capitalization turned off
What does autocapitalize do?
autocapitalize is an input hint for virtual keyboards. It does not change the value by itself after submission; it asks the user agent to make typing more convenient.
<label>
Display name
<input type="text" name="display_name" autocapitalize="words">
</label>Values
none- Do not automatically capitalize text. A good choice for email addresses, usernames, and code-like values.
sentences- Capitalize the first letter of each sentence. This is often useful for prose.
words- Capitalize the first letter of each word, such as a person’s name or title.
characters- Suggest uppercase input for every character, such as a code that is conventionally uppercase.
Choose based on the data, not the screen
Use the value that matches what the user is entering. For an email field, combine an appropriate type="email" with autocapitalize="none". For a normal message, sentences may reduce extra taps.
<input type="email" name="email" autocapitalize="none" autocomplete="email">
<textarea name="message" autocapitalize="sentences"></textarea>Common mistakes
- Using
wordsfor an email address and making the user fix unwanted capitals. - Assuming the attribute validates or transforms the value on the server.
- Forgetting that keyboard behavior can vary by browser, device, and user settings.
- Using automatic capitalization where the entered value is case-sensitive.