В предыдущих уроках мы создали функциональные формы регистрации и входа для нашего веб-приложения. В этом руководстве мы немного изменим эти формы, чтобы сделать их более удобными и современными. Теперь мы будем начинать с формы входа, а затем добавим возможность регистрации для новых пользователей. Давайте сделаем наши формы не только функциональными, но и привлекательными!
Часть 1: Основная структура HTML форм
Сначала обновим структуру HTML так, чтобы форма входа отображалась первой. Вот пример обновленного HTML-кода:
Обновленный HTML-код для формы входа и регистрации
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Форма входа и регистрации</title>
<link rel="stylesheet" href="styles.css"> <!-- Подключение CSS файла -->
</head>
<body>
<div class="container">
<h2 id="formTitle">Вход в систему</h2>
<!-- Форма входа -->
<form id="loginForm">
<label for="loginUsername">Имя пользователя:</label>
<input type="text" id="loginUsername" name="username" required>
<label for="loginPassword">Пароль:</label>
<input type="password" id="loginPassword" name="password" required>
<button type="submit">Войти</button>
</form>
<!-- Форма регистрации скрыта по умолчанию -->
<form id="registrationForm" style="display: none;">
<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Пароль:</label>
<input type="password" id="password" name="password" required>
<button type="submit">Зарегистрироваться</button>
</form>
<!-- Ссылка для переключения между формами -->
<p id="toggleFormText">Нет аккаунта? <a href="#" id="toggleToRegister">Зарегистрируйтесь</a></p>
<!-- Новая ссылка для возврата к форме входа -->
<p id="toggleToLoginText" style="display: none;">Если у вас есть аккаунт, <a href="#" id="toggleToLogin">войдите</a>.</p>
</div>
<script src="scripts.js"></script> <!-- Подключение JavaScript файла -->
<script src="login.js"></script> <!-- Подключение JavaScript формы входа -->
<script src="registration.js"></script> <!-- Подключение JavaScript формы регистрации -->
</body>
</html>
Пояснение изменений в HTML
- Начало с формы входа: Теперь форма входа отображается первой, а форма регистрации скрыта по умолчанию.
- Ссылка для переключения: Изменена ссылка на "Нет аккаунта? Зарегистрируйтесь", которая будет использоваться для переключения на форму регистрации.
Часть 2: Стилизация форм с помощью CSS
Теперь создадим файл 'styles.css' и добавим стили для наших форм.
Пример стилей для styles.css
/* Сброс стилей по умолчанию */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Основной контейнер */
.container {
max-width: 400px; /* Максимальная ширина контейнера */
margin: 50px auto; /* Центрирование контейнера */
padding: 20px; /* Отступы внутри контейнера */
border-radius: 8px; /* Закругление углов */
background-color: #f9f9f9; /* Цвет фона */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Тень для контейнера */
}
/* Заголовки форм */
h2 {
text-align: center; /* Центрирование текста */
margin-bottom: 20px; /* Отступ снизу */
}
/* Стили для меток */
label {
display: block; /* Блочный элемент */
margin-bottom: 5px; /* Отступ снизу */
}
/* Стили для полей ввода */
input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%; /* Полная ширина поля */
padding: 10px; /* Отступы внутри поля */
margin-bottom: 15px; /* Отступ снизу */
border: 1px solid #ccc; /* Цвет границы */
border-radius: 4px; /* Закругление углов поля */
}
/* Стили для кнопок */
button {
width: 100%; /* Полная ширина кнопки */
padding: 10px; /* Отступы внутри кнопки */
background-color: #28a745; /* Цвет фона кнопки (зеленый) */
color: white; /* Цвет текста кнопки */
border: none; /* Убираем границу */
border-radius: 4px; /* Закругление углов кнопки */
cursor: pointer; /* Указатель при наведении на кнопку */
}
/* Эффект наведения на кнопку */
button:hover {
background-color: #218838; /* Темнее при наведении */
}
/* Стили для сообщений об ошибках (если нужно) */
.error-message {
color: red; /* Красный цвет текста ошибки */
}
Часть 3: Реализация переключения между формами
Теперь давайте добавим JavaScript, чтобы реализовать переключение между формами регистрации и входа.
Пример JavaScript для scripts.js
Если у вас уже есть файл 'scripts.js', вам нужно добавить новый код к существующему или заменить его, если он не содержит необходимой логики. Вот пример кода:
// Переключение на форму регистрации
document.getElementById('toggleToRegister').addEventListener('click', function(event) {
event.preventDefault(); // Предотвращаем переход по ссылке
document.getElementById('loginForm').style.display = 'none'; // Скрываем форму входа
document.getElementById('registrationForm').style.display = 'block'; // Показываем форму регистрации
document.getElementById('formTitle').innerText = 'Регистрация пользователя'; // Изменяем заголовок
document.getElementById('toggleFormText').style.display = 'none'; // Скрываем текст ссылки для входа
document.getElementById('toggleToLoginText').style.display = 'block'; // Показываем текст ссылки для входа
});
// Переключение на форму входа
document.getElementById('toggleToLogin').addEventListener('click', function(event) {
event.preventDefault(); // Предотвращаем переход по ссылке
document.getElementById('registrationForm').style.display = 'none'; // Скрываем форму регистрации
document.getElementById('loginForm').style.display = 'block'; // Показываем форму входа
document.getElementById('formTitle').innerText = 'Вход в систему'; // Изменяем заголовок
document.getElementById('toggleFormText').style.display = 'block'; // Показываем текст ссылки для регистрации
document.getElementById('toggleToLoginText').style.display = 'none'; // Скрываем текст ссылки для входа
});
// Обработчик для формы регистрации (пока просто предотвращаем отправку)
document.getElementById('registrationForm').addEventListener('submit', function(event) {
event.preventDefault(); // предотвращаем стандартное поведение формы
});
// Обработчик для формы входа (пока просто предотвращаем отправку)
document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault(); // предотвращаем стандартное поведение формы
});
Часть 4: Применение стилей
После того как вы создали файл 'styles.css' и добавили указанные стили, а также обновили файл 'scripts.js', обновите страницу в браузере. Вы должны увидеть красиво оформленные формы входа и регистрации с возможностью переключения между ними.
Теперь вы знаете, как стилизовать формы входа и регистрации с помощью CSS и реализовать их переключение на одной странице! Это делает ваше приложение более удобным для пользователей.
Попробуйте реализовать эту форму на своем проекте и делитесь своими успехами! Если вам понравилось это руководство, подписывайтесь на мой канал в Яндекс Дзен, чтобы не пропустить новые полезные материалы и уроки. Эта версия текста теперь включает все изменения, которые вы хотели внести. Если у вас есть дополнительные пожелания или вопросы, дайте знать!