Attribut HTML : dirname

Notes d'utilisation

L'attribut dirname peut être utilisé sur tout élément HTML <textarea>, ou sur tout élément HTML <input> de type hidden, text, search, tel, url, email, password, submit, reset ou button.

Le format des données soumises est {valeur_dirname}={direction} où {valeur_dirname} est la valeur de l'attribut dirname et {direction} est la direction du texte. Par exemple, si l'utilisateur·rice saisit « Hello » dans un élément avec les attributs name="comment" et dirname="comment-direction", les données soumises encodées dans l'URL pour une requête GET seront comment=Hello&comment-direction=ltr. La direction du texte peut être :

rtl

Le texte saisi par l'utilisateur·rice est en écriture de droite à gauche.

ltr

Le texte saisi par l'utilisateur·rice est en écriture de gauche à droite.

Si aucune direction n'est spécifiée, l'agent utilisateur utilisera la direction du parent contenant le formulaire, et si elle n'est pas définie, la direction par défaut de l'agent utilisateur.

Exemples

Direction du texte dans un élément textarea

Dans cet exemple, l'attribut dir="auto" sur l'élément textarea permet de déterminer automatiquement la direction du texte en fonction de ce que l'utilisateur·rice saisit :

<form method="get" action="https://www.exemple.fr/submit">
  <textarea name="comment" dir="auto" dirname="comment-direction">سيب</textarea>
  <button type="submit">Envoyer mes salutations</button>
</form>

Lorsque l'utilisateur·rice soumet le formulaire, l'agent utilisateur inclut deux champs, un appelé comment avec la valeur « سيب », et un appelé comment-direction avec la valeur « rtl ». Le corps de la soumission encodé dans l'URL ressemble à :

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

Direction du texte dans un élément input

Dans cet exemple, l'attribut dir="auto" sur l'élément input permet de déterminer automatiquement la direction du texte en fonction de ce que l'utilisateur·rice saisit :

<form method="get" action="https://www.exemple.fr/submit">
  <input
    type="text"
    name="comment-input"
    dir="auto"
    dirname="comment-direction"
    value="Hello" />
  <button type="submit">Envoyer mes salutations</button>
</form>

Lorsque l'utilisateur·rice soumet le formulaire, l'agent utilisateur inclut deux champs, un appelé comment-input avec la valeur « Hello », et un appelé comment-direction avec la valeur « ltr  » :

https://www.exemple.fr/submit?comment-input=Hello&comment-direction=ltr

Héritage de la direction du texte

Les éléments <input> et <textarea> suivants n'ont pas d'attribut dir, ils héritent donc de la direction explicite de leur élément parent, qui est rtl :

<div dir="rtl">
  <form method="get" action="https://www.exemple.fr/submit">
    <input
      type="text"
      name="user"
      dirname="user-direction"
      value="LTR Username" />
    <textarea name="comment" dirname="comment-direction">LTR Comment</textarea>
    <button type="submit">Publier le commentaire</button>
  </form>
</div>

Le corps de la soumission encodé dans l'URL ressemble à :

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

Spécifications

Compatibilité des navigateurs

html.elements.textarea.dirname

html.elements.input.dirname

Voir aussi

• L'attribut global HTML dir
• L'élément HTML <input>
• L'élément HTML <textarea>