Форма входа и регистрации

{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В предыдущих уроках мы создали функциональные формы регистрации и входа для нашего веб-приложения. В этом руководстве мы немного изменим эти формы, чтобы сделать их более удобными и современными. Теперь мы будем начинать с формы входа, а затем добавим возможность регистрации для новых пользователей. Давайте сделаем наши формы не только функциональными, но и привлекательными!","type":"unstyled","key":"epnan"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 1: Основная структура HTML форм","type":"header-three","key":"3rdp8"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":11,"offset":42}],"inlineStyleRanges":[],"text":"Сначала обновим структуру HTML так, чтобы форма входа отображалась первой. Вот пример обновленного HTML-кода:","type":"unstyled","key":"e67b6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":50,"offset":0,"style":"BOLD"}],"text":"Обновленный HTML-код для формы входа и регистрации","type":"unstyled","key":"7vodt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"2shth"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"6u4q0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"5aenc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"90qmb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"5mohb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Форма входа и регистрации","type":"blockquote","key":"ahsha"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"dorlq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"39s18"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"919u4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"3i37p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Вход в систему

","type":"blockquote","key":"13qn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"bnoqb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"2h5vk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"7ar5e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"o5m6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Имя пользователя:","type":"blockquote","key":"6d2uk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"8hgmt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Email:","type":"blockquote","key":"a3h90"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"ek1kl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пароль:","type":"blockquote","key":"353sg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"fm8t8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"67bdv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"61rut"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"32g7q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Нет аккаунта? Зарегистрируйтесь

","type":"blockquote","key":"517as"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"68keg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Если у вас есть аккаунт, войдите.

","type":"blockquote","key":"2cs14"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"1mt98"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" \n \n ","type":"blockquote","key":"2811s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"96f4j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"8keh4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9cten"},{"data":{"image":{"id":"676bea3384d2f06de1bbcb51"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Формы входа и регистрации на одной странице.","type":"atomic:image","key":"9m5bl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пояснение изменений в HTML","type":"header-three","key":"5d2li"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Начало с формы входа: Теперь форма входа отображается первой, а форма регистрации скрыта по умолчанию.","type":"ordered-list-item","key":"eq9mi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Ссылка для переключения: Изменена ссылка на \"Нет аккаунта? Зарегистрируйтесь\", которая будет использоваться для переключения на форму регистрации.","type":"ordered-list-item","key":"8tso3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 2: Стилизация форм с помощью CSS","type":"header-three","key":"33q3o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь создадим файл 'styles.css' и добавим стили для наших форм.","type":"unstyled","key":"fpuoa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"Пример стилей для styles.css","type":"unstyled","key":"afl76"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* Сброс стилей по умолчанию */","type":"blockquote","key":"68pdg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"* {","type":"blockquote","key":"c70jr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"margin: 0;","type":"blockquote","key":"7mvj8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"padding: 0;","type":"blockquote","key":"5m13j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"box-sizing: border-box;","type":"blockquote","key":"b23l9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"6rcun"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* Основной контейнер */","type":"blockquote","key":"f1o3a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".container {","type":"blockquote","key":"e2fic"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"max-width: 400px; /* Максимальная ширина контейнера */","type":"blockquote","key":"8fo7v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"margin: 50px auto; /* Центрирование контейнера */","type":"blockquote","key":"ak26n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"padding: 20px; /* Отступы внутри контейнера */","type":"blockquote","key":"28bho"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"border-radius: 8px; /* Закругление углов */","type":"blockquote","key":"fat2q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"background-color: #f9f9f9; /* Цвет фона */","type":"blockquote","key":"ebfb8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Тень для контейнера */","type":"blockquote","key":"9i27n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"b7j4h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* Заголовки форм */","type":"blockquote","key":"22lc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"h2 {","type":"blockquote","key":"eekdk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"text-align: center; /* Центрирование текста */","type":"blockquote","key":"8gut8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"margin-bottom: 20px; /* Отступ снизу */","type":"blockquote","key":"99a3t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"3iuo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* Стили для меток */","type":"blockquote","key":"8njeu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"label {","type":"blockquote","key":"26sq3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"display: block; /* Блочный элемент */","type":"blockquote","key":"9l3gu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"margin-bottom: 5px; /* Отступ снизу */","type":"blockquote","key":"ejq9e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"80ag7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* Стили для полей ввода */","type":"blockquote","key":"7g9m3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"input[type=\"text\"],","type":"blockquote","key":"auaa4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"input[type=\"email\"],","type":"blockquote","key":"ctcdo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"input[type=\"password\"] {","type":"blockquote","key":"dun9b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"width: 100%; /* Полная ширина поля */","type":"blockquote","key":"6fmje"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"padding: 10px; /* Отступы внутри поля */","type":"blockquote","key":"bdihk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"margin-bottom: 15px; /* Отступ снизу */","type":"blockquote","key":"4ntjp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"border: 1px solid #ccc; /* Цвет границы */","type":"blockquote","key":"528nj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"border-radius: 4px; /* Закругление углов поля */","type":"blockquote","key":"1eoem"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"us7k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* Стили для кнопок */","type":"blockquote","key":"acblj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"button {","type":"blockquote","key":"bo99g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"width: 100%; /* Полная ширина кнопки */","type":"blockquote","key":"f0j29"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"padding: 10px; /* Отступы внутри кнопки */","type":"blockquote","key":"8fd8f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"background-color: #28a745; /* Цвет фона кнопки (зеленый) */","type":"blockquote","key":"6jvjc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"color: white; /* Цвет текста кнопки */","type":"blockquote","key":"sitt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"border: none; /* Убираем границу */","type":"blockquote","key":"7v1j4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"border-radius: 4px; /* Закругление углов кнопки */","type":"blockquote","key":"3gf40"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"cursor: pointer; /* Указатель при наведении на кнопку */","type":"blockquote","key":"2o5dc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"8u4kf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* Эффект наведения на кнопку */","type":"blockquote","key":"3ufth"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"button:hover {","type":"blockquote","key":"4qrbv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"background-color: #218838; /* Темнее при наведении */","type":"blockquote","key":"23nrs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"eerob"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* Стили для сообщений об ошибках (если нужно) */","type":"blockquote","key":"96a7k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".error-message {","type":"blockquote","key":"afi3b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"color: red; /* Красный цвет текста ошибки */","type":"blockquote","key":"a9paj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"8vhn5"},{"data":{"image":{"id":"676beb20d471512836e17f95"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример стилей для форм.","type":"atomic:image","key":"4f07r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 3: Реализация переключения между формами","type":"header-three","key":"eld2n"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":19,"offset":72}],"inlineStyleRanges":[],"text":"Теперь давайте добавим JavaScript, чтобы реализовать переключение между формами регистрации и входа.","type":"unstyled","key":"50iac"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"}],"text":"Пример JavaScript для scripts.js","type":"unstyled","key":"3c8i3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если у вас уже есть файл 'scripts.js', вам нужно добавить новый код к существующему или заменить его, если он не содержит необходимой логики. Вот пример кода:","type":"unstyled","key":"d8jrd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Переключение на форму регистрации","type":"blockquote","key":"44cs5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.getElementById('toggleToRegister').addEventListener('click', function(event) {","type":"blockquote","key":"eq3eb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"event.preventDefault(); // Предотвращаем переход по ссылке","type":"blockquote","key":"ntq5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.getElementById('loginForm').style.display = 'none'; // Скрываем форму входа","type":"blockquote","key":"4fsah"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.getElementById('registrationForm').style.display = 'block'; // Показываем форму регистрации","type":"blockquote","key":"9u155"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.getElementById('formTitle').innerText = 'Регистрация пользователя'; // Изменяем заголовок","type":"blockquote","key":"2gm0p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.getElementById('toggleFormText').style.display = 'none'; // Скрываем текст ссылки для входа","type":"blockquote","key":"fkika"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.getElementById('toggleToLoginText').style.display = 'block'; // Показываем текст ссылки для входа","type":"blockquote","key":"dsngk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"});","type":"blockquote","key":"40ft2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Переключение на форму входа","type":"blockquote","key":"5psbh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.getElementById('toggleToLogin').addEventListener('click', function(event) {","type":"blockquote","key":"3va2q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"event.preventDefault(); // Предотвращаем переход по ссылке","type":"blockquote","key":"62re6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.getElementById('registrationForm').style.display = 'none'; // Скрываем форму регистрации","type":"blockquote","key":"2jniu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.getElementById('loginForm').style.display = 'block'; // Показываем форму входа","type":"blockquote","key":"1q9t8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.getElementById('formTitle').innerText = 'Вход в систему'; // Изменяем заголовок","type":"blockquote","key":"9ev5f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.getElementById('toggleFormText').style.display = 'block'; // Показываем текст ссылки для регистрации","type":"blockquote","key":"348fp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.getElementById('toggleToLoginText').style.display = 'none'; // Скрываем текст ссылки для входа","type":"blockquote","key":"b14d6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"});","type":"blockquote","key":"8k89o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Обработчик для формы регистрации (пока просто предотвращаем отправку)","type":"blockquote","key":"5bgvg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.getElementById('registrationForm').addEventListener('submit', function(event) {","type":"blockquote","key":"emvu6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"event.preventDefault(); // предотвращаем стандартное поведение формы","type":"blockquote","key":"3itrn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"});","type":"blockquote","key":"cg8si"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Обработчик для формы входа (пока просто предотвращаем отправку)","type":"blockquote","key":"32d2j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.getElementById('loginForm').addEventListener('submit', function(event) {","type":"blockquote","key":"bjpv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"event.preventDefault(); // предотвращаем стандартное поведение формы","type":"blockquote","key":"kjss"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"});","type":"blockquote","key":"72ihe"},{"data":{"image":{"id":"676c110494328f27727ba9dc"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Логика переключения между формами.","type":"atomic:image","key":"e1485"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 4: Применение стилей","type":"header-three","key":"bevjd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После того как вы создали файл 'styles.css' и добавили указанные стили, а также обновили файл 'scripts.js', обновите страницу в браузере. Вы должны увидеть красиво оформленные формы входа и регистрации с возможностью переключения между ними.","type":"unstyled","key":"1kkq1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь вы знаете, как стилизовать формы входа и регистрации с помощью CSS и реализовать их переключение на одной странице! Это делает ваше приложение более удобным для пользователей.","type":"unstyled","key":"8h9v1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Попробуйте реализовать эту форму на своем проекте и делитесь своими успехами! Если вам понравилось это руководство, подписывайтесь на мой канал в Яндекс Дзен, чтобы не пропустить новые полезные материалы и уроки. Эта версия текста теперь включает все изменения, которые вы хотели внести. Если у вас есть дополнительные пожелания или вопросы, дайте знать!","type":"unstyled","key":"bki59"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"D5wWZJAXb03de3Q7AY6Z"}],"entityMap":{"0":{"data":{"url":"https://dzen.ru/a/Z2u4pbKh2nzeQw3D"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"https://dzen.ru/a/Z2sMjm4fV3hXmrL2"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}