feat(html): Add dirname attribute page (#28296)

* feat(html): Add dirname attribute page * Update files/en-us/web/html/attributes/dirname/index.md Co-authored-by: Ruth John <Rumyra@users.noreply.github.com> * feat(html): Add dirname attribute page * feat(html): Add dirname attribute page * fix(HTML): validityState.valid and validityState.customError are booleans, will not have dedicated pages * Update files/en-us/web/html/attributes/dirname/index.md Co-authored-by: Ruth John <Rumyra@users.noreply.github.com> * Update files/en-us/web/html/attributes/dirname/index.md Co-authored-by: Ruth John <Rumyra@users.noreply.github.com> --------- Co-authored-by: Ruth John <Rumyra@users.noreply.github.com>
mdn · Jul 31, 2023 · 62b2885 · 62b2885
1 parent f68fe1e
commit 62b2885
Show file tree

Hide file tree

Showing 3 changed files with 119 additions and 9 deletions.
diff --git a/files/en-us/web/html/attributes/dirname/index.md b/files/en-us/web/html/attributes/dirname/index.md
@@ -0,0 +1,109 @@
+---
+title: "HTML attribute: dirname"
+slug: Web/HTML/Attributes/dirname
+page-type: html-attribute
+browser-compat:
+  - html.elements.textarea.dirname
+  - html.elements.input.dirname
+---
+
+{{HTMLSidebar}}
+
+The **`dirname`** attribute can be used on {{htmlelement("textarea")}} and {{htmlelement("input")}} elements and describes the directionality of the element's text content during form submission.
+The browser uses this attribute's value to determine whether text the user has entered is left-to-right or right-to-left oriented.
+When used, the element's text directionality value is included in form submission data along with the `dirname` attribute's value as the name of the field.
+
+## Usage notes
+
+The `dirname` attribute can be used on any {{htmlelement("textarea")}} element, or any {{htmlelement("input")}} element with {{htmlelement("input/text", "text")}}, {{htmlelement("input/search", "search")}}, {{htmlelement("input/tel", "tel")}}, {{htmlelement("input/url", "url")}}, or {{htmlelement("input/email", "email")}} type.
+
+The format of the submitted data is `{dirname_value}={direction}` where `{dirname_value}` is the value of the `dirname` attribute and `{direction}` is the directionality of the text.
+For example, if the user enters "Hello" in an element with the attributes `name="comment"` and `dirname="comment-direction"`, the URL-encoded form submission data for `GET` requests will be `comment=Hello&comment-direction=ltr`.
+The directionality is one of the following:
+
+- `rtl`
+  - : The text entered by the user is in a right-to-left writing direction.
+- `ltr`
+  - : The text entered by the user is in a left-to-right writing direction.
+
+If no text directionality is specified, the user agent will use the directionality of the parent element containing the form, and if that is not specified, the default directionality of the user agent.
+
+## Examples
+
+### Textarea element directionality
+
+In this example, the `dir="auto"` attribute on the textarea element allows the text directionality to be determined automatically based on the text entered by the user:
+
+```html
+<form method="get" action="https://www.example.com/submit">
+  <textarea name="comment" dir="auto" dirname="comment-direction">سيب</textarea>
+  <button type="submit">Send my greetings</button>
+</form>
+```
+
+When the user submits the form, the user agent includes two fields, one called `comment` with the value "سيب", and one called `comment-direction` with the value "rtl".
+The URL-encoded submission body looks like this:
+
+```url
+https://www.example.com/submit?comment=%D8%B3%D9%8A%D8%A8&comment-direction=rtl
+```
+
+### Input element directionality
+
+In this example, the `dir="auto"` attribute on the input element allows the text directionality to be determined automatically based on the text entered by the user:
+
+```html
+<form method="get" action="https://www.example.com/submit">
+  <input
+    type="text"
+    name="comment-input"
+    dir="auto"
+    dirname="comment-direction"
+    value="Hello" />
+  <button type="submit">Send my greetings</button>
+</form>
+```
+
+When the user submits the form, the user agent includes two fields, one called `comment-input` with the value "Hello", and one called `comment-direction` with the value "ltr":
+
+```url
+https://www.example.com/submit?comment-input=Hello&comment-direction=ltr
+```
+
+### Inheriting directionality
+
+The following `<input>` and `<textarea>` elements do not have a `dir` attribute, so they inherit the explicit directionality of their parent element, which is `rtl`:
+
+```html
+<div dir="rtl">
+  <form method="get" action="https://www.example.com/submit">
+    <input
+      type="text"
+      name="user"
+      dirname="user-direction"
+      value="LTR Username" />
+    <textarea name="comment" dirname="comment-direction">LTR Comment</textarea>
+    <button type="submit">Post Comment</button>
+  </form>
+</div>
+```
+
+The URL-encoded submission body looks like this:
+
+```url
+https://www.example.com/submit?user=LTR+Username&user-direction=rtl&comment=LTR+Comment&comment-direction=rtl
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [`dir` attribute](/en-US/docs/Web/HTML/Global_attributes/dir)
+- {{htmlelement("input")}}
+- {{htmlelement("textarea")}}
diff --git a/files/en-us/web/html/element/input/index.md b/files/en-us/web/html/element/input/index.md
@@ -403,16 +403,17 @@ A few additional non-standard attributes are listed following the descriptions o
 
     ```html
     <form action="page.html" method="post">
-      <label
-        >Fruit:
-        <input type="text" name="fruit" dirname="fruit.dir" value="cherry" />
+      <label>
+        Fruit:
+        <input type="text" name="fruit" dirname="fruit-dir" value="cherry" />
       </label>
       <input type="submit" />
     </form>
-    <!-- page.html?fruit=cherry&fruit.dir=ltr -->
+    <!-- page.html?fruit=cherry&fruit-dir=ltr -->
     ```
 
-    When the form above is submitted, the input cause both the `name` / `value` pair of `fruit=cherry` and the `dirname` / direction pair of `fruit.dir=ltr` to be sent.
+    When the form above is submitted, the input cause both the `name` / `value` pair of `fruit=cherry` and the `dirname` / direction pair of `fruit-dir=ltr` to be sent.
+    For more information, see the [`dirname` attribute](/en-US/docs/Web/HTML/Attributes/dirname).
 
 - `disabled`
 
@@ -1136,8 +1137,8 @@ In addition to the errors described in the table above, the `validityState` inte
 - {{domxref('validityState.rangeOverflow')}}
 - {{domxref('validityState.stepMismatch')}}
 - {{domxref('validityState.badInput')}}
-- {{domxref('validityState.valid')}}
-- {{domxref('validityState.customError')}}
+- {{domxref('validityState', 'validityState.valid')}}
+- {{domxref('validityState', 'validityState.customError')}}
 
 For each of these Boolean properties, a value of `true` indicates that the specified reason validation may have failed is true, with the exception of the `valid` property, which is `true` if the element's value obeys all constraints.
 

diff --git a/files/en-us/web/html/element/textarea/index.md b/files/en-us/web/html/element/textarea/index.md
@@ -48,8 +48,8 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attrib
   - : The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is `20`.
 - `dirname`
 
-  - : This attribute is used to set the text directionality of the element in a manner similar to the [`dirname`](/en-US/docs/Web/HTML/Element/input#dirname) attribute of the `<input>` element. Possible values include `ltr` for left-to-right and `rtl` for right-to-left. The default value is `ltr`.
-    The value of the attribute is sent in the format `{elementName}.dir={value}`, where `{elementName}` is the name of the `<textarea>` element and `{value}` may be `ltr` or `rtl`.
+  - : This attribute is used to indicate the text directionality of the element contents similar to the [`dirname`](/en-US/docs/Web/HTML/Element/input#dirname) attribute of the `<input>` element.
+    For more information, see the [`dirname` attribute](/en-US/docs/Web/HTML/Attributes/dirname).
 
 - `disabled`
   - : This Boolean attribute indicates that the user cannot interact with the control. If this attribute is not specified, the control inherits its setting from the containing element, for example {{ HTMLElement("fieldset") }}; if there is no containing element when the `disabled` attribute is set, the control is enabled.