HTML autocapitalize Attribute

Introduction

The autocapitalize attribute is a useful feature in HTML that allows developers to control the capitalization behavior of text inputs. This attribute is particularly beneficial for enhancing user experience by ensuring text inputs are automatically capitalized according to specified rules, which can be especially helpful for mobile and touchscreen devices.

What You’ll Learn

Purpose of autocapitalize Attribute

The primary purpose of the autocapitalize attribute is to manage how text entered into an input field is capitalized. This attribute can be applied to <input> and <textarea> elements, ensuring consistent text formatting hints for virtual keyboards without requiring additional user effort.

📝 Syntax

Add autocapitalize to an <input> or <textarea> with a keyword value:

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

Syntax Rules

• Used on text-editable form controls: input and textarea.
• Value is a keyword: none, sentences, words, or characters.
• Does not change stored value—only keyboard capitalization behavior.
• Often combined with appropriate type (e.g. type="email" with autocapitalize="none").

💎 Values

The autocapitalize attribute accepts several values, each defining a different capitalization behavior:

• none — No automatic capitalization. All characters are input as typed by the user.
• sentences — Capitalizes the first character of each sentence. Useful for bios and paragraphs.
• words — Capitalizes the first character of each word. Ideal for names and titles.
• characters — Capitalizes all characters. Useful for access codes and acronyms.

<input autocapitalize="none">
<input autocapitalize="sentences">
<input autocapitalize="words">
<input autocapitalize="characters">

Applicable Elements

Examples Gallery

Form with multiple values, dynamic JavaScript, and none for email fields.

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

  <label for="bio">Bio:</label>
  <textarea id="bio" name="bio" autocapitalize="sentences"></textarea>

  <label for="code">Access Code:</label>
  <input type="text" id="code" name="code" autocapitalize="characters">

  <input type="submit" value="Submit">
</form>

<input type="text" id="dynamicField">

<script>
  document.getElementById("dynamicField").setAttribute("autocapitalize", "words");
</script>

<input type="email" autocapitalize="none" placeholder="user@example.com">

♿ Accessibility

• Reduce typing friction — Proper capitalization hints help users enter names and sentences faster on mobile.
• Do not rely on it for validation — Users can still enter lowercase text; validate on the server if case matters.
• Pair with clear labels — Tell users what format is expected (e.g. “Access code in uppercase”).
• Use none for technical fields — Email and code fields should not force sentence case.

💡 Best Practices