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, recovery codes, or other values.

Use the autocapitalize attribute to deactivate (or disable) automatic capitalization for a specific field.

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, it’s best to test real world value on a variety 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 exhibited different behavior than was seen on laptops. Explicitly setting the autocomplete attribute resolved the issue.

Vital statistics

• 12 Sep 2024: First post for this site