JavaScript - События форм: Пособие для начинающих

Здравствуйте, ambitные разработчики! Как преподаватель информатики с многолетним опытом, я буду рад помочь вам окунуться в захватывающий мир событий форм на JavaScript. Не волнуйтесь, если вы новички в программировании - мы начнем с азов и будем двигаться дальше. Так что возьмите杯 кофе, устройтесь поудобнее и погружайтесь с мной!

Что такое события форм?

Прежде чем углубиться в детали, давайте поймем, что такое события форм. В веб-разработке формы resemble бумажную документацию - они собирают информацию от пользователей. События форм - это особые occurrences, которые происходят при взаимодействии пользователей с этими формами. Это как когда вы заполняете заявку на работу, и секретарь замечает каждый раз, когда вы поднимаете или опускаете ручку - вот что делают события форм в цифровом мире!

Распространенные события форм

Давайте рассмотрим некоторые из самых распространенных событий форм, с которыми вы столкнетесь:

Название события	Описание
submit	Вызывается при отправке формы
reset	Вызывается при сбросе формы
focus	Вызывается при получении элементом фокуса
blur	Вызывается при потере элементом фокуса
change	Вызывается при изменении значения элемента ввода
input	Вызывается при изменении значения элемента ввода (при каждом нажатии клавиши)

Теперь давайте рассмотрим каждый из них с практическими примерами!

Примеры использования событий форм

1. Событие Submit

Событие submit, возможно,是最常见的形式事件, которое вы используете. Оно срабатывает, когда пользователь пытается отправить форму.

<form id="myForm">
<input type="text" id="name" placeholder="Введите ваше имя">
<button type="submit">Отправить</button>
</form>

<script>
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault(); // Prevent the form from actually submitting
var name = document.getElementById("name").value;
alert("Здравствуйте, " + name + "! Вашу форму отправили.");
});
</script>

В этом примере мы слушаем собыение submit на нашей форме. Когда оно occurs, мы предотвращаем поведение по умолчанию (которое было бы фактической отправкой формы), получаем значение из поля имени и отображаем alert с приветствием.

2. Событие Reset

Событие reset occurs, когда форма сбрасывается до своих исходных значений. Это как если бы вы нажали кнопку "отменить" на вашей форме!

<form id="myForm">
<input type="text" id="name" placeholder="Введите ваше имя">
<button type="reset">Сбросить</button>
</form>

<script>
document.getElementById("myForm").addEventListener("reset", function(event) {
alert("Форма была сброшена!");
});
</script>

Здесь, whenever按钮 сброса clicked, появится alert, чтобы通知ить вас, что форма была сброшена.

3. События Focus и Blur

События Focus и blur resemblespotlight в мире форм. Focus происходит, когда элемент получает spotlight, а blur - когда он его теряет.

<input type="text" id="myInput" placeholder="Нажмите меня!">

<script>
var input = document.getElementById("myInput");

input.addEventListener("focus", function() {
this.style.backgroundColor = "yellow";
});

input.addEventListener("blur", function() {
this.style.backgroundColor = "";
});
</script>

В этом примере, когда вы нажимаете (фокусируете) на ввод, он становится желтым. Когда вы кликаете elsewhere (теряете фокус), он возвращается к нормальному состоянию. Это как если бы ввод был стеснительным и покраснел, когда вы обратили на него внимание!

4. Событие Change

Событие change срабатывает, когда значение элемента ввода изменяется и элемент теряет фокус.

<select id="colorSelect">
<option value="">Выберите цвет</option>
<option value="red">Красный</option>
<option value="blue">Синий</option>
<option value="green">Зеленый</option>
</select>

<script>
document.getElementById("colorSelect").addEventListener("change", function() {
document.body.style.backgroundColor = this.value;
});
</script>

Этот скрипт изменяет фоновый цвет страницы в зависимости от вашего выбора. Это как если бы у вас была магическая палочка, которая красит всю комнату!

5. Событие Input

Событие input похоже на собыение change, но оно срабатывает немедленно после изменения значения.

<input type="text" id="textInput" placeholder="Напишите что-то...">
<p id="output"></p>

<script>
var input = document.getElementById("textInput");
var output = document.getElementById("output");

input.addEventListener("input", function() {
output.textContent = "Вы ввели: " + this.value;
});
</script>

Этот пример показывает обратную связь в реальном времени по мере вашего ввода. Это как если бы у вас был доброжелательный эхо, который повторяет то, что вы говорите, но в виде текста!

Объединение всего вместе

Теперь, когда мы видели эти собыения в действии, давайте создадим более сложный пример, который использует несколько собыений:

<form id="registrationForm">
<input type="text" id="username" placeholder="Имя пользователя">
<input type="password" id="password" placeholder="Пароль">
<input type="email" id="email" placeholder="Электронная почта">
<button type="submit">Зарегистрироваться</button>
<button type="reset">Очистить</button>
</form>

<script>
var form = document.getElementById("registrationForm");
var username = document.getElementById("username");
var password = document.getElementById("password");
var email = document.getElementById("email");

// Событие Submit
form.addEventListener("submit", function(event) {
event.preventDefault();
alert("Регистрация отправлена для " + username.value);
});

// Событие Reset
form.addEventListener("reset", function() {
alert("Форма очищена!");
});

// События Focus
[username, password, email].forEach(function(element) {
element.addEventListener("focus", function() {
this.style.backgroundColor = "#e6f3ff";
});
});

// События Blur
[username, password, email].forEach(function(element) {
element.addEventListener("blur", function() {
this.style.backgroundColor = "";
});
});

// Событие Input
email.addEventListener("input", function() {
if (this.value.includes("@")) {
this.style.borderColor = "green";
} else {
this.style.borderColor = "red";
}
});
</script>

Эта регистрационная форма demonstrates все собыения, которые мы узнали:

• Событие submit предотвращает фактическую отправку формы и показывает alert вместо этого.
• Событие reset уведомляет, когда форма очищена.
• События focus и blur изменяют фоновый цвет вводов при их выделении.
• Событие input на поле электронной почты изменяет цвет рамки в зависимости от наличия символа "@".

Заключение

Поздравляю! Вы только что сделали свои первые шаги в мир собыений форм на JavaScript. Помните, эти собыения resemble senses вашей веб-страницы - они помогают вашему коду "видеть" и "чувствовать", что делает пользователь. С практикой вы сможете создавать интерактивные и-responsive формы, которые оживят ваши веб-сайты.

Продолжайте экспериментировать, продолжайте программировать и, что самое главное, получайте удовольствие! Путь в тысячу миль начинается с одного шага, и вы уже сделали большой шаг. Счастливого кодирования, будущие разработчики!

Credits: Image by storyset