Possible values are:

on or"" (the empty string)

Enable automatic correction of spelling and punctuation errors.

off

Disable automatic correction of editable text.

The<input> element types that don't support auto-correction always have theoff state:password,email andurl.

For all other editable elements, setting any other value than those listed above is always treated ason.The default value for elements that are not nested inside a<form> ison.

When nested in a<form>, the following elements inherit their default value ofautocorrect from the form if it has been set:<button>,<fieldset>,<input>,<output>,<select>, and<textarea>.

This example demonstrates basicautocorrect attribute usage.

HTML

We include two text<input> elements with different values for theirautocorrect attributes:

<label for="vegetable">A vegetable: </label><input name="vegetable" type="text" autocorrect="on" /><label for="fruit">A fruit: </label><input name="fruit" type="text" autocorrect="off" />

Results

Enter invalid text into the fruit and vegetable text entry boxes above.If auto-correction is supported on your browser, and there is an appropriate substitution provided by the underlying device, a typo in a vegetable name input should be auto-corrected.Typos should not be corrected in the fruit name field.

This example shows how you can enable and disable autocorrection using theautocorrect attribute.

HTML

The HTML markup defines a<button>, a "name"<input> element oftype="text", a "bio"<textarea> element, and two<label> elements.

The "username" element hasautocorrect="off" set because auto-correcting a name would be annoying!The bio does not specify a value forautocorrect, which means that it is enabled (we could have set any value other thanoff).

<button>Reset</button><label for="username">Name: </label><input name="username" type="text" autocorrect="off" /><label for="bio">Biography: </label><textarea name="bio"></textarea>

<pre></pre>

#log {  height: 75px;  overflow: scroll;  padding: 0.5rem;  border: 1px solid black;}button,input,textarea {  display: block;}

const logElement = document.querySelector("#log");function log(text) {  logElement.innerText = `${logElement.innerText}${text}\n`;  logElement.scrollTop = logElement.scrollHeight;}

JavaScript

The code checks whether theautocorrect is supported by checking if it is present on the prototype.If it is not present this fact is logged.If it is present then the value of theautocorrect property for each of the text-entry elements is logged.

A click handler is added for the button, which allows you to reset the entered text and the log.

const resetButton = document.querySelector("#reset");const userNameElement = document.querySelector("#username");const bioElement = document.querySelector("#bio");if (!("autocorrect" in HTMLElement.prototype)) {  log("autocorrect not supported");} else {  log(`userNameElement.autocorrect: ${userNameElement.autocorrect}`);  log(`bioElement.autocorrect: ${bioElement.autocorrect}`);}resetButton.addEventListener("click", (e) => {  userNameElement.value = "";  bioElement.value = "";});

Results

If auto-correction is supported by your browser, the log area below the "Biography" and "Name" inputs should show that it is enabled for "Biography" inputs but not "Name" inputs.

Enter invalid text into the name and biography text entry boxes.If the device has a substitute for the entered word, this will be used to autocorrect text in the "Biography" input (only).

• Allglobal attributes.
• spellcheck.