/
Dashustik
/
Laba_1
Обзор
Документация
Войти
/
Dashustik
/
Laba_1
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
Lab_9
form.html
145 строк
6 KB
Dashustik
8 лаба псевдоэлементы
30 мар 2026, 00:57
30 мар 2026, 00:57
4b27bf2
Код
Авторство
О чём код?
<!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="shortcut icon" type="image/png" href="i.jpg"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="page-shell"> <header class="site-header"> <div class="container site-header__inner"> <a href="new.html" class="site-logo">Эклеры</a> <nav class="site-nav"> <a href="new.html">Главная</a> <a href="form.html">Регистрация</a> <a href="demo.html">Демо</a> <a href="mailto:info@eclairs.ru">Написать</a> <a href="tel:+79991234567">Позвонить</a> </nav> </div> </header> <main class="container form-page"> <section class="card form-intro-card"> <h1>Регистрация нового пользователя</h1> <p> Заполните форму ниже. Поля, отмеченные звёздочкой, обязательны для заполнения. </p> </section> <section class="card form-card"> <form class="registration-form" method="post"> <fieldset> <legend>Личная информация</legend> <div class="form-row"> <label for="user-name">Имя <span class="required-mark">*</span></label> <input type="text" id="user-name" name="user_name" placeholder="Например: Анна" required> </div> <div class="form-row"> <label for="birth-date">Дата рождения</label> <input type="date" id="birth-date" name="birth_date"> </div> <div class="form-row"> <span class="form-label">Пол <span class="required-mark">*</span></span> <div class="inline-options"> <label for="gender-female"> <input type="radio" id="gender-female" name="gender" value="female" required> <span>Женский</span> </label> <label for="gender-male"> <input type="radio" id="gender-male" name="gender" value="male"> <span>Мужской</span> </label> </div> </div> <div class="form-row"> <label for="user-password">Пароль <span class="required-mark">*</span></label> <input type="password" id="user-password" name="user_password" placeholder="Минимум 8 символов" minlength="8" required> </div> </fieldset> <fieldset> <legend>Контактные данные</legend> <div class="form-row"> <label for="user-email">Email <span class="required-mark">*</span></label> <input type="email" id="user-email" name="user_email" placeholder="Например: anna@mail.ru" required> </div> <div class="form-row"> <label for="user-phone">Телефон <span class="required-mark">*</span></label> <input type="tel" id="user-phone" name="user_phone" placeholder="+7 999 123-45-67" pattern="\+?[0-9\s\-\(\)]{10,20}" required> </div> <div class="form-row"> <span class="form-label">Удобный интервал для связи</span> <div class="checkbox-grid"> <label for="morning"> <input type="checkbox" id="morning" name="contact_time" value="morning"> <span>Утро</span> </label> <label for="day"> <input type="checkbox" id="day" name="contact_time" value="day"> <span>День</span> </label> <label for="evening"> <input type="checkbox" id="evening" name="contact_time" value="evening"> <span>Вечер</span> </label> <label for="night"> <input type="checkbox" id="night" name="contact_time" value="night"> <span>Ночь</span> </label> </div> </div> <div class="form-row"> <label for="promo-code">Промокод</label> <input type="text" id="promo-code" name="promo_code" placeholder="Поле временно недоступно" disabled> </div> </fieldset> <div class="form-actions"> <button type="submit" class="button-primary">✓ Зарегистрироваться</button> <button type="reset" class="button-secondary">↺ Очистить</button> <button type="button" class="button-disabled" disabled>🔒 Недоступно</button> </div> </form> </section> </main> <footer class="site-footer"> <div class="container site-footer__inner"> <p class="footer-text">Все об эклерах ✨</p> <div class="footer-links"> <a href="mailto:info@eclairs.ru">✉ Email</a> <a href="tel:+79991234567">☎ Телефон</a> <a href="new.html">🏠 На главную</a> <a href="demo.html">🎨 Демо</a> </div> </div> </footer> </div> </body> </html>