autocapitalize

The autocapitalize attribute in HTML manages the automatic capitalization of text input on mobile devices.

autocapitalize attribute

The autocapitalize attribute controls automatic capitalization for text input, affecting virtual keyboards and voice input. It applies to <input>, <textarea>, and elements with contenteditable.

Syntax

index.html

<element autocapitalize="none|sentences|words|characters">
  <!-- Content -->
</element>

Example

Form to test different autocapitalize settings:

This content is editable and has autocapitalize="characters" set on it

index.html

<p>Form to test different autocapitalize settings:</p>
<form>
  <div>
    <label for="default">Default: no autocapitalize set</label>
    <input type="text" id="default" name="default" />
  </div>
  <div>
    <label for="off">autocapitalize="off"</label>
    <input type="text" id="off" name="off" autocapitalize="off" />
  </div>
  <div>
    <label for="none">autocapitalize="none"</label>
    <input type="text" id="none" name="none" autocapitalize="none" />
  </div>
  <div>
    <label for="on">autocapitalize="on"</label>
    <input type="text" id="on" name="on" autocapitalize="on" />
  </div>
  <div>
    <label for="sentences">autocapitalize="sentences"</label>
    <input
      type="text"
      id="sentences"
      name="sentences"
      autocapitalize="sentences" />
  </div>
  <div>
    <label for="words">autocapitalize="words"</label>
    <input type="text" id="words" name="words" autocapitalize="words" />
  </div>
  <div>
    <label for="characters">autocapitalize="characters"</label>
    <input
      type="text"
      id="characters"
      name="characters"
      autocapitalize="characters" />
  </div>
  <div>
    <label for="characters-ta">autocapitalize="characters" on textarea</label>
    <textarea
      type="text"
      id="characters-ta"
      name="characters-ta"
      autocapitalize="characters">
    </textarea>
  </div>
</form>
<hr />
<p contenteditable autocapitalize="characters">
  This content is editable and has autocapitalize="characters" set on it
</p>

Test using virtual keyboards or voice input to observe effects.

Can be set on <input>, <textarea>, or their parent <form> elements, but does not apply to url, email, or password input types; default behavior varies by browser.

Values

none/off: No automatic capitalization.
sentences/on: Capitalizes the first letter of each sentence.
words: Capitalizes the first letter of each word.
characters: Capitalizes every character.

Conclusion

The autocapitalize attribute offers a simple way to control text capitalization in forms and editable content. It enhances the user experience, especially on mobile devices, by automatically adjusting text input. Its values—none, sentences, words, and characters—provide flexibility for different typing preferences.

alt

The alt attribute in HTML offers alternative text for images, enhancing web accessibility and boosting SEO. It describes images for users with visual impairments and is displayed when images fail to load.

autocomplete

The autocomplete attribute in HTML enables input fields to suggest previously entered values, streamlining the form-filling process.