Формы — это шлюз для сбора пользовательских данных. Давайте создадим простую рабочую форму!

Откройте редактор кода по вашему выбору (VS Code — отличный вариант с открытым исходным кодом) и настройте два документа с именами index.html и index.js. Затем скопируйте и вставьте этот шаблон HTML из freeCodeCamp в index.html.

<!DOCTYPE html>
<html lang=”en”>
  <head>
    <meta charset=”UTF-8">
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0">
    <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
    <title>HTML 5 Boilerplate</title>
    <link rel=”stylesheet” href=”style.css”>
  </head>
  <body>
    <script src=”index.js”></script>
  </body>
</html>

Переименуйте элемент ‹title› с «HTML 5 Boilerplate» на «Form». Поскольку мы не стилизуем нашу форму, удалите ссылку на таблицу стилей в строке 8.

Чтобы настроить форму, скопируйте и вставьте этот код HTML Demo: Form из MDN в тег index.html ‹body› над тегом ‹script›.

<form action=”” method=”get” class=”form-example”>
  <div class=”form-example”>
    <label for=”name”>Enter your name: </label>
    <input type=”text” name=”name” id=”name” required>
  </div>
  <div class=”form-example”>
    <label for=”email”>Enter your email: </label>
    <input type=”email” name=”email” id=”email” required>
  </div>
  <div class=”form-example”>
    <input type=”submit” value=”Subscribe!”>
  </div>
</form>

Далее, используя наш терминал, давайте откроем нашу HTML-страницу в браузере. Пользователи Mac могут ввести «open index.html», а пользователи Windows — «explorer.exe index.html». Ваш файл должен выглядеть так:

Теперь мы можем начать писать наш файл JavaScript!

Сначала добавьте этот код в index.js:

document.addEventListener(‘DOMContentLoaded’, () => {
})

Мы собираемся получить форму по ее тегу «form» с помощью селектора запросов в строке 2:

document.addEventListener(‘DOMContentLoaded’, () => {
  document.querySelector(‘form’);
})

Прежде чем мы продолжим, давайте подтвердим, что наша форма выбрана в строке 2 консоли:

console.log(document.querySelector(‘form’))

Обновите свой index.html и посмотрите в консоли, где должна появиться форма.

Удалить журнал консоли. Мы собираемся связать прослушиватель событий с событием «отправить» в форму с помощью «.addEventListener(‘submit’)».

document.addEventListener(‘DOMContentLoaded’, () => {
  document.querySelector(‘form’).addEventListener(‘submit’)
})

Теперь давайте добавим функцию обратного вызова, используя «e» для «события»:

document.addEventListener(‘DOMContentLoaded’, () => {
  document.querySelector(‘form’).addEventListener(‘submit’, (e) => {
  })
})

Внутри функции обратного вызова запишите в консоль ваше событие:

console.log(e)

А теперь попробуйте заполнить форму! Когда вы нажимаете кнопку «Отправить», вы должны увидеть, как ваш экран мигает, и в окне консоли на мгновение отобразится код. Это потому, что формы были созданы с поведением по умолчанию перезагрузки страницы. Поскольку нам больше не нужно это поведение по умолчанию, мы собираемся удалить его с помощью метода предотвращения по умолчанию:

e.preventDefault()

Теперь, когда вы заполните форму и нажмете «Отправить», вы увидите событие отправки в своей консоли.

Далее мы собираемся захватить цель события. Цели событий — это то, на что воздействуют события — в данном случае форма!

document.addEventListener(‘DOMContentLoaded’, () => {
  document.querySelector(‘form’).addEventListener(‘submit’, (e) => {
    e.preventDefault()
    console.log(e.target)
  })
})

Заполните форму, и когда вы нажмете «Отправить», она зарегистрирует форму в консоли. Чтобы получить значение ввода формы, давайте свяжем «значение» с консольным журналом:

console.log(e.target.value)

Когда вы заполните форму, консоль покажет «undefined». Это потому, что форма не имеет значения! У входных данных есть значения, которые мы можем получить, используя их идентификаторы:

document.addEventListener(‘DOMContentLoaded’, () => {
  document.querySelector(‘form’).addEventListener(‘submit’, (e) => {
    e.preventDefault()
    console.log(e.target.name.value
    console.log(e.target.email.value
  })
})

Попробуйте заполнить форму, и вы увидите, что имя и адрес электронной почты появятся в консоли. Отличная работа! Вы создали свою первую простую форму и записали входные данные.