How to Add Automatic Capitalization to Input Elements

Ferenc Almasi • 2020 September 15 • 📖 1 min read

Did you know that you can help out formatting text inputs for mobile users with the autocapitalize attribute?

Note that this won't work for the listed attribute types nor for physical keyboards. Only for virtual ones, such as mobile devices or voice input.

<!-- Autocapitalize text inputs on mobile with the autocapitalize attribute -->

<!-- Capitalize words after a period. -->
<input type=”text” autocapitalize="sentences" />

<!-- Capitalize Each And Every Word. -->
<input type="text" autocapitalize="words" />

<!-- CAPITALIZE ALL CHARACTERS. -->
<input type="text" autocapitalize="characters" />

<!-- 
 Note that this won’t work for the following input
 types:
 * url
 * email
 * password
-->

autocapitalize.html

Copied to clipboard!

It can take the following attributes:

sentences: Automatically turn each first letter of each sentence to uppercase.
words: All words first letter should be capitalized.
characters: All letters should be written with uppercase.

Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.

Resources:

The global autocapitalize attribute in HTML

Tired of looking for tutorials?

You are not alone. Webtips has more than 400 tutorials which would take roughly 75 hours to read.

Check out our interactive course to master JavaScript in less time.

Learn More

How to Add Automatic Capitalization to Input Elements

Resources:

Want to get webtips to your mailbox? 📬

Tired of looking for tutorials?

Recommended

How to Make a Download Button in HTML

How to Change Caret Color in CSS

How to Add Keyboard Shortcut to Elements in HTML