concept · HTML

Form Precision Demo

A realistic account-creation form where each field has the appropriate autocorrect setting. Display names get help; usernames and API keys stay pristine. One attribute, applied intentionally, prevents an entire category of user frustration.

Create account

Display name autocorrect on

How you appear to others — sentence-case, autocorrect welcome

Prose field — OS corrections help catch misspellings

Username autocorrect off

Lowercase letters, numbers, underscores — no autocorrect interference

Technical field — autocorrect "Jon" → "Jon's" destroys the username

Email autocorrect off

Your email address — must arrive verbatim

type="email" suppresses autocorrect as a side-effect on some browsers, but autocorrect="off" makes it explicit and portable

API key autocorrect off

Paste or type your secret key — any mutation breaks auth

Autocorrect changing one character silently invalidates the key

Code editor autocorrect off

Editable snippet — identifiers, punctuation, and casing must be preserved

const username = 'jane_dev_42';
fetch('/api/users/' + username);

Contenteditable host — code editors are in scope, so autocorrect stays off here too

Bio autocorrect on

Tell others about yourself — autocorrect helps with prose

Natural language — autocorrect improves the writing experience

The key insight: autocorrect is not a single binary choice for the whole form — it is a per-field decision. A form wrapper can set autocorrect="off" as a default for technical forms, then selectively restore it with autocorrect="on" on prose fields. This precision was impossible without a standard attribute.

the HTML pattern

<!-- Set a default on the form, override per field -->
<form autocorrect="off">

  <!-- Technical fields inherit "off" -->
  <input type="text" id="username" autocomplete="username">
  <input type="email" id="email">
  <input type="text" id="api-key" spellcheck="false">
  <div contenteditable="true" autocorrect="off" spellcheck="false"></div>

  <!-- Prose field restores autocorrect explicitly -->
  <textarea id="bio" autocorrect="on"></textarea>

</form>

the HTML pattern

see also