HTML autocapitalize Global Attribute

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The autocapitalize attribute is a global HTML attribute that allows developers to control how text input should be automatically capitalized by the browser or user agent. It is particularly useful for devices with virtual keyboards, such as smartphones and tablets, where automatic capitalization can improve the typing experience. By specifying this attribute, developers can guide users to enter text in a format that matches the context of the input field, such as capitalizing the first letter of each sentence, each word, or even every character. This ensures consistency in data entry and can help reduce the need for manual corrections or additional formatting later.

In addition to enhancing user experience, autocapitalize is valuable for accessibility and form usability. For instance, fields like names, addresses, titles, or codes often require specific capitalization, and setting this attribute helps users input data correctly without having to manually adjust capitalization. While the attribute does not enforce capitalization on the submitted data, it provides a visual cue and behavior that align with user expectations and the intended use of the input field. This makes forms feel more intuitive and responsive, particularly on mobile devices where typing efficiency is important.

Usage

This attribute can be applied to any HTML element that accepts text input, such as <input>, <textarea>, or contenteditable elements (<div contenteditable>). While it does not change the underlying value of the input, it influences how the keyboard behaves and how text appears as the user types.

Key Notes

autocapitalize does not modify text programmatically; it only affects user input behavior.
Especially useful on mobile devices where virtual keyboards can automatically capitalize text based on the attribute value.
It complements other input-related attributes like inputmode and spellcheck.

Syntax

<tag autocapitalize="value">

Values

offDisables automatic capitalization. Text is typed exactly as entered by the user.
noneSynonym for off. No automatic capitalization occurs.
onEnables the browser to automatically capitalize text. Usually applies sentence-style capitalization (first letter of a sentence).
sentencesAutomatically capitalizes the first letter of each sentence. (default behavior if omitted in most browsers)
wordsAutomatically capitalizes the first letter of each word. Useful for proper names, titles, or headings.
charactersAutomatically capitalizes every character typed. Useful for codes, acronyms, or serial numbers.

Example

HTML

<form>

  <!-- Capitalize the first letter of each sentence -->

  <label for="sentence">Sentence-style:</label>

  <input type="text" id="sentence" autocapitalize="sentences">

<br><br>

  <!-- Capitalize the first letter of each word -->

  <label for="words">Word-style:</label>

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

<br><br>

  <!-- Capitalize all characters -->

  <label for="chars">All characters:</label>

  <input type="text" id="chars" autocapitalize="characters">

<br><br>

  <!-- Disable autocapitalize -->

  <label for="none">No capitalization:</label>

  <input type="text" id="none" autocapitalize="off">

</form>

Result

Editor

Browser Support

The following information will show you the current browser support for the HTML autocapitalize global attribute. Hover over a browser icon to see the version that first introduced support for this HTML global attribute.