dirname HTML-Attribut

Anwendungsnotizen

Das dirname-Attribut kann auf jedes <textarea>-Element oder jedes <input>-Element mit einem der folgenden Typen angewendet werden: hidden, text, search, tel, url, email, password, submit, reset oder button.

Das Format der übermittelten Daten ist {dirname_value}={direction}, wobei {dirname_value} der Wert des dirname-Attributs und {direction} die Richtung des Textes ist. Zum Beispiel, wenn der Benutzer "Hello" in ein Element mit den Attributen name="comment" und dirname="comment-direction" eingibt, sehen die URL-kodierten Formulardaten für GET-Anfragen folgendermaßen aus: comment=Hello&comment-direction=ltr. Die Richtung ist eine der folgenden:

rtl

Der vom Benutzer eingegebene Text hat eine Schreibrichtung von rechts nach links.

ltr

Der vom Benutzer eingegebene Text hat eine Schreibrichtung von links nach rechts.

Wenn keine Textausrichtung angegeben ist, verwendet der Benutzeragent die Ausrichtung des übergeordneten Elements, das das Formular enthält, und wenn diese nicht angegeben ist, die Standardausrichtung des Benutzeragents.

Beispiele

Textarea-Element-Ausrichtung

In diesem Beispiel erlaubt das dir="auto"-Attribut auf dem textarea-Element, dass die Textelement-Ausrichtung automatisch basierend auf dem vom Benutzer eingegebenen Text bestimmt wird:

<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>

Wenn der Benutzer das Formular abschickt, fügt der Benutzeragent zwei Felder ein, eines namens comment mit dem Wert "سيب" und eines namens comment-direction mit dem Wert "rtl". Der URL-kodierte Übermittlungstext sieht so aus:

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

Eingabeelement-Ausrichtung

In diesem Beispiel erlaubt das dir="auto"-Attribut auf dem Eingabeelement, dass die Textelement-Ausrichtung automatisch basierend auf dem vom Benutzer eingegebenen Text bestimmt wird:

<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>

Wenn der Benutzer das Formular abschickt, fügt der Benutzeragent zwei Felder ein, eines namens comment-input mit dem Wert "Hello" und eines namens comment-direction mit dem Wert "ltr":

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

Vererbung der Ausrichtung

Die folgenden <input>- und <textarea>-Elemente haben kein dir-Attribut, daher erben sie die explizite Ausrichtung ihres übergeordneten Elements, das rtl ist:

<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>

Der URL-kodierte Übermittlungstext sieht so aus:

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

Spezifikationen

Browser-Kompatibilität

html.elements.textarea.dirname

html.elements.input.dirname

Siehe auch

• dir-Attribut
• <input>
• <textarea>