Атрибут form тега <fieldset> — до якої форми належить
автор: NagarD
Загальний опис
автор: NagarD
Синтаксис
<fieldset form="form_id">
Атрибут form може отримувати єдине значення:
-
form_id -
Визначає елемент форми елемент
автор: NagarD<fieldset>. Значенням цього атрибута повиннен бути атрибут-ідентифікатор елемента<form>в тому ж документі.
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| 1 | 1 | 3 | 15 | 12 | ≤11 |
| Переглядач | ||||
|---|---|---|---|---|
| 4.4 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута form теґа <fieldset>
<p>З використанням атрибута 'form' тегу 'fieldset'</p>
<form id = "form1">
<label>Ім'я:</label><br>
<input type="text" name="login"><br>
<label>Email:</label><br>
<input type="email" name="email"><br>
</form>
<fieldset form = "form1">
<legend>Ваша стать:</legend>
Чоловік <input type = "radio" name = "sex" value = "male" checked><br>
Жінка <input type = "radio" name = "sex" value = "female"> <br>
<br>
</fieldset><br>
<input type="submit" value="Увійти">
Чотири блоки полів. Зеленим CSS підсвічує ті, що справді поїдуть на сервер (усередині форми або з власним form), червоним — те, що лежить у прив'язаній групі без власного form і тому не надсилається. Останній блок — disabled, який працює зовсім за іншим правилом.
HTML
<form id="oplata">
<p>
<label for="i1">1. Поле ВСЕРЕДИНІ форми</label>
<input id="i1" name="vsered" value="поїде на сервер">
</p>
</form>
<fieldset form="oplata">
<legend>2. Група з form="oplata", але поле без власного form</legend>
<p>
<label for="i2">Це поле НЕ поїде</label>
<input id="i2" name="zovni" value="загубиться мовчки">
</p>
</fieldset>
<fieldset form="oplata">
<legend>3. Та сама група, але form стоїть і на самому полі</legend>
<p>
<label for="i3">Це поле поїде</label>
<input id="i3" name="zovni2" form="oplata" value="поїде на сервер">
</p>
</fieldset>
<fieldset disabled>
<legend>4. disabled — інше правило: діє по дереву розмітки</legend>
<p>
<label for="i4">Вимкнене поле</label>
<input id="i4" name="vymkneno" value="вимкнено батьківською групою">
</p>
</fieldset>
CSS
fieldset {
max-width: 520px;
margin: 0 0 14px;
padding: 6px 12px 2px;
border: 2px dashed #b9c6d8;
}
legend {
padding: 0 6px;
font-weight: 600;
}
label {
display: block;
margin-bottom: 4px;
}
input {
width: 100%;
max-width: 320px;
padding: 5px;
font: inherit;
border: 2px solid #b9c6d8;
border-radius: 4px;
}
form input,
input[form] {
border-color: #3a9a4f;
background: #f3fbf4;
}
fieldset[form] input:not([form]) {
border-color: #d64545;
background: #fff4f4;
}
input:disabled {
border-color: #d3d9e2;
background: #eef1f5;
color: #8a94a6;
}
Різниця між HTML 4.01 та HTML5
Атрибут form для тега <fieldset> з'явився тільки у HTML5.
Коментарі
Коментарів ще немає — будьте першим!