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'); // getElementById — позволяет получить доступ к элементу страницы по его id.
form.addEventListener('submit', function(event) { // addEventListener — реагирует на действия пользователя или события браузера.
const username = document.getElementById('username').value;
if (username === '') {
alert('Пожалуйста, введите имя пользователя.');
event.preventDefault(); // предотвращаем отправку формы
} else {
alert(`Получено имя пользователя: ${username}`);
event.preventDefault();
}
});
JavaScript
const form = document.getElementById('my-form'); // getElementById — позволяет получить доступ к элементу страницы по его id.
form.addEventListener('submit', function(event) { // addEventListener — реагирует на действия пользователя или события браузера.
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">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">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">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">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'); // getElementById — позволяет получить доступ к элементу страницы по его id.
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', () => { // addEventListener — реагирует на действия пользователя или события браузера.
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'); // getElementById — позволяет получить доступ к элементу страницы по его id.
const log = document.getElementById('log');
form.addEventListener('reset', function () { // addEventListener — реагирует на действия пользователя или события браузера.
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'); // getElementById — позволяет получить доступ к элементу страницы по его id.
const usernameInput = document.getElementById('username');
const hint = document.getElementById('username-hint');
form.addEventListener("submit", (event) => { // addEventListener — реагирует на действия пользователя или события браузера.
event.preventDefault();
});
usernameInput.addEventListener('focus', function (event) {
hint.style.display = 'block';
});
JavaScript
const usernameInput = document.getElementById('username'); // getElementById — позволяет получить доступ к элементу страницы по его id.
const hint = document.getElementById('username-hint');
usernameInput.addEventListener('focus', function () { // addEventListener — реагирует на действия пользователя или события браузера.
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'); // getElementById — позволяет получить доступ к элементу страницы по его id.
const usernameInput = document.getElementById('username');
const error = document.getElementById('username-error');
form.addEventListener("submit", (event) => { // addEventListener — реагирует на действия пользователя или события браузера.
event.preventDefault();
});
usernameInput.addEventListener('blur', function (event) {
error.style.display = usernameInput.value === '' ? 'block' : 'none';
});
JavaScript
const usernameInput = document.getElementById('username'); // getElementById — позволяет получить доступ к элементу страницы по его id.
const error = document.getElementById('username-error');
usernameInput.addEventListener('blur', function () { // addEventListener — реагирует на действия пользователя или события браузера.
error.style.display = usernameInput.value === '' ? 'block' : 'none';
});
9.5 Событие input
Событие input происходит каждый раз, когда значение элемента формы изменяется, независимо от того, теряет ли элемент фокус. Это событие часто используется для немедленной проверки ввода пользователя, например, при валидации полей ввода в режиме реального времени.
Пример обработки события input:
HTML
<html lang="ru">
<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'); // getElementById — позволяет получить доступ к элементу страницы по его id.
const inputWrapper = document.getElementById('wrapper');
const emailInput = document.getElementById('email');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
emailInput.addEventListener('input', function () { // addEventListener — реагирует на действия пользователя или события браузера.
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'); // getElementById — позволяет получить доступ к элементу страницы по его id.
const inputWrapper = document.getElementById('wrapper');
emailInput.addEventListener('input', function () { // addEventListener — реагирует на действия пользователя или события браузера.
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 () { // addEventListener — реагирует на действия пользователя или события браузера.
const form = document.getElementById('my-form'); // getElementById — позволяет получить доступ к элементу страницы по его id.
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 () { // addEventListener — реагирует на действия пользователя или события браузера.
const textInput = document.getElementById('text'); // getElementById — позволяет получить доступ к элементу страницы по его id.
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 () { // addEventListener — реагирует на действия пользователя или события браузера.
const form = document.getElementById('my-form'); // getElementById — позволяет получить доступ к элементу страницы по его id.
const selectElement = document.getElementById('color-select');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
selectElement.addEventListener('change', function () {
alert('Вы выбрали цвет: ' + selectElement.value);
});
});
JavaScript
document.addEventListener('DOMContentLoaded', function () { // addEventListener — реагирует на действия пользователя или события браузера.
const selectElement = document.getElementById('color-select'); // getElementById — позволяет получить доступ к элементу страницы по его id.
selectElement.addEventListener('change', function () {
alert('Вы выбрали цвет: ' + selectElement.value);
});
});
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ