Атрибут formnovalidate у <input> — відправка без перевірки
Скасовує вбудовану перевірку даних введених користувачем у формі на коректність перед відправкою форми.
Така перевірка робиться браузером автоматично для полів <input type = "email">, <input type = "url">, а також при наявності атрибута pattern або required у елемента <input>.
Атрибут formnovalidate перевизначає атрибут novalidate елемента <form>.
Загальний опис
автор: NagarD
- Нотатка
-
Логічний атрибут
formnovalidateможе бути встановлений в такий спосіб:<input formnovalidate><input formnovalidate="formnovalidate"><input formnovalidate="">
- Нотатка
-
Атрибут
автор: с3сformnovalidateможе використовуватися зtype="submit".
Синтаксис
<input type="submit" formnovalidate>Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 4 | 4 | 5 | ≤12.1 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 4 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута formnovalidate теґа <input>
HTML
<p>Приклад використанням атрибуту 'formnovalidate'</p>
<hr>
<form >
<p>З використанням formnovalidate </p>
<p><input required placeholder="Ім'я"></p>
<p><input type="email" required placeholder="Ваш email"></p>
<p><input type="url" required placeholder="Сайт"></p>
<p><input type="submit" formnovalidate></p>
</form>
<form>
<p>Без використанням formnovalidate</p>
<p><input required placeholder="Ім'я"></p>
<p><input type="email" required placeholder="Ваш email"></p>
<p><input type="url" required placeholder="Сайт"></p>
<p><input type="submit"></p>
</form>CSS
form {
width:400px;
float:left;
}Форма з обов'язковим полем і чотири кнопки під нею. Зелена рамка — браузер вважає поле правильним, червона — ні. Кнопки з formnovalidate підсвічено окремо селектором за атрибутом, і серед них є дві пастки: formnovalidate="false" (однаково вимикає перевірку) і type="button", де атрибут мертвий.
HTML
<form class="demo">
<p class="title">Обов'язкове поле — поки воно порожнє, форма хибна</p>
<label for="a">Пошта</label>
<input id="a" type="email" required placeholder="напишіть щось і подивіться на рамку">
<p class="bar">
<input type="submit" value="Надіслати — тут перевірка є">
<input type="submit" formnovalidate value="Зберегти чернетку">
<input type="submit" formnovalidate="false" value="formnovalidate="false"">
<input type="button" formnovalidate value="type="button" — атрибут мертвий">
</p>
<p class="note">Синім обведено кнопки, у яких є атрибут formnovalidate: селектор
[formnovalidate] бачить його і там, де значенням написано «false».</p>
</form>
<form class="demo" novalidate>
<p class="title">Та сама форма, але novalidate стоїть на самій формі</p>
<label for="b">Пошта</label>
<input id="b" type="email" required placeholder="рамка однаково червона">
<p class="bar"><input type="submit" value="Надіслати"></p>
<p class="note">Перевірка на надсиланні вимкнена для всієї форми — а от стан поля
нікуди не подівся: :invalid далі збігається, і стилі це показують.</p>
</form>CSS
.demo {
max-width: 560px;
margin-bottom: 18px;
padding: 12px 14px;
border: 1px solid #b9c6d8;
border-radius: 6px;
background: #f6f9ff;
}
.title {
margin: 0 0 10px;
font-weight: 600;
}
label {
display: block;
margin-bottom: 4px;
font-weight: 600;
}
input[type="email"] {
min-width: 320px;
padding: 6px 8px;
font: 15px/1.4 ui-monospace, monospace;
border: 2px solid #b9c6d8;
border-radius: 4px;
}
input[type="email"]:valid {
border-color: #3a9a4f;
background: #f3fbf4;
}
input[type="email"]:invalid {
border-color: #d64545;
background: #fff4f4;
}
.bar {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 12px 0 0;
}
.bar input {
padding: 6px 10px;
font: inherit;
border: 2px solid #b9c6d8;
border-radius: 4px;
background: #fff;
}
.bar input[formnovalidate] {
border-color: #2f6fd0;
background: #eef3fb;
}
.note {
margin: 10px 0 0;
color: #5a6472;
font-size: .9em;
}Різниця між HTML 4.01 та HTML5
Атрибут formnovalidate з'явився тільки в HTML5.
Коментарі
Коментарів ще немає — будьте першим!