/
llrr
/
lab6
Обзор
Документация
Войти
/
llrr
/
lab6
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
form.html
199 строк
10 KB
llrr
Create: index.html, form.html, style.css, normalizion.css
15 июн 2026, 00:04
Верифицирован
15 июн 2026, 00:04
04f41a0
Код
Авторство
О чём код?
<!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="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> </head> <body class="form-page"> <header> <h1>Регистрация нового пользователя</h1> <p>Заполните форму, чтобы получать новости о Санкт-Петербурге</p> </header> <nav> <a href="index.html">🏠 На главную</a> <a href="index.html#about">О городе</a> <a href="index.html#history">История</a> <a href="index.html#attractions">Достопримечательности</a> <a href="index.html#gallery">Галерея</a> <a href="index.html#facts">Факты</a> <a href="form.html">📝 Регистрация</a> </nav> <main class="form-main"> <form action="#" method="POST" class="registration-form"> <!-- ГРУППА 1: ЛИЧНАЯ ИНФОРМАЦИЯ --> <fieldset> <legend>👤 Личная информация</legend> <!-- Имя (обязательное) --> <div class="form-group"> <label for="fullname">Имя и фамилия <span class="required">*</span></label> <input type="text" id="fullname" name="fullname" placeholder="Иван Иванов" required> <span class="hint">Введите ваше имя и фамилию</span> </div> <!-- Дата рождения (обязательная) --> <div class="form-group"> <label for="birthdate">Дата рождения <span class="required">*</span></label> <input type="date" id="birthdate" name="birthdate" required> <span class="hint">Выберите дату рождения</span> </div> <!-- Пол (радиокнопки) --> <div class="form-group"> <label>Пол <span class="required">*</span></label> <div class="radio-group"> <label class="radio-label"> <input type="radio" name="gender" value="male" required> Мужской </label> <label class="radio-label"> <input type="radio" name="gender" value="female"> Женский </label> <label class="radio-label"> <input type="radio" name="gender" value="other"> Другой </label> </div> </div> <!-- Пароль (обязательный) --> <div class="form-group"> <label for="password">Пароль <span class="required">*</span></label> <input type="password" id="password" name="password" placeholder="Минимум 8 символов" minlength="8" required> <span class="hint">Пароль должен содержать минимум 8 символов</span> </div> <!-- Подтверждение пароля --> <div class="form-group"> <label for="confirm_password">Подтверждение пароля <span class="required">*</span></label> <input type="password" id="confirm_password" name="confirm_password" placeholder="Повторите пароль" required> </div> </fieldset> <!-- ГРУППА 2: КОНТАКТНЫЕ ДАННЫЕ --> <fieldset> <legend>📱 Контактные данные</legend> <!-- Email (обязательный) --> <div class="form-group"> <label for="email">Email <span class="required">*</span></label> <input type="email" id="email" name="email" placeholder="ivanov@example.com" required> <span class="hint">Введите действующий email</span> </div> <!-- Телефон --> <div class="form-group"> <label for="phone">Телефон</label> <input type="tel" id="phone" name="phone" placeholder="+7 (999) 123-45-67" pattern="\+7\s?\(?[0-9]{3}\)?\s?[0-9]{3}-?[0-9]{2}-?[0-9]{2}"> <span class="hint">Формат: +7 (999) 123-45-67</span> </div> <!-- Удобное время для связи (чекбоксы) --> <div class="form-group"> <label>Удобное время для связи</label> <div class="checkbox-group"> <label class="checkbox-label"> <input type="checkbox" name="contact_time" value="morning"> 🌅 Утро (8:00 - 12:00) </label> <label class="checkbox-label"> <input type="checkbox" name="contact_time" value="day"> ☀️ День (12:00 - 18:00) </label> <label class="checkbox-label"> <input type="checkbox" name="contact_time" value="evening"> 🌙 Вечер (18:00 - 22:00) </label> <label class="checkbox-label"> <input type="checkbox" name="contact_time" value="night"> 🌃 Ночь (22:00 - 8:00) </label> </div> <span class="hint">Выберите удобные интервалы для связи</span> </div> <!-- Город (выпадающий список) --> <div class="form-group"> <label for="city">Город проживания</label> <select id="city" name="city"> <option value="">Выберите город</option> <option value="spb">Санкт-Петербург</option> <option value="msk">Москва</option> <option value="other">Другой город</option> </select> </div> <!-- Подписка на новости (чекбокс) --> <div class="form-group"> <label class="checkbox-label"> <input type="checkbox" name="subscribe" value="yes" checked> 📧 Подписаться на новости о Санкт-Петербурге </label> </div> </fieldset> <!-- КНОПКИ --> <div class="form-buttons"> <button type="submit" class="btn-submit"> ✅ Зарегистрироваться </button> <button type="reset" class="btn-reset"> 🗑️ Очистить форму </button> </div> <p class="form-note"> <span class="required">*</span> Поля, обязательные для заполнения </p> </form> </main> <!-- ПРИБИТЫЙ ФУТЕР --> <footer class="footer-fixed"> <div class="footer-content"> <div class="footer-section"> <h4>О проекте</h4> <p>Сайт о Санкт-Петербурге</p> <p>Лабораторная работа №6</p> </div> <div class="footer-section"> <h4>Контакты</h4> <p>Email: info@spb.ru</p> <p>Телефон: +7 (812) 123-45-67</p> </div> <div class="footer-section"> <h4>Навигация</h4> <p><a href="index.html" style="color: #f0a500;">Главная</a></p> <p><a href="form.html" style="color: #f0a500;">Регистрация</a></p> </div> </div> <div class="footer-bottom"> <p>© 2024 Санкт-Петербург | Все права защищены</p> </div> </footer> </body> </html>