Атрибут HTML – dirname

Атрибут dirname (назва напрямку) може вживатися на елементах <textarea> і <input>; він описує напрям текстового вмісту елемента під час подання форми. Браузер використовує значення цього атрибута для з'ясування того, чи є текст, введений користувачем, орієнтованим зліва направо, чи справа наліво. Коли цей атрибут вжито, то напрям тексту елемента включається до даних, що подаються в формі, вкупі зі значенням атрибута dirname як іменем поля.

Примітки щодо використання

Атрибут dirname може вживатися на будь-яких елементах <textarea>, а також будь-яких елементах <input>, що мають тип text, search, tel, url або email.

Формат подання даних такий: {dirname_value}={direction}, де {dirname_value} – значення атрибута dirname, а {direction} – напрям тексту. Наприклад, якщо користувач ввів "Привіт" в елемент з атрибутами name="comment" і dirname="comment-direction", то закодовані в URL дані, що подаються в формі для запитів GET, будуть comment=%D0%9F%D1%80%D0%B8%D0%B2%D1%96%D1%82&comment-direction=ltr. Напрям – одне з наступного:

rtl

Текст, уведений користувачем, має напрям справа наліво.

ltr

Текст, уведений користувачем, має напрям зліва направо.

Якщо не заданий жодний напрям тексту, то користувацький агент використає напрям батьківського елементу, що вміщає форму, а якщо його не задано, то усталений напрям користувацького агента.

Приклади

Напрям елемента textarea

У цьому прикладі атрибут dir="auto" на елементі textarea дає змогу визначити напрям тексту автоматично на основі тексту, введеного користувачем:

<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". Закодоване в URL тіло запиту має такий вигляд:

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

Напрям елемента input

У цьому прикладі атрибут dir="auto" на елементі input дає змогу з'ясовувати напрям тексту автоматично, на основі тексту, введеного користувачем:

<form method="get" action="https://www.example.com/submit">
  <input
    type="text"
    name="comment-input"
    dir="auto"
    dirname="comment-direction"
    value="Привіт" />
  <button type="submit">Надіслати мої привітання</button>
</form>

Коли користувач подає форму, то користувацький агент додає два поля: одне з іменем comment-input і значенням "Привіт", а інше з іменем comment-direction і значенням "ltr":

https://www.example.com/submit?comment-input=%D0%9F%D1%80%D0%B8%D0%B2%D1%96%D1%82&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="Ім'я користувача зліва направо" />
    <textarea name="comment" dirname="comment-direction">
      Коментар зліва направо
    </textarea>
    <button type="submit">Оприлюднити коментар</button>
  </form>
</div>

Закодоване в URL тіло запиту має такий вигляд:

https://www.example.com/submit?user=%D0%86%D0%BC'%D1%8F%20%D0%BA%D0%BE%D1%80%D0%B8%D1%81%D1%82%D1%83%D0%B2%D0%B0%D1%87%D0%B0%20%D0%B7%D0%BB%D1%96%D0%B2%D0%B0%20%D0%BD%D0%B0%D0%BF%D1%80%D0%B0%D0%B2%D0%BE&user-direction=rtl&comment=%D0%9A%D0%BE%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%80%20%D0%B7%D0%BB%D1%96%D0%B2%D0%B0%20%D0%BD%D0%B0%D0%BF%D1%80%D0%B0%D0%B2%D0%BE&comment-direction=rtl

Специфікації

Якщо ви це бачите — значить, щось трапилося з цією сторінкою.
Якщо ви це бачите — значить, щось трапилося з цією сторінкою.

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
dirname
Chrome Full support 17
Edge Full support 79
Firefox No support Ні
Internet Explorer No support Ні
Opera Full support 12.1
Safari Full support 6
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android No support Ні
Opera Android Full support 12.1
Safari on iOS Full support 6
Samsung Internet Full support 1.0
Якщо ви це бачите — значить, щось трапилося з цією сторінкою.

Дивіться також