Событие `submit` формы: Тренажер JavaScript: Покоряем HTML DOM

Тренажер по работе с HTML DOM на JavaScript для пользователей с начальным и средним уровнем подготовки.

В этом тренажере вы попрактикуетесь в использовании события `submit` для форм в JavaScript. Событие `submit` возникает, когда пользователь отправляет форму, обычно нажатием кнопки \"Отправить\" или клавиши Enter. Вы научитесь перехватывать это событие, предотвращать стандартное поведение браузера (перезагрузку страницы), получать данные из полей формы и выполнять с ними различные действия. Задания охватывают различные сценарии, от простой валидации до отправки данных без перезагрузки страницы. В каждом задании вам будет предоставлен HTML-код формы и часть JavaScript-кода, который вам нужно будет дополнить.

Список тем

Простое перехватывание события submit

Допишите JavaScript-код так, чтобы при отправке формы (нажатии на кнопку "Отправить") стандартное поведение браузера (перезагрузка страницы) предотвращалось. В консоль должно выводиться сообщение "Форма отправлена!".

HTML

Восстановить HTML

                      <form id="myForm">
  <input type="text" name="name" value="Иван">
  <input type="email" name="email" value="ivan@example.com">
  <button type="submit">Отправить</button>
</form>

<form id="myForm">
  <input type="text" name="name" value="Иван">
  <input type="email" name="email" value="ivan@example.com">
  <button type="submit">Отправить</button>
</form>

JavaScript

const form = document.getElementById("myForm");

form.addEventListener(input__1, (event) => {
  event.input__2();
  console.log("Форма отправлена!");
});

                     const form = document.getElementById("myForm");

form.addEventListener(input__1, (event) => {
  event.input__2();
  console.log("Форма отправлена!");
});

Используйте метод `addEventListener` для добавления обработчика события `submit` к форме. Внутри обработчика вызовите метод `preventDefault()` у объекта события, чтобы предотвратить стандартное поведение.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Получение данных из формы

Дополните код так, чтобы при отправке формы в консоль выводились значения полей "name" и "email". Предотвратите стандартное поведение браузера.

HTML

Восстановить HTML

                      <form id="myForm">
  <input type="text" name="name" value="Иван">
  <input type="email" name="email" value="ivan@example.com">
  <button type="submit">Отправить</button>
</form>

<form id="myForm">
  <input type="text" name="name" value="Иван">
  <input type="email" name="email" value="ivan@example.com">
  <button type="submit">Отправить</button>
</form>

JavaScript

const form = document.getElementById("myForm");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const name = event.target.input__1.value;
  const email = event.input__2.input__3.value;

  console.log("Имя:", name);
  console.log("Email:", email);
});

                     const form = document.getElementById("myForm");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const name = event.target.input__1.value;
  const email = event.input__2.input__3.value;

  console.log("Имя:", name);
  console.log("Email:", email);
});

Используйте `event.target` для доступа к форме, отправившей событие. Затем получите доступ к элементам формы по их именам (атрибут `name`) и получите их значения с помощью свойства `value`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Валидация формы

Допишите код, чтобы при отправке формы проверялось, заполнено ли поле "name". Если поле пустое, выведите сообщение "Пожалуйста, введите имя" в элемент с id="error-message" и предотвратите отправку формы. Если поле заполнено, отправка формы должна быть предотвращена, а в консоль должно выводиться сообщение с введенным именем.

HTML

Восстановить HTML

                      <form id="myForm">
  <input type="text" name="name" value="">
  <input type="email" name="email" value="ivan@example.com">
  <button type="submit">Отправить</button>
  <div id="error-message"></div>
</form>

<form id="myForm">
  <input type="text" name="name" value="">
  <input type="email" name="email" value="ivan@example.com">
  <button type="submit">Отправить</button>
  <div id="error-message"></div>
</form>

JavaScript

const form = document.getElementById("myForm");
const errorMessage = document.getElementById("error-message");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const name = event.target.name.value;

  if (input__1 === "") {
    errorMessage.textContent = input__2;
  } else {
    console.log("Имя:", name);
  }
});

                     const form = document.getElementById("myForm");
const errorMessage = document.getElementById("error-message");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const name = event.target.name.value;

  if (input__1 === "") {
    errorMessage.textContent = input__2;
  } else {
    console.log("Имя:", name);
  }
});

Получите значение поля "name". Используйте условный оператор `if`, чтобы проверить, пустое ли оно. Для вывода сообщения об ошибке используйте свойство `textContent` элемента с id="error-message".

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Изменение содержимого страницы после отправки

Допишите код, чтобы после отправки формы (и предотвращения стандартного поведения) содержимое элемента с id="output" менялось на "Спасибо за отправку, {имя}!", где {имя} - значение из поля "name".

HTML

Восстановить HTML

                      <form id="myForm">
  <input type="text" name="name" value="Иван">
  <button type="submit">Отправить</button>
</form>
<div id="output"></div>

<form id="myForm">
  <input type="text" name="name" value="Иван">
  <button type="submit">Отправить</button>
</form>
<div id="output"></div>

JavaScript

const form = document.getElementById("myForm");
const output = document.getElementById("output");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const name = event.target.name.value;
  output.textContent = input__1;
});

                     const form = document.getElementById("myForm");
const output = document.getElementById("output");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const name = event.target.name.value;
  output.textContent = input__1;
});

Получите значение поля "name". Используйте интерполяцию строк (шаблонные строки) для создания нового текста. Присвойте этот текст свойству `textContent` элемента с id="output".

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Добавление данных в список

Допишите код, чтобы при отправке формы значение из поля "item" добавлялось в список (ul) с id="list" в виде нового элемента списка (li). Предотвратите стандартное поведение браузера.

HTML

Восстановить HTML

                      <form id="myForm">
  <input type="text" name="item" value="Новый элемент">
  <button type="submit">Добавить</button>
</form>
<ul id="list"></ul>

<form id="myForm">
  <input type="text" name="item" value="Новый элемент">
  <button type="submit">Добавить</button>
</form>
<ul id="list"></ul>

JavaScript

const form = document.getElementById("myForm");
const list = document.getElementById("list");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const newItemText = event.target.item.value;
  const newItem = document.input__1(input__2);
  newItem.textContent = newItemText;
  list.input__3(newItem);
});

                     const form = document.getElementById("myForm");
const list = document.getElementById("list");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const newItemText = event.target.item.value;
  const newItem = document.input__1(input__2);
  newItem.textContent = newItemText;
  list.input__3(newItem);
});

Создайте новый элемент `li` с помощью `document.createElement('li')`. Присвойте свойству `textContent` нового элемента значение поля "item". Добавьте новый элемент в список с помощью метода `appendChild()`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Условное отображение содержимого

Допишите код, чтобы при отправке формы, если значение поля "age" больше или равно 18, в элементе с id="message" отображался текст "Совершеннолетний", иначе - "Несовершеннолетний". Стандартное поведение браузера должно быть предотвращено.

HTML

Восстановить HTML

                      <form id="myForm">
  <input type="number" name="age" value="20">
  <button type="submit">Проверить</button>
</form>
<div id="message"></div>

<form id="myForm">
  <input type="number" name="age" value="20">
  <button type="submit">Проверить</button>
</form>
<div id="message"></div>

JavaScript

const form = document.getElementById("myForm");
const message = document.getElementById("message");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const age = Number(event.target.age.value);

  if (age input__1 18) {
    message.textContent = "Совершеннолетний";
  } input__2 {
    message.textContent = "Несовершеннолетний";
  }
});

                     const form = document.getElementById("myForm");
const message = document.getElementById("message");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const age = Number(event.target.age.value);

  if (age input__1 18) {
    message.textContent = "Совершеннолетний";
  } input__2 {
    message.textContent = "Несовершеннолетний";
  }
});

Получите значение поля "age", приведите его к числу с помощью `Number()`. Используйте условный оператор `if/else` для проверки возраста. Присвойте соответствующий текст свойству `textContent` элемента с id="message".

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Изменение класса элемента

Допишите код, чтобы при отправке формы элементу с id="myDiv" добавлялся класс "submitted", если он отсутствует, или удалялся, если он присутствует. Предотвратите стандартное поведение браузера.

HTML

Восстановить HTML

                      <form id="myForm">
  <button type="submit">Изменить класс</button>
</form>
<div id="myDiv"></div>

<form id="myForm">
  <button type="submit">Изменить класс</button>
</form>
<div id="myDiv"></div>

JavaScript

const form = document.getElementById("myForm");
const myDiv = document.getElementById("myDiv");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  myDiv.classList.input__1("submitted");
});

                     const form = document.getElementById("myForm");
const myDiv = document.getElementById("myDiv");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  myDiv.classList.input__1("submitted");
});

Используйте свойство `classList` и его метод `toggle()` для добавления/удаления класса.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Отображение/скрытие элемента

Допишите код, чтобы при отправке формы, если чекбокс с id="show" отмечен, элемент с id="secret" становился видимым (добавлялся класс "visible"), иначе - скрывался (класс "visible" удалялся). Предотвратите стандартное поведение браузера. CSS-класс "visible" уже определен в стилях.

HTML

Восстановить HTML

                      <style>
.visible {
  display: block;
}
</style>
<form id="myForm">
  <input type="checkbox" id="show" name="show">
  <label for="show">Показать секрет</label>
  <button type="submit">Отправить</button>
</form>
<div id="secret" style="display: none;">Секретный контент</div>

<style>
.visible {
  display: block;
}
</style>
<form id="myForm">
  <input type="checkbox" id="show" name="show">
  <label for="show">Показать секрет</label>
  <button type="submit">Отправить</button>
</form>
<div id="secret" style="display: none;">Секретный контент</div>

JavaScript

const form = document.getElementById("myForm");
const secret = document.getElementById("secret");
const showCheckbox = document.getElementById("show");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  if (showCheckbox.input__1) {
    secret.classList.add("visible");
  } else {
    secret.classList.input__2("visible");
  }
});

                     const form = document.getElementById("myForm");
const secret = document.getElementById("secret");
const showCheckbox = document.getElementById("show");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  if (showCheckbox.input__1) {
    secret.classList.add("visible");
  } else {
    secret.classList.input__2("visible");
  }
});

Получите состояние чекбокса с помощью свойства `checked`. Используйте условный оператор `if/else` и методы `add()` и `remove()` свойства `classList` для управления классом "visible".

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Изменение изображения

Допишите код, чтобы при отправке формы, если в поле "imageNumber" введено число 1, 2, 3 или 4, то у элемента `img` с id="myImage" менялся атрибут `src` на соответствующую картинку (используйте предоставленные URL). Если введено другое число, то в элемент с id="imageMessage" выводилось сообщение "Введите число от 1 до 4". Предотвратите стандартное поведение.

HTML

Восстановить HTML

                      <form id="myForm">
 <input type="number" name="imageNumber" value="1">
 <button type="submit">Сменить картинку</button>
</form>
<img id="myImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" width="150">
<div id="imageMessage"></div>

<form id="myForm">
 <input type="number" name="imageNumber" value="1">
 <button type="submit">Сменить картинку</button>
</form>
<img id="myImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" width="150">
<div id="imageMessage"></div>

JavaScript

const form = document.getElementById("myForm");
const myImage = document.getElementById("myImage");
const imageMessage = document.getElementById("imageMessage");

const imageUrls = [
 "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png",
 "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png",
 "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png",
 "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike4-300x300.png"
];

form.addEventListener("submit", (event) => {
 event.preventDefault();

 const imageNumber = Number(event.target.imageNumber.value);

 imageMessage.textContent = "";

 if (imageNumber >= 1 && imageNumber <= 4) {
 myImage.src = imageUrls[imageNumber input__1 1];
 } else {
 imageMessage.textContent = input__2;
 }
});

                     const form = document.getElementById("myForm");
const myImage = document.getElementById("myImage");
const imageMessage = document.getElementById("imageMessage");

const imageUrls = [
 "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png",
 "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png",
 "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png",
 "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike4-300x300.png"
];

form.addEventListener("submit", (event) => {
 event.preventDefault();

 const imageNumber = Number(event.target.imageNumber.value);

 imageMessage.textContent = "";

 if (imageNumber >= 1 && imageNumber <= 4) {
 myImage.src = imageUrls[imageNumber input__1 1];
 } else {
 imageMessage.textContent = input__2;
 }
});

Получите значение поля "imageNumber". Используйте условный оператор (можно `switch/case` или `if/else if/else`) для проверки введенного числа и изменения атрибута `src` у изображения.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку