HTML dirname Attribute

Description

The dirname attribute in HTML is designed to work in tandem with text input (<input>) or textarea (<textarea>) elements. It facilitates the submission of text direction information along with the user's input. This feature is particularly useful in situations where the text direction (left-to-right or right-to-left) is crucial for correctly processing or displaying the input data, especially in multilingual forms where users might input text in languages with different writing directions.

When the dirname attribute is specified, it requires a name. This name, followed by .dir, is used as the key for the submitted data representing the text direction, which can be either "ltr" (left-to-right) or "rtl" (right-to-left). This allows the server-side application to receive both the text input by the user and the direction in which the text is intended to be read. This dual data submission helps ensure that text is stored, processed, or displayed correctly according to its intended reading direction.

The attribute is particularly beneficial for websites and applications that serve a global audience, including languages that have different script directions, such as English (which is written left-to-right) and Arabic or Hebrew (which are written right-to-left). By leveraging the dirname attribute, developers can enhance the user experience by maintaining the integrity of text direction in user inputs, thereby avoiding confusion and ensuring that content is presented as intended.

Syntax

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

Values

dir-name.dirSpecifies the name of the form field that will contain the directionality of the input. This field is submitted along with the form, with a value of either "ltr" (left-to-right) or "rtl" (right-to-left), depending on the directionality of the input's text at the time of submission.

Applies To

The dirname attribute can be used on the following html elements.

Example

HTML

<form action="formscript.php">

  <label for="userInput">Enter Text:</label>

  <input type="text" id="userInput" name="userText" placeholder="Type something..." dirname="userText.dir"><br><br>

  <input type="submit" value="Submit">

</form>

Result

Editor