Page 140 - 6108

При натисканні на кнопки відбудеться очищення форм. Але таку ж
функціональність по очищенню полів форми можна реалізувати за допомогою
методу reset().
Крім спеціальних кнопок відправки і очищення на формі також може
використовуватися звичайна кнопка:

<button type = "button" name = "calculate">Перевірити</button>
<input type = "button" name = "audit" value = "Перевірити" />

При натисканні на подібну кнопку відправки даних не відбувається, але
генерується подія click.
При відправці форми виникає подія submit. Найчастіше вона
використовується при валідації (перевірці) форми перед відправкою. Обробник
події може перевірити дані і, якщо вони невірні, то вивести помилку і зробити
event.preventDefault() – тоді форма не відправиться на сервер.
Щоб відправити форму на сервер, у користувача є два способи:
1) натиснути кнопку з атрибутом type = "submit".
2) натиснути Enter, перебуваючи на довільному полі форми.

function sendForm(event){
let keyBox = document.search.key;
let val = keyBox.value;
if (val.length < 5){
alert("Недопустима довжина рядка");
document.search.reset(); // очистка форми
event.preventDefault(); // відміна відправки
}
else alert("Перевірку пройдено!");
}

Метод submit дозволяє ініціювати надсилання форми з JavaScript, без
участі користувача. Для цього необхідно викликати на елементі форми метод
form.submit().
При цьому сама подія submit не генерується. Передбачається, що якщо
програміст викликає метод form.submit(), то він виконав всі перевірки. Це
використовують, зокрема, для штучної генерації і відправки форми.
Валідація форм
Валідація в HTML5
HTML5 ввів алгоритм перевірки обмежень, який працює в сучасних
браузерах, і перевіряє правильність призначеного для користувача введення.
Завдяки функції перевірки обмежень в HTML5, ми можемо виконати всі
стандартні завдання перевірки вхідних даних на стороні клієнта без JavaScript,
виключно з HTML5.
Крім тих типів вхідних даних, які вже існували до HTML5 (text, password,
submit, reset, radio, checkbox, button, hidden), ми можемо також використовувати
такі змістовні HTML5 типи: email, tel, url, number, time, date, datetime, datetime-
local, month, week, range, search, color.
Для валідації можна використати семантичні атрибути required,
maxlength, max, min, step, pattern.