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" 属性を指定することで、ユーザーが入力したテキストに基づいてテキストの方向を自動で識別できるようにしています。

<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 要素の方向

この例では、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

仕様書

ブラウザーの互換性

html.elements.textarea.dirname

html.elements.input.dirname

関連情報

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