Add HTMLElement update

files/en-us/web/api/htmlelement/autocorrect/index.md

@@ -0,0 +1,127 @@
+---
+title: "HTMLElement: autocorrect property"
+short-title: autocorrect
+slug: Web/API/HTMLElement/autocorrect
+page-type: web-api-instance-property
+browser-compat: api.HTMLElement.autocorrect
+---
+
+{{APIRef("HTML DOM")}}
+
+The **`autocorrect`** property of the {{domxref("HTMLElement")}} interface controls whether or not user text input is automatically corrected for spelling and/or punctuation errors.
+
+While it is available on all HTML elements, it is only relevant to editable text elements:
+
+- {{htmlelement("input")}} elements and {{domxref("HTMLInputElement")}} objects, except for [`password`](/en-US/docs/Web/HTML/Element/input/password), [`email`](/en-US/docs/Web/HTML/Element/input/email), and [`url`](/en-US/docs/Web/HTML/Element/input/url), which do not support autocorrection.
+- {{htmlelement("textarea")}} elements and {{domxref("HTMLTextAreaElement")}} objects.
+- Any element that has the [`contenteditable`](/en-US/docs/Web/HTML/Global_attributes/contenteditable) attribute set.
+
+Editable text elements (other than the exceptions listed above) have autocorrection enabled by default, except for within a {{htmlelement("form")}} element, where the default value may be inherited from the form.
+Explicitly setting the attribute overrides the default.
+
+It reflects the value of the [`autocorrect`](/en-US/docs/Web/HTML/Global_attributes/autocorrect) HTML global attribute.
+
+## Value
+
+`true` if autocorrection is enabled, and `false` otherwise.
+
+Note that values are reflected from the [`autocorrect`](/en-US/docs/Web/HTML/Global_attributes/autocorrect) global attribute, which takes values `on` and `off`.
+The getter may return an inherited state as the attribute may be inherited from a parent {{htmlelement("form")}} element for elements of type {{htmlelement("button")}}, {{htmlelement("fieldset")}}, {{htmlelement("input")}}, {{htmlelement("output")}}, {{htmlelement("select")}}, or {{htmlelement("textarea")}} (the attribute is not inherited for elements that are nested within an element made editable by adding the [`contenteditable`](/en-US/docs/Web/HTML/Global_attributes/contenteditable) attribute).
+The setter always sets the value on the selected element.
+
+## Examples
+
+### Blahs
+
+The following example shows how to control capitalization behavior for user input via script:
+
+```html
+<div>Current capitalization behavior is: <span id="ac-label"></span></div>
+<div id="ac-element" contenteditable="true" autocapitalize="default">
+  input here
+</div>
+<select id="ac-controller" type="checkbox" checked>
+  <option value="default">default</option>
+  <option value="none">none</option>
+  <option value="sentences">sentences</option>
+  <option value="words">words</option>
+  <option value="characters">characters</option></select
+>Select the capitalization behavior
+```
+
+```js
+const label = document.getElementById("autocorrect-label");
+const element = document.getElementById("ac-element");
+const controller = document.getElementById("ac-controller");
+
+controller.addEventListener("input", (e) => {
+  const behavior = e.target.value;
+  label.textContent = behavior;
+  element.autocapitalize = behavior;
+});
+```
+
+{{EmbedLiveSample('Blah', 600, 200)}}
+
+### Autocorrection inheritance
+
+This example shows how you can set and get the autocorrection state
+
+```html
+<button id="toggleAutocorrect">Enable Autocorrect</button>
+<input type="text" id="textinput" autocorrect="off" />
+```
+
+```html hidden
+<pre id="log"></pre>
+```
+
+```css hidden
+#log {
+  height: 100px;
+  overflow: scroll;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
+```
+
+```js hidden
+const logElement = document.querySelector("#log");
+function log(text) {
+  logElement.innerText = `${logElement.innerText}${text}\n`;
+  logElement.scrollTop = logElement.scrollHeight;
+}
+```
+
+```js
+const toggleButton = document.querySelector("button");
+const inputTextElement = document.querySelector("#textinput");
+
+if (inputTextElement.autocorrect) {
+  toggleButton.addEventListener("click", (e) => {
+    toggleButton.textContent = inputTextElement.autocorrect
+      ? "Disable"
+      : "Enable";
+    inputTextElement.autocorrect = !inputTextElement.autocorrect;
+    log(`autocorrect: ${inputTextElement.autocorrect}`);
+  });
+} else {
+  toggleButton.hidden = true;
+  inputTextElement.hidden = true;
+  log("autocomplete not supported");
+}
+```
+
+{{EmbedLiveSample("Autocorrection inheritance", "100%", "200")}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [`autocapitalize`](/en-US/docs/Web/HTML/Global_attributes/autocapitalize) HTML global attribute

files/en-us/web/api/htmlelement/index.md

@@ -23,10 +23,13 @@ _Also inherits properties from its parent, {{DOMxRef("Element")}}._
   - : Returns a reference to the element's anchor element, or `null` if it doesn't have one.
 - {{DOMxRef("HTMLElement.attributeStyleMap")}} {{ReadOnlyInline}}
   - : A {{DOMxRef("StylePropertyMap")}} representing the declarations of the element's [`style`](/en-US/docs/Web/HTML/Global_attributes/style) attribute.
-- {{domxref("HTMLElement.autocapitalize", "autocapitalize")}}
+- {{domxref("HTMLElement.autocapitalize")}}
   - : A string that represents the element's capitalization behavior for user input. Valid values are: `none`, `off`, `on`, `characters`, `words`, `sentences`.
 - {{domxref("HTMLElement.autofocus")}}
   - : A boolean value reflecting the [`autofocus`](/en-US/docs/Web/HTML/Element/select#autofocus) HTML global attribute, which indicates whether the control should be focused when the page loads, or when dialog or popover become shown if specified in an element inside {{htmlelement("dialog")}} elements or elements whose popover attribute is set.
+- {{domxref("HTMLElement.autocorrect")}}
+  - : A boolean that represents whether or not text input by a user should be automatically corrected.
+    This reflects the [`autocorrect`](/en-US/docs/Web/HTML/Global_attributes/autocorrect) HTML global attribute.
 - {{DOMxRef("HTMLElement.contentEditable")}}
   - : A string, where a value of `true` means the element is editable and a value of `false` means it isn't.
 - {{DOMxRef("HTMLElement.dataset")}} {{ReadOnlyInline}}

files/en-us/web/html/element/input/email/index.md

@@ -25,7 +25,7 @@ See [Validation](#validation) for details on how email addresses are validated t
 
 ## Additional attributes
 
-In addition to the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, `email` inputs support the following attributes.
+In addition to the [global attributes](/en-US/docs/Web/HTML/Global_attributes) (except [`autocorrect`](/en-US/docs/Web/HTML/Global_attributes/autocorrect)), and the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, `email` inputs support the following attributes.
 
 ### list
 

files/en-us/web/html/element/input/password/index.md

@@ -33,7 +33,7 @@ If the [`pattern`](/en-US/docs/Web/HTML/Element/input#pattern) attribute is spec
 
 ## Additional attributes
 
-In addition to the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, password field inputs support the following attributes.
+In addition to the [global attributes](/en-US/docs/Web/HTML/Global_attributes) (except [`autocorrect`](/en-US/docs/Web/HTML/Global_attributes/autocorrect)), and the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, password field inputs support the following attributes.
 
 ### maxlength
 

files/en-us/web/html/element/input/search/index.md

@@ -23,7 +23,7 @@ If no validation constraints are in place for the input (see [Validation](#valid
 
 ## Additional attributes
 
-In addition to the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, search field inputs support the following attributes.
+In addition to the [global attributes](/en-US/docs/Web/HTML/Global_attributes) and the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, search field inputs support the following attributes.
 
 ### list
 
@@ -89,19 +89,10 @@ An input field can have spell-checking enabled if it doesn't have the [readonly]
 
 The value returned by reading `spellcheck` may not reflect the actual state of spell-checking within a control, if the {{Glossary("user agent", "user agent's")}} preferences override the setting.
 
-### autocorrect
-
-[`autocorrect`](/en-US/docs/Web/HTML/Global_attributes#autocorrect) is a global attribute that is used to indicate whether to activate automatic spelling correction while the user is editing this field.
-Permitted values are:
-
-- `on`
-  - : Enable automatic correction of typos, as well as processing of text substitutions if any are configured.
-- `off`
-  - : Disable automatic correction and text substitutions.
-
 ## Non-standard attributes
 
-The following non-standard attributes are available to search input fields. As a general rule, you should avoid using them unless it can't be helped.
+The following non-standard attributes are available to search input fields.
+Avoid using them where possible.
 
 ### incremental
 

files/en-us/web/html/element/input/tel/index.md

@@ -22,17 +22,7 @@ The {{HTMLElement("input")}} element's [`value`](/en-US/docs/Web/HTML/Element/in
 
 ## Additional attributes
 
-In addition to the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, telephone number inputs support the following attributes.
-
-### autocorrect
-
-The [`autocorrect`](/en-US/docs/Web/HTML/Global_attributes#autocorrect) global attribute is used to indicate whether to activate automatic spelling correction while the user is editing this field.
-Permitted values are:
-
-- `on`
-  - : Enable automatic correction of typos, as well as processing of text substitutions if any are configured.
-- `off`
-  - : Disable automatic correction and text substitutions.
+In addition to the [global attributes](/en-US/docs/Web/HTML/Global_attributes) and the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, telephone number inputs support the following attributes.
 
 ### list
 
@@ -83,10 +73,6 @@ The `size` attribute is a numeric value indicating how many characters wide the
 
 This does _not_ set a limit on how many characters the user can enter into the field. It only specifies approximately how many can be seen at a time. To set an upper limit on the length of the input data, use the [`maxlength`](#maxlength) attribute.
 
-## Non-standard attributes
-
-The following non-standard attributes are available to telephone number input fields. As a general rule, you should avoid using them unless it can't be helped.
-
 ## Using tel inputs
 
 Telephone numbers are a very commonly collected type of data on the web. When creating any kind of registration or e-commerce site, for example, you will likely need to ask the user for a telephone number, whether for business purposes or for emergency contact purposes. Given how commonly-entered phone numbers are, it's unfortunate that a "one size fits all" solution for validating phone numbers is not practical.

files/en-us/web/html/element/input/text/index.md

@@ -23,17 +23,7 @@ If no validation constraints are in place for the input (see [Validation](#valid
 
 ## Additional attributes
 
-In addition to the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, text inputs support the following attributes.
-
-### autocorrect
-
-The [`autocorrect`](/en-US/docs/Web/HTML/Global_attributes/autocorrect) global attribute is a string that indicates whether to activate automatic correction while the user is editing this field.
-Permitted values are:
-
-- `on`
-  - : Enable automatic correction of typos, as well as processing of text substitutions if any are configured.
-- `off`
-  - : Disable automatic correction and text substitutions.
+In addition to the [global attributes](/en-US/docs/Web/HTML/Global_attributes) and the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, text inputs support the following attributes.
 
 ### `list`
 
@@ -99,10 +89,6 @@ An input field can have spell-checking enabled if it doesn't have the [readonly]
 
 The value returned by reading `spellcheck` may not reflect the actual state of spell-checking within a control, if the {{Glossary("user agent", "user agent's")}} preferences override the setting.
 
-## Non-standard attributes
-
-The following non-standard attributes are also available on some browsers. As a general rule, you should avoid using them unless it can't be helped.
-
 ## Using text inputs
 
 `<input>` elements of type `text` create basic, single-line inputs. You should use them anywhere you want the user to enter a single-line value and there isn't a more specific input type available for collecting that value (for example, if it's a [date](/en-US/docs/Web/HTML/Element/input/datetime-local), [URL](/en-US/docs/Web/HTML/Element/input/url), [email](/en-US/docs/Web/HTML/Element/input/email), or [search term](/en-US/docs/Web/HTML/Element/input/search), you've got better options available).

files/en-us/web/html/element/input/url/index.md

@@ -24,7 +24,7 @@ See [Validation](#validation) for details on how URLs are validated to ensure th
 
 ## Additional attributes
 
-In addition to the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, `url` inputs support the following attributes.
+In addition to the [global attributes](/en-US/docs/Web/HTML/Global_attributes) (except [`autocorrect`](/en-US/docs/Web/HTML/Global_attributes/autocorrect)) and the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, `url` inputs support the following attributes.
 
 ### list
 

files/en-us/web/html/global_attributes/index.md

@@ -27,6 +27,7 @@ In addition to the basic HTML global attributes, the following global attributes
   - : Controls whether inputted text is automatically capitalized and, if so, in what manner.
 - [`autocorrect`](/en-US/docs/Web/HTML/Global_attributes/autocorrect)
   - : Controls whether input text is automatically corrected for spelling errors.
+    This can be applied to elements that have editable text except for {{HTMLElement("input")}} elements with the attribute: [`type="password"`](/en-US/docs/Web/HTML/Element/input/password), [`type="email"`](/en-US/docs/Web/HTML/Element/input/email), or [`type="url"`](/en-US/docs/Web/HTML/Element/input/url).
 - [`autofocus`](/en-US/docs/Web/HTML/Global_attributes/autofocus)
   - : Indicates that an element is to be focused on page load, or as soon as the {{HTMLElement("dialog")}} it is part of is displayed. This attribute is a boolean, initially false.
 - [`class`](/en-US/docs/Web/HTML/Global_attributes/class)