Формы — одна из самых крутых функций, которые вы можете добавить на свой сайт. Будь то форма входа, форма новостной рассылки или форма панели поиска. Вы можете делать с ним все, что пожелаете.

Вот почему, если вы дочитаете этот пост до конца, вы точно узнаете, как создать простую форму входа, используя только HTML и JavaScript.

Если вы давно следите за мной на Facebook, то, вероятно, знаете, что я люблю рассказывать истории о том, как я всему научился. Итак, позвольте мне рассказать вам краткую историю о том, как я впервые создал форму для своего веб-сайта.

Несколько лет назад, когда я учился в колледже, учителя дали нам задание создать собственный сайт-портфолио. Конечно, с моим СДВГ, который был в восторге от этого, я быстро создал веб-сайт в течение часа, как только он был закончен, я был так горд собой, что мне удалось создать свой самый первый веб-сайт с нуля.

Теперь, оглядываясь назад на это воспоминание, я понимаю, что веб-сайт был самой уродливой вещью, которую я когда-либо видел, но, эй, в то время он был довольно хорош. Но самой крутой функцией, которую я добавил, была небольшая контактная форма, где люди могли заполнить свои адреса электронной почты, свои полные имена и короткое сообщение, которое они хотели отправить мне.

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

Создание формы входа

Создание формы входа будет разделено на две части. Сначала мы создадим код JavaScript, а затем добавим HTML.

Написание кода JavaScript

Сначала мы напишем код JavaScript. Итак, давайте предположим, что наша форма входа имеет два поля ввода и кнопку отправки. Итак, давайте создадим код на основе этой идеи.

// To get started, let's retrieve the form element from our document.
const loginForm = document.querySelector("#loginForm")

// Now, let's grab the onsubmit event (That will run when we press the submit button).
// And add our own callBack handler to it. 
loginForm.onsubmit = (ev) => {
  // preventDefault will prevent the page from changing.
  ev.preventDefault();
  // All code in here will be executed when we press the submit button.
  
  const emailAddress = loginForm.elements.namedItem("emailAddress").value
  const password = loginForm.elements.namedItem("password").value
  
  console.log("Email Address: " + emailAddress)
  console.log("Password: " + password)
}

Вкратце, приведенный выше код выведет значения, которые мы поместили в нашу форму, в консоль, как только мы нажмем кнопку отправки.

PS — Поместите JavaScript в отдельный файл с именем «script.js».

Теперь давайте добавим HTML на веб-страницу.

Добавление HTML

Второй шаг — добавить HTML-код на нашу веб-страницу. Теперь это очень просто, поэтому вы можете просто скопировать и вставить код ниже.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Awesome login form</title>
</head>
<body>
    <form id="loginForm">
        <label for="email">Email:</label>
        <input type="email" id="email" name="emailAddress" placeholder="[email protected]" required>
        <br>
        <br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <br>
        <button type="submit">Click Here To Login</button>
    </form>

    <script src="script.js"></script>
</body>
</html>

Теперь, глядя на приведенный выше код, вы можете задаться вопросом… Мишель, зачем вы добавили тег скрипта внизу вашего элемента body?

Ну, я сделал это, потому что в нашем JavaScript мы получаем элемент формы из HTML, чтобы мы могли получить доступ к его элементам ввода. Если бы я добавил тег script перед нашим элементом формы, код JavaScript был бы выполнен до того, как форма была бы загружена на экран, что привело бы к ошибке.

Вот и все, теперь вы знаете, как быстро и легко создать свою собственную форму входа, используя только HTML и JavaScript.

Если вы нашли этот пост в блоге полезным, оставьте комментарий ниже, в котором расскажите, как он вам помог, и ваше общее мнение о самом посте :).

И помните, до карьеры вашей мечты всего один шаг!

Мишель Уходи!