Создайте адаптивную скользящую форму входа и регистрации с использованием HTML CSS и JavaScript

Опубликовано: 23 Февраля, 2023

В этой статье мы увидим, как создать адаптивную скользящую форму входа и регистрации с использованием HTML, CSS и Javascript, а также познакомимся с ее реализацией на иллюстрации.

В настоящее время многие веб-сайты внедряют скользящие формы входа и регистрации для своих сайтов. Регистрационная форма используется для регистрации или создания новой учетной записи для нового пользователя на веб-сайте, а форма входа используется для ввода данных зарегистрированного пользователя в его конкретную учетную запись или портал. Таким образом, многие веб-сайты реализуют эти два подхода на двух разных страницах. Здесь мы увидим, как объединить эти две формы в одну HTML-страницу, и формы будут отображаться в соответствии с выбором пользователя. В верхней части формы кнопка поможет пользователю выбрать форму входа или регистрации в соответствии с его/ее выбором. Когда пользователь переключается с одной формы на другую, форма показывает плавную скользящую анимацию.

Подход: Для создания адаптивной скользящей формы входа и регистрации будет использоваться следующий подход:

Создайте папку проекта и внутри нее создайте три файла « index.html » (для написания HTML), « style.css » (для написания CSS) и « index.js » (для написания js). Вы также можете создать отдельный файл, чтобы сохранить код CSS для отзывчивости страницы.
Теперь создайте раздел заголовка, чтобы сохранить заголовок и заголовок. Затем под разделом заголовка создайте div « контейнер », чтобы сохранить полный логин и форму регистрации с кнопкой «Изменение».
Теперь создайте div, чтобы сохранить две кнопки изменения формы, и создайте две кнопки внутри этого div. Один для « Войти », а другой — для « регистрации ». Затем над div-кнопкой создайте div- ползунок , который изменит свое положение, когда кто-то нажмет на соответствующую кнопку. Сделайте margin-left и margin-right кнопки div « auto ». Затем вы увидите, что кнопка войдет в центр и добавите CSS к кнопке, чтобы отключить границу и контур и сделать кнопку div flex . Следуйте приведенному ниже коду CSS, чтобы реализовать его:

 margin: 20px auto;  
 display: flex;
 justify-content: space-around;
 align-items: center;

Теперь добавьте цвет фона в div-ползунке и задайте ту же высоту, что и у div-кнопки, а ширина должна быть равна половине div-кнопки. Затем сделайте позицию абсолютной и z-индекс равным 1. Затем добавьте левый и верхний, чтобы выровнять div с началом div кнопки. Он должен покрывать первую половину кнопки div. Также добавьте переход на 0,5 секунды, чтобы увидеть плавную анимацию при перемещении ползунка.
Теперь добавьте дополнительный класс в CSS, который будет добавлен позже, когда кто-то нажмет на вторую кнопку, а внутри он дает выравнивание по левому краю, чтобы ползунок закрывал последнюю половину div кнопки.
Теперь напишите код javascript для перемещения кнопки ползунка в соответствии с выбором пользователя. Событие щелчка по кнопке «Регистрация» через « addEventListner » и добавление класса, который уже определен в CSS на предыдущем шаге. Кроме того, добавьте событие нажатия на кнопку «Войти», чтобы удалить класс (чтобы добавить класс, используйте « classList.add (« class_name ») », а чтобы удалить класс, используя « classList.remove (« class_name ») »).
Как и кнопка Slider, мы создадим скользящую форму, используя тот же подход. Ниже кнопки div мы создадим еще один раздел или div, который будет содержать две формы. Внутри этой формы div мы создадим два div. Один будет содержать форму входа, а другой — форму регистрации. Затем создайте необходимые поля внутри логина и раздела регистрации вместе с логином и кнопкой регистрации. Сделайте ширину раздела входа и регистрации равной ширине div контейнера, а div раздела формы должен удвоить div контейнера.
Сделайте раздел формы « display: flex; положение: родственник; слева: 0px; “. И добавьте « overflow: hidden; ” внутри div-контейнера, чтобы скрыть вторую форму, которая находится вне контейнера. Теперь напишите дополнительный класс в CSS, который будет добавлен позже, когда кто-то нажмет на вторую кнопку, и внутри он дает выравнивание по левому краю, чтобы форма скользила влево, а вторая форма была видна.
Теперь напишите код в javascript, чтобы добавить дополнительный класс (уже определенный в CSS на последнем шаге) внутри раздела формы, когда кто-то нажмет кнопку регистрации, а также удалить его, когда будет нажата кнопка входа.

Пример. В этом примере показано, как создать адаптивную скользящую форму входа и регистрации с использованием HTML CSS и Javascript.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                         initial-scale=1.0">
    <title>GeeksforGeeks</title>
    <link rel="stylesheet" 
          href="style.css">
</head>
  
<body>
    <header>
        <h1 class="heading">GeeksforGeeks</h1>
        <h3 class="title">Sliding Login & Registration Form</h3>
    </header>
  
    <!-- container div -->
    <div class="container">
  
        <!-- upper button section to select
             the login or signup form -->
        <div class="slider"></div>
        <div class="btn">
            <button class="login">Login</button>
            <button class="signup">Signup</button>
        </div>
  
        <!-- Form section that contains the
             login and the signup form -->
        <div class="form-section">
  
            <!-- login form -->
            <div class="login-box">
                <input type="email" 
                       class="email ele" 
                       placeholder="youremail@email.com">
                <input type="password"
                       class="password ele" 
                       placeholder="password">
                <button class="clkbtn">Login</button>
            </div>
  
            <!-- signup form -->
            <div class="signup-box">
                <input type="text" 
                       class="name ele" 
                       placeholder="Enter your name">
                <input type="email" 
                       class="email ele" 
                       placeholder="youremail@email.com">
                <input type="password" 
                       class="password ele" 
                       placeholder="password">
                <input type="password" 
                       class="password ele" 
                       placeholder="Confirm password">
                <button class="clkbtn">Signup</button>
            </div>
        </div>
    </div>
    <script src="index.js"></script>
</body>
  
</html>

CSS

@import url(
"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
  
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}
  
body {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 30px;
    background-color: rgb(231, 231, 231);
}
  
header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
  
.heading {
    color: green;
}
  
.title {
    font-weight: 400;
    letter-spacing: 1.5px;
}
  
.container {
    height: 600px;
    width: 500px;
    background-color: white;
    box-shadow: 8px 8px 20px rgb(128, 128, 128);
    position: relative;
    overflow: hidden;
}
  
.btn {
    height: 60px;
    width: 300px;
    margin: 20px auto;
    box-shadow: 10px 10px 30px rgb(254, 215, 188);
    border-radius: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
  
.login,
.signup {
    font-size: 22px;
    border: none;
    outline: none;
    background-color: transparent;
    position: relative;
    cursor: pointer;
}
  
.slider {
    height: 60px;
    width: 150px;
    border-radius: 50px;
    background-image: linear-gradient(to right,
            rgb(255, 195, 110),
            rgb(255, 146, 91));
    position: absolute;
    top: 20px;
    left: 100px;
    transition: all 0.5s ease-in-out;
}
  
.moveslider {
    left: 250px;
}
  
.form-section {
    height: 500px;
    width: 1000px;
    padding: 20px 0;
    display: flex;
    position: relative;
    transition: all 0.5s ease-in-out;
    left: 0px;
}
  
.form-section-move {
    left: -500px;
}
  
.login-box,
.signup-box {
    height: 100%;
    width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0px 40px;
}
  
.login-box {
    gap: 50px;
}
  
.signup-box {
    gap: 30px;
}
  
.ele {
    height: 60px;
    width: 400px;
    outline: none;
    border: none;
    color: rgb(77, 77, 77);
    background-color: rgb(240, 240, 240);
    border-radius: 50px;
    padding-left: 30px;
    font-size: 18px;
}
  
.clkbtn {
    height: 60px;
    width: 150px;
    border-radius: 50px;
    background-image: linear-gradient(to right,
            rgb(255, 195, 110),
            rgb(255, 146, 91));
    font-size: 22px;
    border: none;
    cursor: pointer;
}
  
/* For Responsiveness of the page */
  
@media screen and (max-width: 650px) {
    .container {
        height: 600px;
        width: 300px;
    }
  
    .title {
        font-size: 15px;
    }
  
    .btn {
        height: 50px;
        width: 200px;
        margin: 20px auto;
    }
  
    .login,
    .signup {
        font-size: 19px;
    }
  
    .slider {
        height: 50px;
        width: 100px;
        left: 50px;
    }
  
    .moveslider {
        left: 150px;
    }
  
    .form-section {
        height: 500px;
        width: 600px;
    }
  
    .form-section-move {
        left: -300px;
    }
  
    .login-box,
    .signup-box {
        height: 100%;
        width: 300px;
    }
  
    .ele {
        height: 50px;
        width: 250px;
        font-size: 15px;
    }
  
    .clkbtn {
        height: 50px;
      &nbs
            

                    
                                            Technical Scripter
                                            JavaScript
                                            Picked
                                            HTML
                                            CSS
                                    
РЕКОМЕНДУЕМЫЕ СТАТЬИЧто такое тернарный оператор?
23 Января, 2024
Количество чисел между L и R, взаимно простых с P
27 Февраля, 2023
Количество чисел между L и R, взаимно простых с P
27 Февраля, 2023
Постройте матрицу, каждая строка и столбец которой содержат N и M единиц соответственно.
27 Февраля, 2023
Постройте матрицу, каждая строка и столбец которой содержат N и M единиц соответственно.
27 Февраля, 2023
Найдите все факторы заданного числа и их побитовое XOR
27 Февраля, 2023
Показать самое длинное имя
27 Февраля, 2023
Форматирование лицензионного ключа
27 Февраля, 2023


    


        
            
                
                    
                        
                        < PROGLER >
                    
                
                
                    
                        Общее
                        
                        Контакты
                        Политика конфиденциальности
                    
                    
                        Обучение
                        Блог
                    
                
            
            
                © progler.ru 2024. Все права защищены.