Update autocapitalize props (mdn#30734)

* Update autocapitalize props * Apply suggestions from code review * Update autocapitalize attribute documentation for mobile browser compatibility * Update textarea and input documentation for autocapitalize attribute * fix attribute types * fix: link * Tweaks to <input> text * Tweaks to <textarea> * Couple more tweaks * Small tweak * Tweak <form> * Fix note boxes * Test * Remove test --------- Co-authored-by: Chris Mills <[email protected]> Co-authored-by: Jean-Yves Perrier <[email protected]>
dvkam · Dec 4, 2023 · 60fde74 · 60fde74
1 parent 8d766d1
commit 60fde74
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 26 deletions.
diff --git a/files/en-us/web/html/element/form/index.md b/files/en-us/web/html/element/form/index.md
@@ -24,16 +24,26 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attrib
     > **Note:** **This attribute has been deprecated and should not be used.** Instead, use the [`accept`](/en-US/docs/Web/HTML/Element/input#accept) attribute on `<input type=file>` elements.
 
 - `accept-charset`
+
   - : Space-separated {{Glossary("character encoding", "character encodings")}} the server accepts. The browser uses them in the order in which they are listed. The default value means [the same encoding as the page](/en-US/docs/Web/HTTP/Headers/Content-Encoding).
     (In previous versions of HTML, character encodings could also be delimited by commas.)
-- `autocapitalize` {{non-standard_inline}}
 
-  - : A nonstandard attribute used by iOS Safari that controls how textual form elements should be automatically capitalized. `autocapitalize` attributes on a form elements override it on `<form>`. Possible values:
+- `autocapitalize`
+
+  - : Controls whether text entered into the form is automatically capitalized on mobile browsers and, if so, in what manner. The possible values are:
+
+    - `none` or `off`
+      - : Do not automatically capitalize any text.
+    - `sentences` or `on`
+      - : Automatically capitalize the first character of each sentence.
+    - `words`
+      - : Automatically capitalize the first character of each word.
+    - `characters`
+      - : Automatically capitalize every character.
+
+    > **Note:** When `autocapitalize` is set on a `<form>`, it controls the autocapitalization behavior of all contained {{htmlelement("input")}} (except `url`, `email`, and `password` types) and {{htmlelement("textarea")}} elements, overriding any `autocapitalize` values set on contained elements.
 
-    - `none`: No automatic capitalization.
-    - `sentences` (default): Capitalize the first letter of each sentence.
-    - `words`: Capitalize the first letter of each word.
-    - `characters`: Capitalize all characters — that is, uppercase.
+    > **Note:** Where `autocapitalize` is not specified, the adopted default behavior varies between browsers. Chrome (Android) and Safari (iOS) default to `on`/`sentences`, while Firefox (Android) defaults to `off`/`none`.
 
 - `autocomplete`
 

diff --git a/files/en-us/web/html/element/input/index.md b/files/en-us/web/html/element/input/index.md
@@ -321,6 +321,7 @@ Attributes for the `<input>` element include the [global HTML attributes](/en-US
 | --------------------------------------------- | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
 | [`accept`](#accept)                           | `file`                                                                  | Hint for expected file type in file upload controls                                   |
 | [`alt`](#alt)                                 | `image`                                                                 | alt attribute for the image type. Required for accessibility                          |
+| [`autocapitalize`](#autocapitalize)           | all except `url`, `email`, and `password`                               | Controls text capitalization in mobile browsers.                                      |
 | [`autocomplete`](#autocomplete)               | all except `checkbox`, `radio`, and buttons                             | Hint for form autofill feature                                                        |
 | [`capture`](#capture)                         | `file`                                                                  | Media capture input method in file upload controls                                    |
 | [`checked`](#checked)                         | `checkbox`, `radio`                                                     | Whether the command or control is checked                                             |
@@ -365,6 +366,23 @@ A few additional non-standard attributes are listed following the descriptions o
 
   - : Valid for the `image` button only, the `alt` attribute provides alternative text for the image, displaying the value of the attribute if the image [`src`](#src) is missing or otherwise fails to load. See the {{HTMLElement("input/image", "image")}} input type.
 
+- `autocapitalize`
+
+  - : Controls whether text entered into input fields is automatically capitalized on mobile browsers and, if so, in what manner. This attribute does not affect the `url`, `email`, or `password` input types, where autocapitalization is never enabled. The possible values are:
+
+    - `none` or `off`
+      - : Do not automatically capitalize any text.
+    - `sentences` or `on`
+      - : Automatically capitalize the first character of each sentence.
+    - `words`
+      - : Automatically capitalize the first character of each word.
+    - `characters`
+      - : Automatically capitalize every character.
+
+    > **Note:** `autocapitalize` can be set on `<input>` and {{htmlelement("textarea")}} elements, and on their containing {{htmlelement("form")}} elements. When `autocapitalize` is set on a `<form>` element, it sets the autocapitalize behavior for all contained inputs (except `url`, `email`, and `password` types) and `<textarea>`s, overriding any `autocapitalize` values set on contained elements.
+
+    > **Note:** Where `autocapitalize` is not specified, the adopted default behavior varies between browsers. Chrome (Android) and Safari (iOS) default to `on`/`sentences`, while Firefox (Android) defaults to `off`/`none`.
+
 - [`autocomplete`](/en-US/docs/Web/HTML/Attributes/autocomplete)
 
   - : (**Not** a Boolean attribute!) The [`autocomplete`](/en-US/docs/Web/HTML/Attributes/autocomplete) attribute takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide. A typical implementation of autocomplete recalls previous values entered in the same input field, but more complex forms of autocomplete can exist. For instance, a browser could integrate with a device's contacts list to autocomplete `email` addresses in an email input field. See [`autocomplete`](/en-US/docs/Web/HTML/Attributes/autocomplete#values) for permitted values.
@@ -625,12 +643,6 @@ The following non-standard attributes are also available on some browsers. As a
     </tr>
   </thead>
   <tbody>
-    <tr>
-      <td><a href="#autocapitalize"><code>autocapitalize</code></a></td>
-      <td>
-        A string indicating how auto-capitalization should be applied to the content of text elements. <strong>Safari only.</strong>
-      </td>
-    </tr>
     <tr>
       <td><a href="#autocorrect"><code>autocorrect</code></a></td>
       <td>
@@ -677,19 +689,6 @@ The following non-standard attributes are also available on some browsers. As a
   </tbody>
 </table>
 
-- `autocapitalize` {{non-standard_inline}}
-
-  - : (Safari only). A string which indicates how auto-capitalization should be applied while the user is editing this field. Permitted values are:
-
-    - `none` or `off`
-      - : Do not automatically capitalize any text
-    - `sentences` or `on`
-      - : Automatically capitalize the first character of each sentence.
-    - `words`
-      - : Automatically capitalize the first character of each word.
-    - `characters`
-      - : Automatically capitalize every character.
-
 - `autocorrect` {{non-standard_inline}}
 
   - : (Safari only). A string which indicates whether to activate automatic correction while the user is editing this field. Permitted values are:

diff --git a/files/en-us/web/html/element/textarea/index.md b/files/en-us/web/html/element/textarea/index.md
@@ -18,12 +18,29 @@ The above example demonstrates a number of features of `<textarea>`:
 - `rows` and `cols` attributes to allow you to specify an exact size for the `<textarea>` to take. Setting these is a good idea for consistency, as browser defaults can differ.
 - Default content entered between the opening and closing tags. `<textarea>` does not support the `value` attribute.
 
-The `<textarea>` element also accepts several attributes common to form `<input>`s, such as `autocomplete`, `autofocus`, `disabled`, `placeholder`, `readonly`, and `required`.
+The `<textarea>` element also accepts several attributes common to form `<input>`s, such as `autocapitalize`, `autocomplete`, `autofocus`, `disabled`, `placeholder`, `readonly`, and `required`.
 
 ## Attributes
 
 This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
 
+- `autocapitalize`
+
+  - : Controls whether text entered into `<textarea>`s is automatically capitalized on mobile browsers and, if so, in what manner. The possible values are:
+
+    - `none` or `off`
+      - : Do not automatically capitalize any text.
+    - `sentences` or `on`
+      - : Automatically capitalize the first character of each sentence.
+    - `words`
+      - : Automatically capitalize the first character of each word.
+    - `characters`
+      - : Automatically capitalize every character.
+
+    > **Note:** `autocapitalize` can be set on `<textarea>` and {{htmlelement("input")}} elements, and on their containing {{htmlelement("form")}} elements. When `autocapitalize` is set on a `<form>` element, it sets the autocapitalize behavior for all contained `<textarea>`s and inputs (except `url`, `email`, and `password` types), overriding any `autocapitalize` values set on contained elements.
+
+    > **Note:** Where `autocapitalize` is not specified, the adopted default behavior varies between browsers. Chrome (Android) and Safari (iOS) default to `on`/`sentences`, while Firefox (Android) defaults to `off`/`none`.
+
 - `autocomplete`
 
   - : This attribute indicates whether the value of the control can be automatically completed by the browser. Possible values are: