HTML autocapitalize Attribute

HTML autocapitalize Attribute

The HTML autocapitalize attribute controls whether text entered or edited by a user should be automatically capitalized. It is a global attribute commonly used with text-entry controls to provide a capitalization hint for virtual keyboards and other input methods.

Syntax

The autocapitalize attribute is added to an element where the user can enter or edit text. Its value indicates the type of automatic capitalization that should be used.

<input type="text" autocapitalize="words">

For example, autocapitalize="words" requests automatic capitalization of the first letter of each word.

Attribute Values

The keywords off and on are also accepted. off behaves like none, while on behaves like sentences.

Elements That Use the autocapitalize Attribute

The autocapitalize attribute is a global attribute, so it can be specified on HTML elements. It is primarily useful on elements where the user can enter or edit text.

Using the autocapitalize Attribute

The appropriate value depends on the type of information the user is expected to enter. A person's name, for example, may benefit from automatically capitalizing the beginning of each word.

<label for="name">Name:</label>
<input type="text" id="name" name="name" autocapitalize="words">

For a longer text entry where complete sentences are expected, sentences may be more appropriate:

<label for="message">Message:</label>
<textarea id="message" name="message" autocapitalize="sentences"></textarea>

Input Types

The autocapitalize attribute is useful with text-entry controls, but it does not apply to every <input> type. Input types where capitalization is not appropriate, such as url, email, and password, do not support automatic capitalization.

<input type="text" autocapitalize="words">
<textarea autocapitalize="sentences"></textarea>

Choose the value according to the kind of text the user is expected to enter rather than applying the same capitalization behavior to every field.

autocapitalize vs. autocomplete

The autocapitalize and autocomplete attributes affect different aspects of text entry.

The two attributes can be used together when both behaviors are appropriate.

<input type="text" name="name"
       autocomplete="name"
       autocapitalize="words">

Common Mistakes

Do not use autocapitalize as a way to permanently change the capitalization of submitted text. It is an input hint and does not guarantee that the user's text will have a particular capitalization.

Do not confuse autocapitalize with CSS text-transform. CSS changes how text is visually displayed, while autocapitalize influences how text may be entered or edited.

<!-- Input capitalization hint -->
<input type="text" autocapitalize="words">

Do not rely on automatic capitalization when the exact case of entered data is important. Browser, device, keyboard, language, and user settings can affect the behavior.

Browser Support

Baseline: Limited availability indicates that a feature is not yet available in all core browsers. Use these features with caution because they may only work in select browsers, so additional compatibility checks may be needed before general use.

The autocapitalize global attribute has limited availability because support and behavior are not consistent across all current core browsers and platforms.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the autocapitalize Attribute

The example includes text fields using different autocapitalize values. On a device and input method that supports automatic capitalization, compare how text entry behaves in each field.

Summary

The HTML autocapitalize attribute provides a hint about how text entered or edited by the user should be automatically capitalized. Common values include none, sentences, words, and characters. The attribute is especially useful with text-entry controls, but its exact behavior can depend on the browser, device, input method, language, and user settings.