How to Add Automatic Capitalization to Input Elements

How to Add Automatic Capitalization to Input Elements

Ferenc Almasi β€’ 2020 September 15 β€’ Read time 1 min read
  • twitter
  • facebook
HTML

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.

Copied to clipboard! Playground
<!-- 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

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

Resources:

  • twitter
  • facebook
HTML
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.