【HTML Living Standard】dirname属性の使い方
dirname属性の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
dirnameプロパティは、HTMLのフォーム要素において、ユーザーが入力したテキストの書字方向に関する情報を保持するプロパティです。このプロパティは、主に<input>要素（type="text", type="search", type="tel", type="url", type="email"）や<textarea>要素に指定されます。
dirnameプロパティが指定された要素を持つフォームがサーバーに送信される際、元の要素のname属性の値に.dirという接尾辞が付加された、新しいデータフィールドが自動的に生成されます。この新しいフィールドには、ユーザーが実際に入力したテキストの書字方向がltr（左から右）またはrtl（右から左）のいずれかの値で格納されます。
例えば、name="comment"という属性を持つ<textarea>要素にdirnameプロパティが設定されている場合、フォームが送信されると、commentという入力値に加えて、comment.dirという追加のデータがサーバーに送られます。このcomment.dirの値は、ユーザーが入力したコメントの実際の書字方向を示します。
この機能は、異なる書字方向の言語が混在する国際化されたWebアプリケーションにおいて特に重要です。サーバー側でユーザーの入力テキストの正確な書字方向を把握することで、適切なテキスト処理、データベースへの保存、または表示の調整を行うことが可能になり、多言語対応のWebサイトやサービスでユーザー体験を向上させるために役立ちます。dirnameプロパティは、静的なHTMLのdir属性とは異なり、入力された内容に基づいて動的に書字方向を伝える点に特徴があります。
構文(syntax)
1<input type="text" name="username" dirname="username-direction">
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
dirname属性で書字方向を送信する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>dirname属性のサンプルコード</title> 7</head> 8<body> 9 <!-- 10 dirname属性は、<input type="text">や<textarea>などのテキスト入力フィールドに入力されたテキストの 11 書字方向（左から右 'ltr' または 右から左 'rtl'）を検出し、その情報をサーバーに送信するための 12 追加フィールドを自動的に生成します。 13 14 この属性は、多言語環境でのテキスト入力（例: 日本語とアラビア語が混在するフォーム）において、 15 データの正確性を保つために役立ちます。 16 --> 17 <form action="/submit-example" method="post"> 18 <label for="textInput">テキストを入力してください:</label><br> 19 <!-- 20 - name="textInput": この入力フィールドの名前です。 21 - dirname="textInput.dir": dirname属性を適用しています。 22 ユーザーがこのフィールドに入力したテキストの書字方向が、 23 フォーム送信時に 'textInput.dir' という名前で追加のフォームデータとして送信されます。 24 例えば、日本語（左から右）を入力すると 'ltr' が、 25 アラビア語（右から左）を入力すると 'rtl' が 'textInput.dir' の値として送信されます。 26 - placeholder: 入力例を示すテキストです。 27 --> 28 <input type="text" id="textInput" name="textInput" dirname="textInput.dir" placeholder="例: こんにちは または السلام عليكم" size="50"> 29 <br><br> 30 <button type="submit">送信</button> 31 </form> 32 33 <!-- 34 このHTMLファイルをブラウザで開き、テキストを入力して送信ボタンをクリックしてみてください。 35 実際にはサーバーサイドの処理が必要ですが、ブラウザの開発者ツール（通常F12キーで開く）の 36 「ネットワーク」タブでフォーム送信時のリクエストを確認すると、 37 送信されるデータに 'textInput'（入力内容）と 'textInput.dir'（書字方向）が含まれていることが確認できます。 38 --> 39</body> 40</html>
HTMLのdirname属性は、<input type="text">や<textarea>などのテキスト入力フィールドに適用される特別な属性です。この属性は、ユーザーが入力したテキストの書字方向（テキストが左から右に書かれるか「ltr」、右から左に書かれるか「rtl」）を自動的に検出し、その書字方向の情報をサーバーに送信するための追加のフォームデータを生成します。この属性自体には引数や戻り値はありませんが、設定することでフォーム送信時に新しいデータフィールドが加わります。
具体的には、dirname="[元のフィールド名].dir"のように指定します。例えば、サンプルコードでは<input type="text" name="textInput" dirname="textInput.dir">と記述されており、textInputという名前の入力フィールドに入力されたテキストの内容と合わせて、その書字方向がtextInput.dirという名前でサーバーに送信されます。もし日本語のような左から右へ書く言語が入力されればltr、アラビア語のような右から左へ書く言語が入力されればrtlという値がtextInput.dirとして送られます。
この機能は、多言語対応のウェブサイトやアプリケーションにおいて、異なる書字方向のテキストが混在するフォームデータの正確な処理をサポートするために非常に有用です。サーバー側でこの書字方向の情報を利用することで、表示や処理を適切に行うことができます。
dirname属性は、<input type="text">や<textarea>などの入力フィールドで使用され、ユーザーが入力したテキストの書字方向（左から右の'ltr'か、右から左の'rtl'か）を自動的に検出する機能を提供します。この書字方向の情報は、指定した名前で追加のフォームデータとしてサーバーに送信されます。
注意点として、dirname属性は単独では機能せず、必ずname属性と組み合わせて使用します。dirname属性の値は、フォーム送信時に書字方向データがサーバーに送られる際のフィールド名となります。サンプルコードのようにdirname="textInput.dir"とすると、入力内容の他にtextInput.dirという名前でltrまたはrtlが送信されます。
この属性は、多言語対応のフォームにおいて、サーバー側でテキストの向きを正確に判別したい場合に非常に有効です。ブラウザ上での見た目の変化は特にありませんが、送信されるデータの正確性を高めるために利用します。サーバー側では、この追加フィールドを受け取り、適切に処理する実装が必要です。