HTML 属性: dirname

dirname 属性はすべての <textarea> 要素、および種類が text、search、tel、url、email のいずれかであるすべての <input> 要素で用いることができます。

送信されるデータの形式は {dirname_value}={direction} です。{dirname_value} は dirname 属性の値に、{direction} はテキストの方向になります。 たとえば、ユーザーが属性 name="comment" および dirname="comment-direction" を持つ要素に「Hello」を入力した場合、GET リクエストでフォームを送信する際の URL エンコードされたデータは comment=Hello&comment-direction=ltr となるでしょう。

方向は、以下のいずれかです。

rtl

ユーザーが入力したテキストを書く方向は右から左です。

ltr

ユーザーが入力したテキストを書く方向は左から右です。

テキストの方向が指定されていない場合は、ユーザーエージェントはフォームが入っている親要素のテキストの方向を用います。それも指定されていない場合は、ユーザーエージェントのデフォルトのテキストの方向を用います。

この例では、textarea 要素に dir="auto" 属性を指定することで、ユーザーが入力したテキストに基づいてテキストの方向を自動で識別できるようにしています。

<form method="get" action="https://www.example.com/submit">
  <textarea name="comment" dir="auto" dirname="comment-direction">سيب</textarea>
  <button type="submit">挨拶を送信</button>
</form>

ユーザーがフォームを送信するとき、ユーザーエージェントは名前が comment、値が「سيب」のフィールドと、名前が comment-direction、値が「rtl」のフィールドの 2 個のフィールドを含めます。 送信用に URL エンコードされたボディは以下のようになります。

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

この例では、input 要素に dir="auto" 属性を指定することで、ユーザーが入力したテキストに基づいてテキストの方向を自動で識別できるようにしています。

<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">挨拶を送信</button>
</form>

ユーザーがフォームを送信するとき、ユーザーエージェントは名前が comment-input、値が「Hello」のフィールドと、名前が comment-direction、値が「ltr」のフィールドの 2 個のフィールドを含めます。

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

以下の <input> 要素と <textarea> 要素には dir 属性が無いので、親要素から明示的に指定されたテキストの方向 rtl を継承します。

<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">コメントを投稿</button>
  </form>
</div>

送信用に URL エンコードされたボディは以下のようになります。

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

• dir 属性
• <input>
• <textarea>