Атрибут form тега <textarea> — прив'язка поля до форми
автор: с3с
Загальний опис
автор: NagarD
Синтаксис
<textarea form="form_id">
Атрибут form може отримувати єдине значення:
-
form_id -
Визначає до якої форми належить елемент
автор: с3сtextarea. Значенням має бути ID-атрибута елементаformу тому самому документі.
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| 1 | 1 | ≤4 | ≤12.1 | 12 | ≤6 |
| Переглядач | ||||
|---|---|---|---|---|
| 4.4 | 18 | 4 | ≤3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
Одна форма з id="lyst" і чотири текстові області поза нею: правильна (зелена рамка — вона надішлеться разом із формою), із двома ідентифікаторами, з неіснуючим id і зовсім без атрибута. Підказки під кожною дописано правилом :has(); у рамці прикладу форми не надсилаються, тому дивимось саме на розмітку.
HTML
<form id="lyst" method="post" action="#">
<p class="title">Форма з id="lyst"</p>
<p><label for="t0">Поле всередині форми</label></p>
<textarea id="t0" name="vseredyni" rows="2">доїде</textarea>
</form>
<p class="row"><label for="t1">form="lyst" — область поза формою, а надсилається з нею</label><br>
<textarea id="t1" form="lyst" name="poza" rows="2">доїде</textarea></p>
<p class="row"><label for="t2">form="lyst zvit" — два ідентифікатори</label><br>
<textarea id="t2" form="lyst zvit" name="dva" rows="2">не доїде нікуди</textarea></p>
<p class="row"><label for="t3">form="nemaje" — такого id на сторінці немає</label><br>
<textarea id="t3" form="nemaje" name="pomylka" rows="2">теж нікуди</textarea></p>
<p class="row"><label for="t4">без form і поза формою</label><br>
<textarea id="t4" name="sam" rows="2">сама по собі</textarea></p>
CSS
form {
max-width: 520px;
margin-bottom: 18px;
padding: 10px 14px;
border: 1px solid #b9c6d8;
border-radius: 6px;
background: #f6f9ff;
}
.title {
margin: 0 0 8px;
font-weight: 600;
}
label {
font-weight: 600;
}
textarea {
width: 100%;
max-width: 480px;
padding: 6px 8px;
font: 15px/1.4 ui-monospace, monospace;
border: 2px solid #b9c6d8;
border-radius: 4px;
}
textarea[form="lyst"] {
border-color: #3a9a4f;
background: #f3fbf4;
}
textarea[form="lyst zvit"],
textarea[form="nemaje"] {
border-color: #d64545;
background: #fff4f4;
}
.row {
max-width: 520px;
margin: 14px 0;
}
.row::after {
display: block;
margin-top: 3px;
font-family: ui-monospace, monospace;
font-size: .85em;
color: #5a6472;
content: "поза формою й без form — просто текст на сторінці, нікуди не надсилається";
}
.row:has(textarea[form="lyst"])::after {
color: #1b4f9c;
content: "належить формі lyst — надішлеться разом із нею";
}
.row:has(textarea[form="lyst zvit"])::after {
color: #c0392b;
content: "два id — не належить жодній формі, вміст не піде нікуди";
}
.row:has(textarea[form="nemaje"])::after {
color: #c0392b;
content: "такого id немає — і жодного попередження про це теж немає";
}
Найпростіший приклад використання HTML атрибута form теґа <textarea>
<form id="text"></form>
<div>
<p>Приклад використання атрибута <code>form</code></p>
<p><textarea name="comment" rows="5" cols="20" placeholder="Ваш коментар"
required form="text"></textarea></p>
<p><input type="submit" value="Надіслати" form="text"></p>
</div>
Різниця між HTML 4.01 та HTML5
Атрибут form для тегу textarea з’явився тільки у HTML5.
Коментарі
Коментарів ще немає — будьте першим!