HTML 属性: dirname
dirname
属性は <textarea>
および <input>
要素で用いることができ、フォームの送信時に要素のテキストの内容の向きを表します。
ブラウザーは、この属性の値をユーザーが入力したテキストが左から右に読むのか、右から左に読むのかを識別するのに用います。
使用された場合、要素のテキストの方向の値がフォームの送信データに含まれ、そのフィールド名は 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
となるでしょう。
方向は、以下のいずれかです。
テキストの方向が指定されていない場合は、ユーザーエージェントはフォームが入っている親要素のテキストの方向を用います。それも指定されていない場合は、ユーザーエージェントのデフォルトのテキストの方向を用います。
例
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
仕様書
Specification |
---|
HTML Standard # attr-fe-dirname |
ブラウザーの互換性
html.elements.textarea.dirname
BCD tables only load in the browser
html.elements.input.dirname
BCD tables only load in the browser