HTML5: Automatic Capitalization Using autocapitalize

Form entries on smartphones and tablets are not always a pleasant thing. Words are suggested by input assistances. Upper and lower case spelling can also be influenced or set. The HTML attribute autocapitalize allows you to define when words shall automatically be started with a capital letter and when they will be displayed in all caps for form input fields.

Making Characters, Words or Sentences Start With Capital Letters

The attribute autocapitalize knows three different forms of capitalization. The value characters makes every letter be written in caps. Every word starts with an upper case letter when using words and sentences will be started with a capital letter by sentences.

The attribute works for all „<input>“ and „<textarea>“ elements that require character input. „<input>“ elements that only expect numbers or time information, for example, naturally ignore the autocapitalize attribute.

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

When the attribute is not defined, the beginning of a sentence is written with a capital letter for all „<input>“ elements of the type „text“ and „search“ as well as for all „<textarea>“ elements.

<input type="text" />
<input type="search" />
<textarea></textarea>

There is no automatic capitalization for all other „<input>“ elements. You can turn off automatic capitalization by explicitly setting the value off. After that, no automatic correction of input letters will occur.

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

autocapitalize Used Correctly

You should consider very well whether to use the autocapitalize attribute. After all, the attribute alters the usual browser behavior for form input. You should only choose the value words when you’re expecting substantives only. This is the case when entering names – for example in fields that require the entry of a personal name or a company name.

characters most likely won’t be used that often. It should only be set when expecting all capital letters. This is the case for car license plates, for example. The display of other characters, like numbers, remain unaffected by the autocapitalize attribute anyway.

Finally, when it comes to entering longer texts, sentences could be used. Capitalization within a sentence needs to be done by the user.

Browser and Device Support

The autocapitalize attribute was introduced for iOS 5 and is also supported in Chrome from version 43. It will only be interpreted on mobile devices. Browser and desktop devices completely ignore the attribute. There is no automatic capitalization on there.

(dpe)

Photo by Christina Morillo on Pexels