dirname
The dirname attribute of <textarea> and <input> HTML elements includes the field's writing direction as form data on submission. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The dirname attribute of <textarea> and <input> HTML elements includes the field's writing direction as form data on submission. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 17 | 79 | 116 | 6 | 18 | 6 | |
| HTML attribute | ||||||
| 17 | 79 | 116 | 6 | 18 | 6 | |
| 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 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.
Related links
Powered by web-features