HTML 属性：dirname

dirname 属性可用于 <textarea> 元素和几个 <input> 类型，并在表单提交期间描述元素文本内容的方向性。浏览器使用此属性的值来确定用户输入的文本是左对齐还是右对齐。使用时，元素的文本方向值将与 dirname 属性的值一起作为字段名称包含在表单提交数据中。

使用说明

dirname 属性可用于任何 <textarea> 元素，或任何 <input> 元素，其 hidden、text、search、tel、url、email、password、submit、reset 或 button 类型。

提交数据的格式为 {dirname_value}={direction}，其中 {dirname_value} 是 dirname 属性的值，{direction} 是文本的方向性。例如，如果用户在具有 name="comment" 和 dirname="comment-direction" 属性的元素中输入“Hello”，则 GET 请求的 URL 编码表单提交数据将为 comment=Hello&comment-direction=ltr。方向性是以下选项之一：

rtl

用户输入的文本为从右到左的书写方向。

ltr

用户输入的文本为从左到右的书写方向。

如果未指定文本方向性，则用户代理将使用包含表单的父元素的方向性，如果未指定父元素的方向性，则使用用户代理的默认方向性。

示例

Textarea 元素的方向性

在此示例中，textarea 元素上的 dir="auto" 属性允许根据用户输入的文本自动确定文本方向性。

html
<form method="get" action="https://www.example.com/submit">
  <textarea name="comment" dir="auto" dirname="comment-direction">سيب</textarea>
  <button type="submit">Send my greetings</button>
</form>

当用户提交表单时，用户代理包含两个字段，一个名为 comment，值为“سيب”，另一个名为 comment-direction，值为“rtl”。URL 编码的提交主体如下所示：

url
https://www.example.com/submit?comment=%D8%B3%D9%8A%D8%A8&comment-direction=rtl

Input 元素的方向性

在此示例中，input 元素上的 dir="auto" 属性允许根据用户输入的文本自动确定文本方向性。

html
<form method="get" action="https://www.example.com/submit">
  <input
    type="text"
    name="comment-input"
    dir="auto"
    dirname="comment-direction"
    value="Hello" />
  <button type="submit">Send my greetings</button>
</form>

当用户提交表单时，用户代理包含两个字段，一个名为 comment-input，值为“Hello”，另一个名为 comment-direction，值为“ltr”。

url
https://www.example.com/submit?comment-input=Hello&comment-direction=ltr

继承方向性

以下 <input> 和 <textarea> 元素没有 dir 属性，因此它们继承其父元素的显式方向性，即 rtl。

html
<div dir="rtl">
  <form method="get" action="https://www.example.com/submit">
    <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>

URL 编码的提交主体如下所示：

url
https://www.example.com/submit?user=LTR+Username&user-direction=rtl&comment=LTR+Comment&comment-direction=rtl

规范

规范
HTML 标准
# attr-fe-dirname

浏览器兼容性

html.elements.textarea.dirname

BCD 表格仅在启用 JavaScript 的浏览器中加载。

html.elements.input.dirname

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅