Урок посвящен созданию страниц «Обратная связь», «Вход» и «Регистрация» с формами. Рассмотрим создание HTML-структуры форм и добавление стилей CSS.
Создание HTML-страниц
Создайте новые HTML-документы (например, feedback.html, reg.html, auth.html) в папке www проекта. Скопируйте код из index.html, оставив только <header> и <article>.
Разметка формы обратной связи
Создадим форму отправки сообщения с помощью тега <form>. Атрибут action указывает на обработчик формы (в примере обработка не реализована). Атрибут method="post" обычно используется для отправки данных на сервер.
<form>
<!-- поля формы -->
</form>Внутри формы разместим поля ввода:
- <input type="text"> — для темы сообщения (с placeholder="Тема").
- <input type="email"> — для email адреса (с placeholder="Ваш email").
- <input type="text"> — для имени (с placeholder="Ваше имя").
- <textarea> — для текста сообщения (с placeholder="Введите ваше сообщение").
Добавим класс field к полям ввода для стилизации.
Стилизация форм с CSS
Стили для форм можно вынести в отдельный файл (forms.css), но в примере они объединены с общим CSS-файлом. Используем селекторы, например .form, .form input, .form textarea.
/* Стили для формы */
.form {
width: 60%;
margin-left: 20%; /* центрирование */
}
.form input, .form textarea {
width: 40%;
float: left;
clear: both;
margin: 10px 0;
}
/* Дополнительные стили для полей ввода и textarea (цвет фона, границы, отступы и т.д.)*/Добавим лейблы (<label>) с атрибутами for (связь с полями ввода) и id (для каждого поля).
<label for="theme">Тема сообщения</label> <input type="text" id="theme" name="theme" class="field" placeholder="Тема">/* Стили для лейблов */
label {
display: block; /* Лейбл на новой строке */
margin-bottom: 5px; /* Отступ снизу */
}Кнопка отправки
Добавим кнопку отправки с помощью <input type="submit">:
<input type="submit" id="send" value="Отправить" class="send">И стили для кнопки:
/* Стили для кнопки отправки */
.send {
float: left;
padding: 10px;
background-color: #FF0000; /* Пример цвета */
color: #FFFFFF; /* Белый текст */
border-radius: 5px;
cursor: pointer; /* Курсор в виде руки */
}
/* Ховер эффект */
.send:hover {
background-color: #FFFF00; /* Пример цвета при наведении */
}Страницы «Вход» и «Регистрация»
Страницы «Вход» (auth.html) и «Регистрация» (reg.html) создаются аналогично странице «Обратная связь», используя тот же код HTML и CSS.
Созданы три страницы с формами: обратная связь, вход и регистрация. Рассмотрены основные элементы HTML для создания форм и стили CSS для оформления. Пример демонстрирует базовые принципы, которые можно расширять и модифицировать. Обратите внимание на использование селекторов CSS и семантических атрибутов (id, name, placeholder).