HTML dirname Attribute

What You’ll Learn

The dirname attribute lets a form submit the text direction of user input alongside the field value. Use it on <textarea> and certain <input> types so your server receives both the text and whether it was typed left-to-right (ltr) or right-to-left (rtl). It is not the same as the dir attribute.

Purpose of dirname

When users type in multilingual forms, the server often needs to know whether the input is LTR or RTL so it can store, display, or process the text correctly. The dirname attribute solves this by adding a second name/value pair to the form submission.

If you write dirname="comment-dir" on a textarea named comment, the browser submits both comment=… and comment-dir=ltr (or rtl). The browser determines direction from the element’s dir attribute and the text content.

📝 Syntax

Add dirname with a field name on a supported control, and pair it with dir:

<form method="get" action="/submit">

  <textarea

    name="comment"

    dir="auto"

    dirname="comment-dir"></textarea>

  <button type="submit">Send</button>

</form>

Syntax Rules

• The attribute value is a form field name for the direction (e.g. comment-dir).
• Only valid on <textarea> and specific <input> types.
• Pair with dir="auto" (or ltr / rtl) on the same element.
• On submit, the browser sends {dirname}=ltr or {dirname}=rtl.

💎 Values

The dirname attribute takes a string that becomes a form field name. It does not accept ltr or rtl as the attribute value:

• dirname="comment-dir" — Submits comment-dir=ltr or comment-dir=rtl.
• dirname="message-direction" — Submits message-direction=ltr or message-direction=rtl.
• The submitted direction value (ltr / rtl) is chosen by the browser based on the control’s text directionality.

<!-- Markup -->

<input type="text" name="fruit" dirname="fruit-dir" value="cherry">



<!-- Submitted query string -->

fruit=cherry&fruit-dir=ltr

Applicable Elements

dirname vs dir

Use both together: dir for rendering, dirname so the backend receives direction metadata on form submit.

Examples Gallery

Form submission with dirname, JavaScript dirName property, and dirname vs dir explained.

<form method="get" action="/submit">

  <label for="comment">Comment</label>

  <textarea

    id="comment"

    name="comment"

    dir="auto"

    dirname="comment-dir">Hello</textarea>

  <button type="submit">Send</button>

</form>

comment=Hello&comment-dir=ltr

<input type="text" id="dynamicText" name="message" dir="auto">



<script>

  const input = document.getElementById("dynamicText");

  input.dirName = "message-dir";

</script>

<!-- Wrong: dirname is not ltr/rtl -->

<input dirname="ltr">



<!-- Correct: dirname is a field name -->

<input dir="auto" dirname="message-dir">

♿ Accessibility & UX

• Use dir="auto" with dirname — Lets users type in their natural direction while the server still receives direction metadata.
• Store direction server-side — Preserve ltr / rtl when re-displaying user comments in multilingual apps.
• Do not replace lang — dirname reports direction, not language; still use lang where appropriate.
• RTL layout still matters — Submitting direction does not mirror your page layout; use CSS logical properties for RTL UI.

💡 Best Practices