dirname

The dirname attribute in HTML is used with form inputs to specify the name of the data submitted with the form. It is particularly helpful for fields where the name is generated dynamically.

dirname Attribute

The dirname attribute, applicable to <textarea> and various <input> types, specifies the text direction (left-to-right or right-to-left) for form submission. It includes the text direction in the submitted data, using the dirname value as the field's name.

Syntax

index.html

<input name="myname" dirname="myname.dir">

dirname Demo

When submitting the form, the input field's text direction is included in the submission.

index.html

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname" dirname="fname.dir">
  <input type="submit" value="Submit">
  <p>When submitting the form, the input field's text direction is included in the submission.</p>
</form>

Definition and Usage

The dirname attribute allows the text direction of an input field to be submitted.

Its value consists of the input field's name followed by ".dir".

Applies To

The dirname attribute can be applied to the following HTML elements.

Input Element Directionality

The dir="auto" attribute on <input> enables automatic detection of text direction.

Example: Auto Direction

index.html

<form method="get">
  <input
    type="text"
    name="comment-input"
    dir="auto"
    dirname="comment-direction"
    value="Hello"
  />
  <button type="submit">Send my greetings</button>
</form>

Result: Submits comment-input=Hello and comment-direction=ltr.

Inherited Directionality

Elements will inherit the text direction from their parent unless a dir attribute is defined.

Example: Inherited RTL

index.html

<div dir="rtl">
  <form method="get">
    <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>

Conclusion

The dirname attribute in HTML allows you to indicate the text direction (LTR or RTL) when submitting form data. It adds the text direction to the submission, which is helpful for fields with dynamically assigned names. This attribute can be used with both <input> and <textarea> elements.

action

The action attribute in HTML forms defines the URL where the form data will be sent. The method attribute determines how the data is transmitted, either using GET or POST.

enctype

The enctype attribute in HTML forms defines how the form data should be encoded when sent to the server. This is especially important for forms that handle file uploads or need to ensure special characters are processed correctly.