Deactivate automatic capitalization

Most browser automatically capitalize text input elements, which is convenient most of the time.

This can create problems when case matters, such as password fields, validation codes, or other values.

Use the autocapitalize attribute to deactivate (or disable) automatic capitalization.

Here’s an example:

<label for="example">Enter a lowercase value:</label>
<input
   type="text"
   id="example"
   name="example"
   autocapitalize="false"
>

According to Can I Use?, the default behavior varies according to the browser and the device. When creating web apps for use on desktop and mobile devices, use care to verify consistent behavior using real world values on a variety of devices.

In particular, note that mobile browsers sometimes behave differently than their desktop counterparts.

This behavior was originally noticed while testing a project where iOS devices behaved differently than desktop browsers. Explicitly setting the autocomplete attribute resolved the issue.

Vital statistics

• 12 Sep 2024: First post for this site