Thedirname attribute can be used on any<textarea> element, or any<input> element withhidden,text,search,tel,url,email,password,submit,reset orbutton type.

The format of the submitted data is{dirname_value}={direction} where{dirname_value} is the value of thedirname attribute and{direction} is the directionality of the text.For example, if the user enters "Hello" in an element with the attributesname="comment" anddirname="comment-direction", the URL-encoded form submission data forGET requests will becomment=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.

In this example, thedir="auto" attribute on the textarea element allows the text directionality to be determined automatically based on the text entered by the user:

<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 calledcomment with the value "سيب", and one calledcomment-direction with the value "rtl".The URL-encoded submission body looks like this:

https://www.example.com/submit?comment=%D8%B3%D9%8A%D8%A8&comment-direction=rtl

In this example, thedir="auto" attribute on the input element allows the text directionality to be determined automatically based on the text entered by the user:

<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 calledcomment-input with the value "Hello", and one calledcomment-direction with the value "ltr":

https://www.example.com/submit?comment-input=Hello&comment-direction=ltr

The following<input> and<textarea> elements do not have adir attribute, so they inherit the explicit directionality of their parent element, which isrtl:

<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:

https://www.example.com/submit?user=LTR+Username&user-direction=rtl&comment=LTR+Comment&comment-direction=rtl

• dir attribute
• <input>
• <textarea>