HTML dirname Attribute

HTML dirname Attribute

The HTML dirname attribute allows the writing direction of a form control to be submitted along with its value. It is used with supported <input> controls and <textarea> elements, and submits either ltr or rtl under the name specified by the attribute.

Syntax

The dirname attribute specifies the name used to submit an additional form value containing the control's text direction.

<input type="text" name="comment" dirname="comment.dir">

When the form is submitted, the browser submits the value of comment and an additional value named comment.dir containing either ltr or rtl.

Attribute Value

The value of dirname is the name assigned to the additional form field that contains the control's directionality. The value must not be empty.

<textarea name="message" dirname="message.dir"></textarea>

Elements That Use the dirname Attribute

The dirname attribute is used with the <textarea> element and supported states of the <input> element.

Form Submission

The dirname attribute causes an additional name-value pair to be included with the submitted form data.

<input type="text"
       name="comment"
       dirname="comment.dir"
       value="Hello">

For left-to-right text, the submitted data can include:

comment=Hello
comment.dir=ltr

If the control's direction is right-to-left, the additional value is submitted as rtl instead.

Using dirname with <input>

The dirname attribute can be used with supported <input> controls when the server needs to know the direction in which the submitted text should be interpreted.

<form action="result.php" method="post">
  <label for="comment">Comment:</label>
  <input type="text"
         id="comment"
         name="comment"
         dirname="comment.dir">
  <button type="submit">Submit</button>
</form>

The browser submits the comment and its directionality as separate form values.

Using dirname with <textarea>

The dirname attribute is particularly useful with a <textarea> when users may enter text written in either a left-to-right or right-to-left language.

<label for="message">Message:</label>
<textarea id="message"
          name="message"
          dirname="message.dir"></textarea>

When the form is submitted, the browser includes both the message and its directionality.

dirname and dir

The dirname and dir attributes are related to text direction, but they serve different purposes.

<input type="text"
       name="comment"
       dir="rtl"
       dirname="comment.dir">

In this example, dir="rtl" establishes right-to-left direction for the control, while dirname="comment.dir" causes that directionality to be submitted with the form.

Common Mistakes

Do not confuse dirname with dir. The dirname attribute does not itself specify ltr or rtl; it specifies the name used when the browser submits the control's directionality.

Do not give dirname an empty value. It needs a non-empty name so the additional directionality value can be included in the submitted form data.

Do not expect the dirname attribute to create visible output on the page. Its effect is seen in the data submitted by the form.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The dirname attribute is widely supported on the form controls where it applies. It can be used with supported <input> controls and <textarea> to submit the directionality of the entered text.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the dirname Attribute

The example uses dirname with a text input and displays the submitted form data so you can see the additional directionality value.

Summary

The HTML dirname attribute allows the directionality of a supported <input> or <textarea> control to be submitted with its form data. Its value supplies the name of an additional form field, and the browser submits that field with a value of either ltr or rtl.