v152 · HTML

Autocorrect Inheritance Explorer

The autocorrect attribute inherits through the DOM tree just like spellcheck. Toggle it at each level below and watch the effective value cascade to descendant inputs. The highlighted value shows what the browser will actually apply at each node.

Checking autocorrect support…
autocorrect on (or inherited on)
autocorrect off (or inherited off)
not set (inherits from parent)
<form>
effective: —
<div class="section">
effective: —
<input type="text"> (display name)
type here to test autocorrect:
<input type="text"> (username)
type here to test autocorrect:
<textarea> (bio)
type here to test autocorrect:

the inheritance rule

When autocorrect is not set on an element, it inherits from its closest ancestor that has the attribute set. The default (no attribute anywhere) is browser-defined — typically on for plain text inputs and off for type="email" and type="url". Setting it on a <form> is the recommended pattern for opting entire forms in or out with one attribute. 

<!-- Opt the whole form out; override on friendly fields -->
<form autocorrect="off">
  <input type="text" name="username">     <!-- off (inherited) -->
  <input type="text" name="display-name"
         autocorrect="on">               <!-- on (overrides) -->
  <textarea name="notes"
            autocorrect="on"></textarea>  <!-- on (overrides) -->
</form>

see also