Атрибут dirname тега <input> — передати напрямок письма
автор: NagarD
Загальний опис
автор: NagarD
- Нотатка
-
Для того щоб показати, що цей параметр вказує напрямок тексту, зазвичай в кінці рядка додають .dir.
автор: NagarD
Синтаксис
<input name="myname" dirname="myname.dir">Атрибут dirname може отримувати єдине значення:
-
name.dir -
Вказує, що напрямок тексту поля введення буде відправлений на сервер.
автор: NagarD
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 17 | 116 | 6 | ≤12.1 | 79 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 116 | 6 |
Приклади
+ запропонувати свій приклад у пісочниці
До даних форми додасться поле fname.dir зі значенням ltr чи rtl — залежно від напрямку введеного імені. Введи текст і відправ форму на власній сторінці: у рядку запиту буде fname=…&fname.dir=ltr.
<form action="/demo" method="get">
<label>Ім'я: <input type="text" name="fname" dirname="fname.dir"></label>
<button>Надіслати</button>
</form>Форма з чотирма полями: перше без dir, друге з dir="auto" й арабським текстом, третє з dir="auto" й латиницею, четверте — багаторядкове. Видно, що з dir="auto" переглядач сам розвертає поле, і саме цей розпізнаний напрямок він і надішле. Нижче — точний рядок запиту, який іде на сервер, і таблиця типів, на яких атрибут працює. У рамці пісочниці форми не надсилаються, тому запит наведено текстом.
HTML
<form class="forma" action="#" method="get">
<p class="head">Поля з dirname</p>
<label>Без dir — напрямок завжди ltr
<input type="text" name="bez" dirname="bez.dir" value="مرحبا بالعالم">
</label>
<label>dir="auto" з арабським текстом — переглядач розвернув поле
<input type="text" name="ar" dirname="ar.dir" dir="auto" value="مرحبا بالعالم">
</label>
<label>dir="auto" з латиницею — той самий запис, інший результат
<input type="text" name="lat" dirname="lat.dir" dir="auto" value="hello world">
</label>
<label>Те саме в багаторядковому полі
<textarea name="komentar" dirname="komentar.dir" dir="auto" rows="2">شكرا جزيلا على المساعدة</textarea>
</label>
</form>
<p class="head">Що піде на сервер</p>
<pre class="kod">?bez=%D9%85%D8%B1%D8%AD%D8%A8%D8%A7&bez.dir=<b>ltr</b>
&ar=%D9%85%D8%B1%D8%AD%D8%A8%D8%A7&ar.dir=<b>rtl</b>
&lat=hello+world&lat.dir=<b>ltr</b>
&komentar=%D8%B4%D9%83%D8%B1%D8%A7&komentar.dir=<b>rtl</b></pre>
<table class="dovidka">
<caption>На яких полях атрибут працює</caption>
<thead><tr><th scope="col">Надсилають пару</th><th scope="col">Не надсилають</th></tr></thead>
<tbody>
<tr>
<td class="ok">text, search, tel, url, email, password, hidden, textarea</td>
<td class="ni">number, date, checkbox, radio, color, range, submit, button</td>
</tr>
</tbody>
</table>CSS
.head {
margin: 18px 0 8px;
color: #5a6472;
font: 600 14px/1.4 system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: .04em;
}
.forma {
max-width: 460px;
padding: 12px 14px;
border: 1px solid #b9c6d8;
border-radius: 6px;
background: #f6f9ff;
}
.forma .head {
margin-top: 0;
}
label {
display: block;
margin-bottom: 14px;
font-size: .85em;
color: #5a6472;
}
input,
textarea {
display: block;
box-sizing: border-box;
width: 100%;
margin-top: 4px;
padding: 6px 8px;
border: 1px solid #b9c6d8;
border-radius: 4px;
font: inherit;
font-size: 1rem;
}
/* Поля, у яких напрямок визначає переглядач, позначено окремо. */
[dir="auto"] {
border-color: #3a9a4f;
background: #f3fbf4;
}
.kod {
max-width: 460px;
margin: 0;
padding: 8px 10px;
overflow-x: auto;
border: 1px solid #b9c6d8;
border-radius: 6px;
background: #ffffff;
font: 13px/1.7 ui-monospace, monospace;
}
.kod b {
background: #ffe9b8;
}
.dovidka {
width: 100%;
max-width: 460px;
margin-top: 22px;
border-collapse: collapse;
}
.dovidka caption {
margin-bottom: 6px;
font-weight: 600;
text-align: left;
}
.dovidka td,
.dovidka th {
padding: 6px 10px;
border: 1px solid #b9c6d8;
text-align: left;
font-size: .85em;
vertical-align: top;
}
.dovidka thead th {
background: #eef3fb;
}
.ok {
background: #f3fbf4;
color: #1b5e20;
}
.ni {
background: #fff4f4;
color: #c0392b;
}Різниця між HTML 4.01 та HTML5
Атрибут dirname з'явився твльки в HTML5.
Коментарі
Коментарів ще немає — будьте першим!