9.1 Основні події форм
Для забезпечення функціональності форм необхідно розуміти та керувати подіями, які відбуваються при взаємодії користувача з елементами форми. Нижче ми детально розглянемо основні події форм у HTML, їх обробку за допомогою JavaScript і приклади їх використання.
У HTML форми можуть генерувати різні події, які відбуваються при взаємодії користувача з елементами форми, такими як поля вводу, кнопки, прапорці та радіокнопки. Основні події форм включають:
- submit — подія відправки форми
- reset — подія скидання форми
- focus — подія, коли елемент отримує фокус
- blur — подія, коли елемент втрачає фокус
- change — подія зміни значення елемента форми
- input — подія вводу даних у елемент форми
- select — подія виділення тексту в елементі форми
9.2 Подія submit
Подія submit відбувається при відправці форми. Зазвичай це відбувається, коли користувач натискає кнопку "Submit" у формі. Обробка цієї події дозволяє виконувати валідацію даних перед їх відправкою на сервер, запобігати відправці форми при помилках вводу та виконувати інші дії.
Приклад обробки події submit:
HTML
<form id="my-form" action="/submit" method="post">
<label for="username">Ім'я користувача:</label>
<input type="text" id="username" name="username">
<button type="submit">Відправити</button>
</form>
JavaScript
const form = document.getElementById('my-form');
form.addEventListener('submit', function(event) {
const username = document.getElementById('username').value;
if (username === '') {
alert('Будь ласка, введіть ім'я користувача.');
event.preventDefault(); // запобігаємо відправці форми
} else {
alert(`Отримано ім'я користувача: ${username}`);
event.preventDefault();
}
});
JavaScript
const form = document.getElementById('my-form');
form.addEventListener('submit', function(event) {
const username = document.getElementById('username').value;
if (username === '') {
alert('Будь ласка, введіть ім'я користувача.');
event.preventDefault(); // запобігаємо відправці форми
}
});
9.3 Подія reset
Подія reset відбувається при скиданні форми до її початкового стану. Зазвичай це відбувається, коли користувач натискає кнопку "Reset". Обробка цієї події може бути корисною для виконання додаткових дій при скиданні форми, таких як очищення повідомлень про помилки.
Приклад обробки події reset:
HTML
<div style="min-height: 220px">
<form id="my-form">
<label for="name">Ім'я:</label>
<br>
<input type="text" id="name" name="name">
<br><br>
<label for="email">Email:</label>
<br>
<input type="email" id="email" name="email">
<br><br>
<label for="password">Пароль:</label>
<br>
<input type="password" id="password" name="password">
<div style="margin-top: 10px">
<button id="btn" type="button">Скинути</button>
</div>
</form>
<p id="log"></p>
</div>
HTML
<form id="my-form">
<label for="name">Ім'я:</label>
<br>
<input type="text" id="name" name="name">
<br><br>
<label for="email">Email:</label>
<br>
<input type="email" id="email" name="email">
<br><br>
<label for="password">Пароль:</label>
<br>
<input type="password" id="password" name="password">
<div style="margin-top: 10px">
<button type="reset">Скинути</button>
</div>
</form>
<p id="log"></p>
JavaScript
const form = document.getElementById('my-form');
const btn = document.getElementById('btn');
const n = document.getElementById('name');
const e = document.getElementById('email');
const p = document.getElementById('password');
const log = document.getElementById('log');
document.addEventListener('DOMContentLoaded', () => {
n.value = "John";
e.value = "john@mail.com";
p.value = "qwerty";
});
btn.addEventListener('click', () => {
n.value = "";
e.value = "";
p.value = "";
log.textContent = 'Форма була скинута!';
});
JavaScript
const form = document.getElementById('my-form');
const log = document.getElementById('log');
form.addEventListener('reset', function () {
log.textContent = 'Форма була скинута!';
});
9.4 Події focus і blur
Події focus і blur відбуваються, коли елемент форми отримує і втрачає фокус відповідно. Ці події часто використовуються для покращення взаємодії користувача з формою, наприклад, для відображення підказок або повідомлень про помилки.
Приклад обробки події focus:
HTML
<div style="min-height: 55px">
<form id="my-form">
<label for="username">Ім'я користувача:</label>
<input type="text" id="username" name="username">
<div id="username-hint" style="display: none;">
Ви побачите цю підказку в момент фокусу на полі.
Вона буде видна навіть після зміни фокусу.
</div>
</form>
</div>
HTML
<form id="my-form">
<label for="username">Ім'я користувача:</label>
<input type="text" id="username" name="username">
<div id="username-hint" style="display: none;">
Ви побачите цю підказку в момент фокусу на полі.
Вона буде видна навіть після зміни фокусу.
</div>
</form>
JavaScript
const form = document.getElementById('my-form');
const usernameInput = document.getElementById('username');
const hint = document.getElementById('username-hint');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
usernameInput.addEventListener('focus', function (event) {
hint.style.display = 'block';
});
JavaScript
const usernameInput = document.getElementById('username');
const hint = document.getElementById('username-hint');
usernameInput.addEventListener('focus', function () {
hint.style.display = 'block';
});
Приклад обробки події blur:
HTML
<div style="min-height: 55px">
<form id="my-form">
<label for="username">Ім'я користувача:</label>
<input type="text" id="username" name="username">
<div id="username-error" style="display: none; color: red;">
Помилка з'явиться тільки у випадку, якщо поле буде порожнім після зміни фокусу
</div>
</form>
</div>
HTML
<form id="my-form">
<label for="username">Ім'я користувача:</label>
<input type="text" id="username" name="username">
<div id="username-error" style="display: none; color: red;">
Помилка з'явиться тільки у випадку, якщо поле буде порожнім після зміни фокусу
</div>
</form>
JavaScript
const form = document.getElementById('my-form');
const usernameInput = document.getElementById('username');
const error = document.getElementById('username-error');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
usernameInput.addEventListener('blur', function (event) {
error.style.display = usernameInput.value === '' ? 'block' : 'none';
});
JavaScript
const usernameInput = document.getElementById('username');
const error = document.getElementById('username-error');
usernameInput.addEventListener('blur', function () {
error.style.display = usernameInput.value === '' ? 'block' : 'none';
});
9.5 Подія input
Подія input відбувається кожного разу, коли значення елемента форми змінюється, незалежно від того, чи втрачає елемент фокус. Ця подія часто використовується для миттєвої перевірки введення користувача, наприклад, при валідації полів введення в режимі реального часу.
Приклад обробки події input:
HTML
<html lang="uk">
<head>
<style>
input {
outline: none;
}
.valid {
border-color: green;
}
.invalid {
border-color: red;
}
.wrapper-valid::after {
content: "Email валідний";
margin-left: 5px;
color: green;
}
.wrapper-invalid::after {
content: "Email не валідний";
margin-left: 5px;
color: red;
}
</style>
</head>
<body>
<form id="my-form">
<label for="email">Email:</label>
<div id="wrapper">
<input type="email" id="email" name="email">
</div>
</form>
</body>
</html>
JavaScript
const form = document.getElementById('my-form');
const inputWrapper = document.getElementById('wrapper');
const emailInput = document.getElementById('email');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
emailInput.addEventListener('input', function () {
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (emailPattern.test(emailInput.value)) {
inputWrapper.classList.add('wrapper-valid');
inputWrapper.classList.remove('wrapper-invalid');
emailInput.classList.add('valid');
emailInput.classList.remove('invalid');
} else {
inputWrapper.classList.add('wrapper-invalid');
inputWrapper.classList.remove('wrapper-valid');
emailInput.classList.add('invalid');
emailInput.classList.remove('valid');
}
});
JavaScript
const emailInput = document.getElementById('email');
const inputWrapper = document.getElementById('wrapper');
emailInput.addEventListener('input', function () {
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (emailPattern.test(emailInput.value)) {
emailInput.classList.add('valid');
emailInput.classList.remove('invalid');
} else {
emailInput.classList.add('invalid');
emailInput.classList.remove('valid');
}
});
9.6 Подія select
Подія select відбувається, коли користувач виділяє текст у елементі форми, такому як поле введення або текстове поле. Ця подія може бути корисною для виконання дій при виділенні тексту, наприклад, для відображення кнопки копіювання.
Приклад обробки події select:
HTML
<div style="min-height: 55px">
<form id="my-form">
<label for="text-input">Введіть текст:</label>
<input type="text" id="text" name="text">
<div id="select-message"></div>
</form>
</div>
HTML
<form id="my-form">
<label for="text-input">Введіть текст:</label>
<input type="text" id="text" name="text">
<div id="select-message"></div>
</form>
JavaScript
document.addEventListener('DOMContentLoaded', function () {
const form = document.getElementById('my-form');
const textInput = document.getElementById('text');
const selectMessage = document.getElementById('select-message');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
textInput.addEventListener('select', function () {
selectMessage.textContent = 'Ви виділили текст!';
});
});
JavaScript
document.addEventListener('DOMContentLoaded', function () {
const textInput = document.getElementById('text');
const selectMessage = document.getElementById('select-message');
textInput.addEventListener('select', function () {
selectMessage.textContent = 'Ви виділили текст!';
});
});
9.7 Подія change
Подія change відбувається, коли значення елемента форми змінюється і користувач залишає елемент (втрачає фокус). Ця подія часто використовується для перевірки змін у полях форми, таких як випадаючі списки або прапорці.
Приклад обробки події change:
HTML
<form id="my-form">
<label for="color-select">Виберіть колір:</label>
<select id="color-select" name="color">
<option value="red">Червоний</option>
<option value="green">Зелений</option>
<option value="blue">Синій</option>
</select>
</form>
JavaScript
document.addEventListener('DOMContentLoaded', function () {
const form = document.getElementById('my-form');
const selectElement = document.getElementById('color-select');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
selectElement.addEventListener('change', function () {
alert('Ви обрали колір: ' + selectElement.value);
});
});
JavaScript
document.addEventListener('DOMContentLoaded', function () {
const selectElement = document.getElementById('color-select');
selectElement.addEventListener('change', function () {
alert('Ви обрали колір: ' + selectElement.value);
});
});
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ