The autocapitalize Attribute

The `autocapitalize` Attribute

Global Attribute

The autocapitalize attribute controls whether and how text input is automatically capitalized on mobile devices and virtual keyboards. It’s particularly useful for improving the user experience when entering names, sentences, or other text that benefits from automatic capitalization.

Syntax

<element autocapitalize="value">Content</element>

Values

Value	Description	Use Case
`off` or `none`	No automatic capitalization	Usernames, email addresses, codes
`on` or `sentences`	Capitalize first letter of each sentence	Comments, messages, paragraphs
`words`	Capitalize first letter of each word	Names, titles, addresses
`characters`	Capitalize all characters	Acronyms, codes, license plates

Examples

Form Input Examples

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .form-container {
    max-width: 500px;
    padding: 20px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    margin: 20px;
  }
  .form-group {
    margin: 20px 0;
  }
  label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #1e293b;
  }
  .hint {
    font-size: 12px;
    color: #64748b;
    margin-top: 5px;
    font-style: italic;
  }
  input, textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
  }
  input:focus, textarea:focus {
    outline: none;
    border-color: #3b82f6;
  }
  .example-badge {
    display: inline-block;
    padding: 3px 8px;
    background: #f1f5f9;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
    margin-left: 8px;
  }
  .mobile-note {
    background: #fef3c7;
    border: 2px solid #f59e0b;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
  }
</style>
</head>
<body>
<div class="form-container">
  <div class="mobile-note">
    <strong>📱 Mobile Note:</strong> This attribute primarily affects mobile devices. Test on a phone or tablet for the best experience!
  </div>

  <h3>Registration Form</h3>

  <div class="form-group">
    <label>
      Full Name <span class="example-badge">autocapitalize="words"</span>
    </label>
    <input
      type="text"
      autocapitalize="words"
      placeholder="John Smith">
    <div class="hint">Each word is capitalized automatically</div>
  </div>

  <div class="form-group">
    <label>
      Email <span class="example-badge">autocapitalize="none"</span>
    </label>
    <input
      type="email"
      autocapitalize="none"
      placeholder="john@example.com">
    <div class="hint">No capitalization for email addresses</div>
  </div>

  <div class="form-group">
    <label>
      Username <span class="example-badge">autocapitalize="off"</span>
    </label>
    <input
      type="text"
      autocapitalize="off"
      placeholder="johnsmith123">
    <div class="hint">Usernames stay lowercase</div>
  </div>

  <div class="form-group">
    <label>
      Bio <span class="example-badge">autocapitalize="sentences"</span>
    </label>
    <textarea
      rows="4"
      autocapitalize="sentences"
      placeholder="Tell us about yourself..."></textarea>
    <div class="hint">First letter of each sentence capitalized</div>
  </div>

  <div class="form-group">
    <label>
      License Plate <span class="example-badge">autocapitalize="characters"</span>
    </label>
    <input
      type="text"
      autocapitalize="characters"
      placeholder="ABC123"
      maxlength="7">
    <div class="hint">All characters are capitalized</div>
  </div>
</div>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .form-container {
    max-width: 500px;
    padding: 20px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    margin: 20px;
  }
  .form-group {
    margin: 20px 0;
  }
  label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #1e293b;
  }
  .hint {
    font-size: 12px;
    color: #64748b;
    margin-top: 5px;
    font-style: italic;
  }
  input, textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
  }
  input:focus, textarea:focus {
    outline: none;
    border-color: #3b82f6;
  }
  .example-badge {
    display: inline-block;
    padding: 3px 8px;
    background: #f1f5f9;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
    margin-left: 8px;
  }
  .mobile-note {
    background: #fef3c7;
    border: 2px solid #f59e0b;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
  }
</style>
</head>
<body>
<div class="form-container">
  <div class="mobile-note">
    <strong>📱 Mobile Note:</strong> This attribute primarily affects mobile devices. Test on a phone or tablet for the best experience!
  </div>

  <h3>Registration Form</h3>

  <div class="form-group">
    <label>
      Full Name <span class="example-badge">autocapitalize="words"</span>
    </label>
    <input
      type="text"
      autocapitalize="words"
      placeholder="John Smith">
    <div class="hint">Each word is capitalized automatically</div>
  </div>

  <div class="form-group">
    <label>
      Email <span class="example-badge">autocapitalize="none"</span>
    </label>
    <input
      type="email"
      autocapitalize="none"
      placeholder="john@example.com">
    <div class="hint">No capitalization for email addresses</div>
  </div>

  <div class="form-group">
    <label>
      Username <span class="example-badge">autocapitalize="off"</span>
    </label>
    <input
      type="text"
      autocapitalize="off"
      placeholder="johnsmith123">
    <div class="hint">Usernames stay lowercase</div>
  </div>

  <div class="form-group">
    <label>
      Bio <span class="example-badge">autocapitalize="sentences"</span>
    </label>
    <textarea
      rows="4"
      autocapitalize="sentences"
      placeholder="Tell us about yourself..."></textarea>
    <div class="hint">First letter of each sentence capitalized</div>
  </div>

  <div class="form-group">
    <label>
      License Plate <span class="example-badge">autocapitalize="characters"</span>
    </label>
    <input
      type="text"
      autocapitalize="characters"
      placeholder="ABC123"
      maxlength="7">
    <div class="hint">All characters are capitalized</div>
  </div>
</div>
</body>
</html>

Contact Form with Smart Capitalization

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  body {
    font-family: Arial, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 20px;
  }
  .contact-form {
    background: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    max-width: 500px;
    width: 100%;
  }
  .form-header {
    text-align: center;
    margin-bottom: 30px;
  }
  .form-header h2 {
    margin: 0;
    color: #1e293b;
    font-size: 28px;
  }
  .form-header p {
    color: #64748b;
    margin: 5px 0 0;
  }
  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
  }
  .form-field {
    margin-bottom: 20px;
  }
  .form-field.full-width {
    grid-column: 1 / -1;
  }
  label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #1e293b;
  }
  input, textarea, select {
    width: 100%;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.2s;
    box-sizing: border-box;
  }
  input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #667eea;
  }
  .submit-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s;
  }
  .submit-btn:hover {
    transform: translateY(-2px);
  }
</style>
</head>
<body>
<form class="contact-form">
  <div class="form-header">
    <h2>Get in Touch</h2>
    <p>We'd love to hear from you</p>
  </div>

  <div class="form-row">
    <div class="form-field">
      <label for="firstName">First Name</label>
      <input
        type="text"
        id="firstName"
        autocapitalize="words"
        placeholder="John"
        required>
    </div>

    <div class="form-field">
      <label for="lastName">Last Name</label>
      <input
        type="text"
        id="lastName"
        autocapitalize="words"
        placeholder="Smith"
        required>
    </div>
  </div>

  <div class="form-field">
    <label for="email">Email Address</label>
    <input
      type="email"
      id="email"
      autocapitalize="none"
      placeholder="john@example.com"
      required>
  </div>

  <div class="form-field">
    <label for="company">Company Name</label>
    <input
      type="text"
      id="company"
      autocapitalize="words"
      placeholder="Acme Corporation">
  </div>

  <div class="form-field">
    <label for="subject">Subject</label>
    <input
      type="text"
      id="subject"
      autocapitalize="sentences"
      placeholder="I'd like to discuss..."
      required>
  </div>

  <div class="form-field">
    <label for="message">Message</label>
    <textarea
      id="message"
      rows="5"
      autocapitalize="sentences"
      placeholder="Tell us more about your inquiry..."
      required></textarea>
  </div>

  <button type="submit" class="submit-btn">Send Message</button>
</form>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  body {
    font-family: Arial, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 20px;
  }
  .contact-form {
    background: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    max-width: 500px;
    width: 100%;
  }
  .form-header {
    text-align: center;
    margin-bottom: 30px;
  }
  .form-header h2 {
    margin: 0;
    color: #1e293b;
    font-size: 28px;
  }
  .form-header p {
    color: #64748b;
    margin: 5px 0 0;
  }
  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
  }
  .form-field {
    margin-bottom: 20px;
  }
  .form-field.full-width {
    grid-column: 1 / -1;
  }
  label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #1e293b;
  }
  input, textarea, select {
    width: 100%;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.2s;
    box-sizing: border-box;
  }
  input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #667eea;
  }
  .submit-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s;
  }
  .submit-btn:hover {
    transform: translateY(-2px);
  }
</style>
</head>
<body>
<form class="contact-form">
  <div class="form-header">
    <h2>Get in Touch</h2>
    <p>We'd love to hear from you</p>
  </div>

  <div class="form-row">
    <div class="form-field">
      <label for="firstName">First Name</label>
      <input
        type="text"
        id="firstName"
        autocapitalize="words"
        placeholder="John"
        required>
    </div>

    <div class="form-field">
      <label for="lastName">Last Name</label>
      <input
        type="text"
        id="lastName"
        autocapitalize="words"
        placeholder="Smith"
        required>
    </div>
  </div>

  <div class="form-field">
    <label for="email">Email Address</label>
    <input
      type="email"
      id="email"
      autocapitalize="none"
      placeholder="john@example.com"
      required>
  </div>

  <div class="form-field">
    <label for="company">Company Name</label>
    <input
      type="text"
      id="company"
      autocapitalize="words"
      placeholder="Acme Corporation">
  </div>

  <div class="form-field">
    <label for="subject">Subject</label>
    <input
      type="text"
      id="subject"
      autocapitalize="sentences"
      placeholder="I'd like to discuss..."
      required>
  </div>

  <div class="form-field">
    <label for="message">Message</label>
    <textarea
      id="message"
      rows="5"
      autocapitalize="sentences"
      placeholder="Tell us more about your inquiry..."
      required></textarea>
  </div>

  <button type="submit" class="submit-btn">Send Message</button>
</form>
</body>
</html>

Address Form

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .address-form {
    max-width: 600px;
    margin: 20px;
    padding: 30px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
  }
  h2 {
    margin-top: 0;
    color: #1e293b;
  }
  .form-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
  }
  .form-field {
    margin-bottom: 15px;
  }
  label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #1e293b;
  }
  input, select {
    width: 100%;
    padding: 10px;
    border: 2px solid #cbd5e1;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
  }
  input:focus, select:focus {
    outline: none;
    border-color: #3b82f6;
  }
  .zip-code {
    text-transform: uppercase;
  }
  button {
    width: 100%;
    padding: 12px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
  }
</style>
</head>
<body>
<form class="address-form">
  <h2>Shipping Address</h2>

  <div class="form-field">
    <label for="streetAddress">Street Address</label>
    <input
      type="text"
      id="streetAddress"
      autocapitalize="words"
      placeholder="123 Main Street"
      required>
  </div>

  <div class="form-field">
    <label for="aptUnit">Apt, Suite, Unit (Optional)</label>
    <input
      type="text"
      id="aptUnit"
      autocapitalize="characters"
      placeholder="APT 4B">
  </div>

  <div class="form-field">
    <label for="city">City</label>
    <input
      type="text"
      id="city"
      autocapitalize="words"
      placeholder="San Francisco"
      required>
  </div>

  <div class="form-row">
    <div class="form-field">
      <label for="state">State</label>
      <select id="state" required>
        <option value="">Select State</option>
        <option>California</option>
        <option>New York</option>
        <option>Texas</option>
      </select>
    </div>

    <div class="form-field">
      <label for="zipCode">ZIP Code</label>
      <input
        type="text"
        id="zipCode"
        class="zip-code"
        autocapitalize="characters"
        placeholder="94102"
        maxlength="5"
        pattern="[0-9]{5}"
        required>
    </div>
  </div>

  <button type="submit">Continue to Payment</button>
</form>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .address-form {
    max-width: 600px;
    margin: 20px;
    padding: 30px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
  }
  h2 {
    margin-top: 0;
    color: #1e293b;
  }
  .form-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
  }
  .form-field {
    margin-bottom: 15px;
  }
  label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #1e293b;
  }
  input, select {
    width: 100%;
    padding: 10px;
    border: 2px solid #cbd5e1;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
  }
  input:focus, select:focus {
    outline: none;
    border-color: #3b82f6;
  }
  .zip-code {
    text-transform: uppercase;
  }
  button {
    width: 100%;
    padding: 12px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
  }
</style>
</head>
<body>
<form class="address-form">
  <h2>Shipping Address</h2>

  <div class="form-field">
    <label for="streetAddress">Street Address</label>
    <input
      type="text"
      id="streetAddress"
      autocapitalize="words"
      placeholder="123 Main Street"
      required>
  </div>

  <div class="form-field">
    <label for="aptUnit">Apt, Suite, Unit (Optional)</label>
    <input
      type="text"
      id="aptUnit"
      autocapitalize="characters"
      placeholder="APT 4B">
  </div>

  <div class="form-field">
    <label for="city">City</label>
    <input
      type="text"
      id="city"
      autocapitalize="words"
      placeholder="San Francisco"
      required>
  </div>

  <div class="form-row">
    <div class="form-field">
      <label for="state">State</label>
      <select id="state" required>
        <option value="">Select State</option>
        <option>California</option>
        <option>New York</option>
        <option>Texas</option>
      </select>
    </div>

    <div class="form-field">
      <label for="zipCode">ZIP Code</label>
      <input
        type="text"
        id="zipCode"
        class="zip-code"
        autocapitalize="characters"
        placeholder="94102"
        maxlength="5"
        pattern="[0-9]{5}"
        required>
    </div>
  </div>

  <button type="submit">Continue to Payment</button>
</form>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .post-composer {
    max-width: 600px;
    margin: 20px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
  }
  .composer-header {
    padding: 20px;
    border-bottom: 2px solid #e2e8f0;
  }
  .composer-header h3 {
    margin: 0;
    color: #1e293b;
  }
  .user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
  }
  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
  }
  .composer-body {
    padding: 20px;
  }
  textarea {
    width: 100%;
    min-height: 120px;
    border: none;
    font-size: 16px;
    resize: vertical;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
  }
  textarea:focus {
    outline: none;
  }
  .composer-footer {
    padding: 15px 20px;
    border-top: 2px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .char-count {
    color: #64748b;
    font-size: 14px;
  }
  .post-btn {
    padding: 10px 24px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
  }
  .post-btn:hover {
    background: #2563eb;
  }
</style>
</head>
<body>
<div class="post-composer">
  <div class="composer-header">
    <h3>Create Post</h3>
    <div class="user-info">
      <div class="avatar">JS</div>
      <strong>John Smith</strong>
    </div>
  </div>

  <div class="composer-body">
    <textarea
      placeholder="What's on your mind?"
      autocapitalize="sentences"
      maxlength="280"
      oninput="updateCount(this)"></textarea>
  </div>

  <div class="composer-footer">
    <span class="char-count" id="charCount">0 / 280</span>
    <button class="post-btn">Post</button>
  </div>
</div>

<script>
  function updateCount(textarea) {
    const count = textarea.value.length;
    document.getElementById('charCount').textContent = count + ' / 280';
  }
</script>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .post-composer {
    max-width: 600px;
    margin: 20px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
  }
  .composer-header {
    padding: 20px;
    border-bottom: 2px solid #e2e8f0;
  }
  .composer-header h3 {
    margin: 0;
    color: #1e293b;
  }
  .user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
  }
  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
  }
  .composer-body {
    padding: 20px;
  }
  textarea {
    width: 100%;
    min-height: 120px;
    border: none;
    font-size: 16px;
    resize: vertical;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
  }
  textarea:focus {
    outline: none;
  }
  .composer-footer {
    padding: 15px 20px;
    border-top: 2px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .char-count {
    color: #64748b;
    font-size: 14px;
  }
  .post-btn {
    padding: 10px 24px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
  }
  .post-btn:hover {
    background: #2563eb;
  }
</style>
</head>
<body>
<div class="post-composer">
  <div class="composer-header">
    <h3>Create Post</h3>
    <div class="user-info">
      <div class="avatar">JS</div>
      <strong>John Smith</strong>
    </div>
  </div>

  <div class="composer-body">
    <textarea
      placeholder="What's on your mind?"
      autocapitalize="sentences"
      maxlength="280"
      oninput="updateCount(this)"></textarea>
  </div>

  <div class="composer-footer">
    <span class="char-count" id="charCount">0 / 280</span>
    <button class="post-btn">Post</button>
  </div>
</div>

<script>
  function updateCount(textarea) {
    const count = textarea.value.length;
    document.getElementById('charCount').textContent = count + ' / 280';
  }
</script>
</body>
</html>

How It Works

Mobile Keyboard Behavior

On mobile devices with virtual keyboards:

none/off: Lowercase keyboard, no shift
sentences: First letter capitalized, then lowercase
words: Shift after each space
characters: Caps lock active

Desktop Behavior

On desktop browsers:

The attribute is typically ignored
Users control capitalization manually
No automatic capitalization occurs

Best Practices

1. Match Field Purpose

Choose the right value based on expected input:

<!-- Personal names: capitalize each word -->
<input type="text" name="fullName" autocapitalize="words">

<!-- Email: no capitalization -->
<input type="email" autocapitalize="none">

<!-- Comments/messages: sentence case -->
<textarea autocapitalize="sentences"></textarea>

<!-- Codes/IDs: all caps -->
<input type="text" name="productCode" autocapitalize="characters">

<!-- Usernames: no capitalization -->
<input type="text" name="username" autocapitalize="off">

2. Combine with Other Input Attributes

<input
  type="text"
  autocapitalize="none"
  autocorrect="off"
  spellcheck="false"
  placeholder="username">

3. Consider User Experience

<!-- Good: Street address -->
<input
  type="text"
  name="street"
  autocapitalize="words"
  placeholder="123 Main Street">

<!-- Good: City name -->
<input
  type="text"
  name="city"
  autocapitalize="words"
  placeholder="San Francisco">

<!-- Good: State abbreviation -->
<input
  type="text"
  name="state"
  autocapitalize="characters"
  maxlength="2"
  placeholder="CA">

4. Use with Input Types

<!-- Email: Always use autocapitalize="none" -->
<input type="email" autocapitalize="none">

<!-- URL: No capitalization needed -->
<input type="url" autocapitalize="none">

<!-- Search: Depends on use case -->
<input type="search" autocapitalize="sentences">

<!-- Tel: Not affected -->
<input type="tel">

<!-- Password: Usually autocapitalize="none" -->
<input type="password" autocapitalize="none">

5. Contenteditable Elements

<!-- Works on contenteditable too -->
<div
  contenteditable="true"
  autocapitalize="sentences">
  Type your content here...
</div>

Common Use Cases

Names and Titles

<input type="text" name="firstName" autocapitalize="words" placeholder="John">
<input type="text" name="lastName" autocapitalize="words" placeholder="Smith">
<input type="text" name="jobTitle" autocapitalize="words" placeholder="Software Engineer">

Addresses

<input type="text" name="street" autocapitalize="words" placeholder="Main Street">
<input type="text" name="city" autocapitalize="words" placeholder="New York">
<input type="text" name="state" autocapitalize="characters" placeholder="NY">
<input type="text" name="zipCode" autocapitalize="characters">

Credentials

<input type="text" name="username" autocapitalize="none" placeholder="johndoe123">
<input type="email" name="email" autocapitalize="none" placeholder="[email protected]">
<input type="password" name="password" autocapitalize="none">

Text Content

<!-- Blog post -->
<textarea name="content" autocapitalize="sentences"></textarea>

<!-- Comment -->
<textarea name="comment" autocapitalize="sentences" placeholder="Share your thoughts..."></textarea>

<!-- Review -->
<textarea name="review" autocapitalize="sentences" placeholder="Write your review..."></textarea>

Codes and IDs

<input type="text" name="promocode" autocapitalize="characters" placeholder="SAVE20">
<input type="text" name="licensekey" autocapitalize="characters">
<input type="text" name="confirmationCode" autocapitalize="characters">

JavaScript API

Setting Dynamically

const input = document.getElementById('myInput');

// Set autocapitalize
input.autocapitalize = 'words';
input.setAttribute('autocapitalize', 'words');

// Get current value
console.log(input.autocapitalize); // "words"

// Remove
input.removeAttribute('autocapitalize');

Conditional Capitalization

// Set based on input type
const emailInputs = document.querySelectorAll('input[type="email"]');
emailInputs.forEach(input => {
  input.autocapitalize = 'none';
});

// Set based on field name
const nameFields = document.querySelectorAll('input[name*="name"]');
nameFields.forEach(input => {
  input.autocapitalize = 'words';
});

Accessibility Considerations

Screen Readers

The autocapitalize attribute:

Does not affect screen reader behavior
Is purely a keyboard input helper
Should be combined with proper labels and ARIA

<label for="fullName">Full Name</label>
<input
  type="text"
  id="fullName"
  autocapitalize="words"
  aria-required="true"
  aria-describedby="nameHint">
<span id="nameHint">Enter your first and last name</span>

User Control

Users can still:

Override with Caps Lock
Type lowercase if desired
Use mobile keyboard’s shift key manually

Common Pitfalls

Type Attribute Interactions

<!-- Email type usually overrides autocapitalize -->
<input type="email" autocapitalize="words">
<!-- Browser likely ignores autocapitalize for email -->

<!-- Password type may ignore autocapitalize -->
<input type="password" autocapitalize="sentences">
<!-- Capitalization may not work -->

Browser Support

Browser	Support	Notes
iOS Safari	5+	Full support
Android Chrome	All	Full support
Desktop Chrome	Ignored	No effect
Desktop Firefox	Ignored	No effect
Desktop Safari	Ignored	No effect

autocorrect - Enable/disable autocorrection (non-standard, iOS only)
spellcheck - Control spell checking
inputmode - Hint for virtual keyboard type
enterkeyhint - Label for Enter key on virtual keyboards

The autocapitalize Attribute

The autocapitalize Attribute

Syntax

Values

Examples

Form Input Examples

Contact Form with Smart Capitalization

Address Form

Social Media Post

How It Works

Mobile Keyboard Behavior

Desktop Behavior

Best Practices

1. Match Field Purpose

2. Combine with Other Input Attributes

3. Consider User Experience

4. Use with Input Types

5. Contenteditable Elements

Common Use Cases

Names and Titles

Addresses

Credentials

Text Content

Codes and IDs

JavaScript API

Setting Dynamically

Conditional Capitalization

Accessibility Considerations

Screen Readers

User Control

Common Pitfalls

Type Attribute Interactions

Browser Support

Related Attributes

Specifications

The `autocapitalize` Attribute