The HTML dirname attribute is used in <input> and <textarea> elements to specify the element's text direction and to submit it with form data.
Definition and Usage
➔ When an element with the dirname attribute is submitted, a name-value pair of dirname and value is also sent along with other form data (i.e. email=abc@xyz.com&dirname-email=ltr).
➔ The server can use directional information to ensure that the text is stored and displayed correctly in various other contexts.
Syntax
<form action="#server-side" method="post">
Name:<input type="text" id="name" name="name" dir='ltr' dirname="namedirection">
Email:<input type="email" id="email" name="email" dir='auto' dirname="namedirection">
Comment:<textarea name="comment" dir="auto" dirname="comment-direction" cols='55'></textarea>
<button type="submit">Submit</button>
</form>
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| dirname | <input> <textarea> |
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML dirname attribute example</title>
<style>
.mydiv {
border: 2px solid black;
padding: 30px;
background: rgb(100, 100, 100, 0.3);
}
</style>
</head>
<body onsubmit="submit(event)">
<div id="sample" class="mydiv">
<h3>HTML dirname attribute example</h3>
<p>The dirname attribute is used specify the element's text direction and submit it with form data.</p>
<form action="/server-side" method="get">
<table>
<tr>
<td>Comment:</td>
<td><textarea name="comment" dir="ltr" dirname="comment-direction"
cols='55'>This is a comment</textarea></td>
</tr>
<tr>
<td></td>
<td><button type="submit">Submit</button></td>
</tr>
</table>
</form>
</div>
<p>Note: This form submission will not be processed by the server. </p>
</body>
<script>
function submit(e) {
e.preventDefault();
let comment = e.target.comment.value
let commentdirname = e.target.comment.getAttribute("dir");
alert("Form is submitted.\n" + "comment=" + comment + "&comment-direction=" + commentdirname);
}
</script>
</html>
Click on the "Try it Now" button to see how it works.