Добро пожаловать в наш новый блог, где мы расскажем об увлекательном процессе создания формы входа с использованием HTML, CSS и JavaScript!

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

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

Мы понимаем, что изучение новой концепции может быть сложной задачей, особенно в мире веб-разработки. Вот почему мы стремимся разбить код и объяснить его так, чтобы его было легко понять. Мы хотим, чтобы вы чувствовали себя уверенно и уверенно на протяжении всего этого процесса.

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

Так что будьте готовы засучить рукава и погрузиться в мир разработки форм входа. Мы здесь, чтобы поддерживать вас на каждом этапе пути, гарантируя, что вы не только усвоите код, но и получите четкое представление об основных принципах.

Давайте отправимся в это путешествие вместе, вооружившись HTML, CSS и JavaScript. К концу у вас будет функциональная форма входа и обширные знания, которые можно применить в будущих проектах. Давайте кодировать и учиться!

PS: прежде чем мы начнем, вы можете найти весь код (HTML, CSS, JavaScript) в этомрепозитории GitHub.

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">

<!-- ICONS (REMIX) -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">

<!-- CSS -->
    <link rel="stylesheet" href="assets/css/styles.css">
    <title>Responsive Login Form</title>
</head>
<body>

Эта часть устанавливает базовую структуру HTML-документа. Начнем с объявления типа документа и указания английского языка. Раздел <head> содержит метатеги для кодировки символов, совместимости с браузерами и адаптивного дизайна. Мы также включаем ссылку на библиотеку Remix Icon и наш пользовательский файл CSS. Заголовок веб-страницы установлен как «Адаптивная форма входа».

<div class="login">
        <img src="assets/img/sunset.jpg" alt="login image" class="login__img">
        <form class="login__form">
            <h1 class="login__title">Login</h1>

<!-- Input fields for email and password -->
            <div class="login__content">
                <div class="login__box">
                    <i class="ri-user-line login__icon"></i> 

                    <div class="login__box-input">
                        <input type="email" required class="login__input" placeholder=" ">
                        <label for="" class="login__label">Email</label>
                    </div>
                </div>

                <div class="login__box">
                    <i class="ri-lock-2-line login__icon"></i>

                    <div class="login__box-input">
                        <input type="password" required class="login__input" id="login-pass" placeholder=" ">
                        <label for="" class="login__label">Password</label>
                        <i class="ri-eye-off-line login__eye" id="login-eye"></i>
                    </div>
                </div>

            </div>

<!-- Checkbox and "Forgot Password?" link -->
        <div class="login__check">
            <div class="login__check-group">
                <input type="checkbox" class="login__check-input">
                <label for="" class="login__check-label">Remember me</label>
            </div>

            <a href="#" class="login__forgot">Forgot Password?</a>
        </div> 

<!-- Login button and registration link -->
        <button class="login__button">Login</button>

        <p class="login__register">
            Don't have an account? <a href="#">Register</a>
        </p>
        </form>
    </div>

В этом разделе у нас есть основная структура формы входа. Давайте рассмотрим это дальше:

  • Контейнер <div> с классом «логин» обертывает всю форму входа.
  • Изображение включено внутрь контейнера, чтобы обеспечить визуальный элемент (вы можете заменить его на желаемое изображение).
  • Форма входа определяется с помощью тега <form> с классом «login__form».
  • Тег <h1> с классом «login__title» отображает заголовок «Вход».

Далее давайте посмотрим на поля ввода электронной почты и пароля:

  • <div> с классом «login__content» группирует поля ввода вместе.
  • Каждое поле ввода содержится в <div> с классом «login__box».
  • Поле ввода электронной почты содержит значок из библиотеки значков Remix (ri-user-line) и метку.
  • Точно так же поле ввода пароля включает значок (ri-lock-2-line), метку и значок глаза (ri-eye-off-line) для переключения видимости пароля.

Двигаясь дальше, у нас есть флажок «Запомнить меня» и «Забыли пароль?» связь:

  • Они заключены в <div> с классом «login__check».
  • Флажок представляет собой элемент <input> с классом «login__check-input» и соответствующую метку с классом «login__check-label».
  • «Забыли пароль?» ссылка представляет собой элемент <a> с классом «login__forgot» и «#» в качестве URL-адреса-заполнителя.

Наконец, у нас есть кнопка входа и ссылка для регистрации:

  • Кнопка входа — это элемент <button> с классом «login__button».
  • Ссылка для регистрации представляет собой элемент <p> с классом «login__register».
<!-- MAIN JS -->
    <script src="assets/js/main.js"></script>
</body>
</html>

Эта часть кода включает ссылку на внешний файл JavaScript, который обозначается тегом <script>. Атрибут src указывает расположение файла JavaScript, в данном случае "assets/js/main.js". Этот файл отвечает за обеспечение функциональности и интерактивности формы входа.

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

Размещение тега <script> непосредственно перед закрывающим тегом </body> гарантирует, что код JavaScript будет загружен и выполнен после того, как весь документ HTML будет проанализирован. Это помогает избежать любых потенциальных проблем, которые могут возникнуть, если JavaScript взаимодействует с еще не загруженными элементами.

Не забудьте заменить"assets/js/main.js" правильным путем к вашему собственному файлу JavaScript, если вы решите настроить функциональность формы.

С этим включением ваша форма входа теперь оснащена необходимым кодом JavaScript, чтобы воплотить ее в жизнь!

CSS-код

/* GOOGLE FONTS */

  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');


/* VARIABLES CSS */
:root {
    --white-color: hsl(0,0%,100%);
    --black-color: hsl(0,0%,0%);

    --body-font: "Poppins", sans-serif;
    --h1-font-size: 1.75rem;
    --normal-font-size: 1rem;
    --small-font-size: .813rem;

    --font-medium: 500;
}

/* BASE */
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body, 
input,
button {
    font-size: var(--normal-font-size);
    font-family: var(--body-font);
}

body {
    color: var(--white-color)
}

input,
button {
    border: none;
    outline: none;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

/* LOGIN */
.login {
    position: relative;
    height: 100vh;
    display: grid;
    align-items: center;
}

.login__img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.login__form {
    position: relative;
    background-color: hsla(0, 0%, 10%, .1);
    border: 2px solid var(--white-color);
    margin-inline: 1.5rem;
    padding: 2.5rem 1.5rem;
    border-radius: 1rem;
    backdrop-filter: blur(8px);
}

.login__title {
    text-align: center;
    font-size: var(--h1-font-size);
    font-weight: var(--font-medium);
    margin-bottom: 2rem;
}

.login__content, 
.login__box {
    display: grid;
}

.login__content {
    row-gap: 1.75rem;
    margin-bottom: 1.5rem;
}

.login__box {
    grid-template-columns: max-content 1fr;
    align-items: center;
    column-gap: .75rem;
    border-bottom: 2px solid var(--white-color);
    
}

.login__icon,
.login__eye {
    font-size: 1.25rem;
}

.login__input {
    width: 100px;
    padding-block: .8rem;
    background: none;
    color: var(--white-color);
    position: relative;
    z-index: 1;
}

.login__box-input {
    position: relative;
}

.login__label {
    position: absolute;
    left: 0;
    top: 13px;
    font-weight: var(--font-medium);
    transition: top .3s, font-size .3s;
}

.login__eye {
    position: absolute;
    right: 0;
    top: 18px;
    z-index: 10;
    cursor: pointer;
}

.login__box:nth-child(2) input{
    padding-right: 1.8rem;
}

.login__check, 
.login__check-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.login__check {
    margin-bottom: 1.5rem;
}

.login__check-label, 
.login__forgot,
.login__register {
    font-size: var(--small-font-size);
}

.login__check-group {
    column-gap: .5rem;
}

.login__check-input {
    width: 16px;
    height: 16px;
}

.login__forgot {
    color: var(--white-color);
}

.login__forgot:hover {
    text-decoration: underline;
}

.login__button {
    width: 100%;
    padding: 1rem;
    border-radius: .5rem;
    background-color: var(--white-color);
    font-weight: var(--font-medium);
    cursor: pointer;
    margin-bottom: 2rem;
}

.login__register {
    text-align: center;
}

.login__register a {
    color: var(--white-color);
    font-weight: var(--font-medium);
}

.login__register a:hover {
    text-decoration: underline;
}

/* Input focus move up label */
.login__input:focus + .login__label {
    top: -12px;
    font-size: var(--small-font-size);
}

/* Input focus sticky top label */
.login__input:not(:placeholder-shown).login__input:not(:focus) + .login__label {
    top: -12px;
    font-size: var(--small-font-size);
}


/* BREAKPOINTS */

@media screen and (min-width:576px){
    .login {
        justify-content: center;
    }
    .login__form {
        width: 432px;
        padding: 4rem 3rem 3.5rem;
        border-radius: 1.5rem;
    }
    .login__title {
        font-size: 2rem;
    }
}

Этот код CSS устанавливает стиль для нашей формы входа. Подытожим, что делает этот код и чего с его помощью можно достичь:

  • Шрифты Google: код импортирует библиотеку шрифтов Google и указывает шрифт Poppins с разным весом (400 и 500) для использования в форме входа. Скачать шрифты можно здесь: https://fonts.google.com/
  • Переменные CSS. Код определяет переменные CSS для цветов, размеров и толщины шрифта, что позволяет легко настраивать и обеспечивать единообразие стилей.
  • Базовые стили. Код устанавливает некоторые базовые стили, в том числе размер блока, отступы и сброс полей, семейство шрифтов и цвет для элементов body, input и button.
  • Стили входа. Код определяет стили для самой формы входа, включая расположение, цвет фона, границу, отступы, радиус границы и фоновый фильтр.
  • Содержимое входа.Код устанавливает макет сетки для содержимого формы входа, такого как заголовок формы, поля ввода, значки, флажки, кнопки и т. д.
  • Стили ввода: код определяет стили для полей ввода, меток, значка глаза и их положения.
  • Стили флажков. Код определяет стили флажков и их меток, включая выравнивание и интервалы.
  • Стили кнопок. Код определяет стили кнопок, включая ширину, отступы, радиус границы, цвет фона, толщину шрифта и курсор.
  • Типографика. Код устанавливает стили, связанные с типографикой, такие как выравнивание текста, размер шрифта, вес шрифта и поля для различных элементов.
  • Стиль фокуса ввода: код добавляет стили для перемещения меток вверх, когда поля ввода сфокусированы, и сохраняет метки прикрепленными вверху, когда поля ввода имеют значения.
  • Точки останова. Код вводит медиа-запрос для определенной ширины области просмотра (576 пикселей), чтобы настроить макет и стили формы входа для больших экранов.

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

JavaScript-код

/*=============== SHOW HIDDEN - PASSWORD ===============*/

const showHiddenPass = (loginPass, loginEye) =>{
    const input = document.getElementById(loginPass),
          iconEye = document.getElementById(loginEye)
 
    iconEye.addEventListener('click', () =>{
       // Change password to text
       if(input.type === 'password'){
          // Switch to text
          input.type = 'text'
 
          // Icon change
          iconEye.classList.add('ri-eye-line')
          iconEye.classList.remove('ri-eye-off-line')
       } else{
          // Change to password
          input.type = 'password'
 
          // Icon change
          iconEye.classList.remove('ri-eye-line')
          iconEye.classList.add('ri-eye-off-line')
       }
    })
 }
 
 showHiddenPass('login-pass','login-eye')

Этот код JavaScript обрабатывает функциональность отображения и скрытия пароля в форме входа. Вот упрощенное объяснение:

  1. Функция showHiddenPass принимает два параметра: loginPass (идентификатор поля ввода пароля) и loginEye (идентификатор значка глаза).
  2. Внутри функции он извлекает элемент ввода пароля и элемент значка глаза, используя их соответствующие идентификаторы.
  3. Он добавляет прослушиватель событий к значку глаза для события «щелчок».
  4. При нажатии на значок глаза код проверяет текущий тип поля ввода пароля.
  5. Если тип ввода «пароль», это означает, что пароль скрыт, поэтому код меняет тип ввода на «текст», чтобы раскрыть пароль.
  6. Он также обновляет значок глаза, добавляя класс «ri-eye-line» (который отображает значок открытого глаза) и удаляя класс «ri-eye-off-line» (который отображает значок скрещенного глаза).
  7. Если тип ввода уже «текстовый», это означает, что пароль виден, поэтому код изменяет тип ввода обратно на «пароль», чтобы скрыть пароль.
  8. Он обновляет значок глаза, удаляя класс «ri-eye-line» и добавляя класс «ri-eye-off-line».
  9. Прикрепив эту функцию к значку глаза, пользователи могут переключать видимость пароля, щелкая значок.
  10. Наконец, вызывается функция showHiddenPass с идентификаторами поля ввода пароля и значком глаза, что позволяет переключать видимость пароля для этой конкретной формы.

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

Заключительные мысли

Спасибо, что нашли время, чтобы просмотреть этот блог. Мы искренне надеемся, что пошаговое объяснение и идеи, представленные в этой статье, будут вам полезны при создании и разработке собственной адаптивной формы входа.

Сочетание HTML для структуры, CSS для стилей и JavaScript для добавления интерактивности позволяет создать динамичный и привлекательный сайт. Разметка HTML обеспечивает основу структуры формы, а CSS воплощает ее в жизнь с помощью настраиваемых стилей и макетов. JavaScript добавляет функциональные возможности, такие как переключение видимости пароля, для повышения удобства использования формы.

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

Не забудьте присоединиться к нашему сообществу в Discord и подпишитесь на нас в Instagram, чтобы получать больше информации и лучших практик в отрасли. 💬👥📢

Удачного кодирования и проектирования! ✨ 🎨 💻