Autocapitalize

What is Autocapitalize?

The autocapitalize attribute is a global HTML attribute that controls whether and how text entered by users is automatically capitalized on virtual keyboards. Originally introduced by Apple in iOS 5 for HTMLInputElement and HTMLTextAreaElement, the attribute has since been adopted by Chrome, Firefox, and other browsers, making it a reliable tool for controlling input behavior across platforms.

Unlike form validation or input masking, autocapitalize does not prevent users from entering text in any format they choose. Instead, it provides a hint to the virtual keyboard about the expected capitalization pattern, allowing users to type more efficiently while maintaining their ability to override the automatic behavior when needed. This makes it a user-friendly enhancement rather than a restrictive control.

First, autocapitalize is an enumerated attribute, meaning it accepts a specific set of predefined values rather than arbitrary text. The attribute can be applied to any HTML element, though it only has a practical effect on input elements, textarea elements, and elements with the contenteditable attribute set. When applied to other elements, the attribute is ignored by browsers.

Second, autocapitalize only affects virtual keyboards and alternative input methods such as voice input. Typing on a physical keyboard bypasses autocapitalize entirely, which is important for accessibility and testing. This design decision ensures that desktop users are not unexpectedly affected by mobile-focused input behavior.

Third, the attribute can be set declaratively through HTML markup or programmatically through JavaScript. The HTMLElement.autocapitalize property reflects the HTML attribute value, allowing developers to read and modify the behavior dynamically. This JavaScript API was standardized as part of the HTML Living Standard and is available in all modern browsers.

For developers building mobile-optimized web forms, understanding how autocapitalize interacts with other input attributes like inputmode and autocorrect is essential for creating seamless user experiences. Combined with proper HTML form validation, these attributes work together to guide users through form completion while respecting their input preferences.

Key Characteristics

• Enumerated Attribute: Accepts specific predefined values rather than arbitrary text
• Virtual Keyboard Only: Does not affect physical keyboard input
• Global Attribute: Can be applied to any HTML element
• JavaScript Access: HTMLElement.autocapitalize property reflects the HTML attribute

Browser Support

The autocapitalize attribute is supported in:

• Chrome and Chromium-based browsers (version 43+)
• Firefox (all modern versions)
• Safari on iOS (where it originated)
• Safari on macOS (with varying support levels)

Implementation Patterns

HTML Implementation

The autocapitalize attribute can be added to any input element to control its capitalization behavior. Here are practical examples for each value:

<!-- Disable all automatic capitalization -->
<input type="text" autocapitalize="none" placeholder="Username">
<input type="search" autocapitalize="off" placeholder="Search...">

<!-- Capitalize first letter of each sentence -->
<textarea autocapitalize="sentences" placeholder="Write your message..."></textarea>

<!-- Capitalize first letter of each word -->
<input type="text" autocapitalize="words" placeholder="Full Name">
<input type="text" autocapitalize="words" placeholder="Company Name">

<!-- Capitalize every character -->
<input type="text" autocapitalize="characters" placeholder="Postal Code">

Form-Level Control

<form autocapitalize="sentences">
 <textarea name="bio"></textarea>
 <input type="text" name="username" autocapitalize="none">
</form>

Setting autocapitalize at the form level establishes a default behavior for all inputs within that form. Individual inputs can override this with their own values, providing flexibility while maintaining semantic clarity. This approach is particularly useful when designing consistent form layouts across your application.

ContentEditable Integration

<div contenteditable="true"
 autocapitalize="sentences"
 role="textbox"
 aria-multiline="true"
 aria-label="Bio">
</div>

Contenteditable elements can also use autocapitalize to control input behavior in rich text contexts. When implementing this, consider combining it with spellcheck and autocorrect for a comprehensive input experience. For developers building custom form components, these attributes work together to create intuitive input experiences.

JavaScript Control

// Read the current autocapitalize setting
const inputElement = document.getElementById('username');
const currentSetting = inputElement.autocapitalize;
console.log('Current autocapitalize:', currentSetting);

// Set autocapitalize programmatically
const textarea = document.getElementById('comment');
textarea.autocapitalize = 'sentences';

// Toggle based on user preference
const toggle = document.getElementById('auto-capitalize');
toggle.addEventListener('change', (e) => {
 const inputs = document.querySelectorAll('input[type="text"]');
 inputs.forEach(input => {
 input.autocapitalize = e.target.checked ? 'sentences' : 'none';
 });
});

The HTMLElement.autocapitalize property provides JavaScript access to the autocapitalize behavior, allowing developers to read the current value and modify it dynamically based on application state or user preferences. This JavaScript API integrates well with interactive form validation patterns.

Best Practices

1. Always set autocapitalize explicitly rather than relying on browser defaults for consistent cross-browser behavior

2. Match the value to content type - words for names, sentences for prose, none for identifiers and search

3. Never use to enforce validation - allow users to override capitalization when needed

4. Test across devices and browsers - behavior may vary slightly between browsers

5. Combine with related attributes - use alongside inputmode, autocorrect, and spellcheck for optimal input experience

6. Document in design systems - maintain consistency across forms and applications

Related Attributes

The autocapitalize attribute works alongside other input optimization attributes:

• inputmode: Controls the type of keyboard displayed (numeric, email, url, etc.)
• autocorrect: Controls automatic spelling corrections on iOS
• spellcheck: Enables browser spell checking

<!-- Combined attributes for optimal input experience -->
<input type="email"
 autocapitalize="none"
 autocorrect="off"
 inputmode="email"
 placeholder="[email protected]">

<textarea autocapitalize="sentences"
 autocorrect="on"
 spellcheck="true"
 placeholder="Write your story...">

For comprehensive form optimization strategies, combining these attributes ensures your forms provide the best possible user experience across all devices and platforms.

Sources

1. MDN Web Docs: autocapitalize global attribute - Official web platform documentation covering all attribute values and browser behavior

2. MDN Web Docs: HTMLElement autocapitalize property - JavaScript property reference with code examples

3. Chrome for Developers: autocapitalize - Original feature announcement with practical use cases and implementation guidance