Формы — это шлюз для сбора пользовательских данных. Давайте создадим простую рабочую форму!
Откройте редактор кода по вашему выбору (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 }) })
Попробуйте заполнить форму, и вы увидите, что имя и адрес электронной почты появятся в консоли. Отличная работа! Вы создали свою первую простую форму и записали входные данные.