How to Add Automatic Capitalization to Input Elements

How to Add Automatic Capitalization to Input Elements

Ferenc Almasi β€’ 2020 September 15 β€’ πŸ“– 1 min read
  • twitter
  • facebook

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" />

<input type="text" autocapitalize="characters" />

 Note that this won’t work for the following input
 * url
 * email
 * password
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.
How to Add Automatic Capitalization to Input Elements
If you would like to see more Webtips, follow @flowforfrank
Looking to improve your skills? Check out our interactive course to master HTML from start to finish.
Master HTML


Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Unlimited access to hundreds of tutorials
  • check Access to exclusive interactive lessons
  • check Remove ads to learn without distractions
Become a Pro