dirname
The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 17 | 79 | 116 | 6 | 18 | 6 | |
| HTML attribute | ||||||
| The dirname attribute can be used on the textarea element and several input types and describes the directionality of the element's text content during form submission. The browser uses this attribute's value to determine whether text the user has entered is left-to-right or right-to-left oriented. When used, the element's text directionality value is… | 17 | 79 | 116 | 6 | 18 | 6 |
| DOM API | ||||||
| The dirName property of the HTMLInputElement interface is the directionality of the element and enables the submission of that value. It reflects the value of the input element's dirName attribute. This property can be retrieved or set. | 17 | 79 | 116 | 6 | 18 | 6 |
| The dirName property of the HTMLTextAreaElement interface is the directionality of the element. It reflects the value of the textarea element's dirName attribute. This property can be retrieved or set. | 17 | 79 | 116 | 6 | 18 | 6 |
Syntax
<form action="/submit">
<input type="text" name="comment" dirname="comment.dir">
<button type="submit">Send</button>
</form>
<!-- 送信データ: comment=テキスト&comment.dir=ltr -->Live demo
Direction-aware search
Submit both the text value and the writing direction captured by dirname.
Message direction metadata
Track the detected direction for a textarea without adding a separate visible field.
Multiple localized fields
Collect direction metadata for title and summary fields in one submission.
Use cases
-
Improve form input
Use dirname to make data entry more efficient, guided, or predictable inside real forms.
-
Reduce friction
Apply dirname when the browser can help users complete a task with fewer mistakes or less repetitive work.
Cautions
- Test dirname in your target browsers and input environments before depending on it as a primary behavior.
- Browser assistance can vary, so verify the exact UX with real devices, keyboards, and autofill behavior.
Accessibility
- Keep labels, instructions, validation, and keyboard behavior clear so the enhancement helps rather than surprises users.