Форма отправки данных
Форма отправки данных
Создание страницы с формой отправки данных является важным этапом для взаимодействия с пользователями на вашем веб-сайте. Формы позволяют посетителям отправлять вам сообщения, делать заказы или подписываться на рассылку. В этом уроке мы рассмотрим ключевые элементы создания формы на веб-странице с использованием HTML
Что включить в страницу(обсудим только то что мы знаем)
Естественно HTML-разметка
Поля ввода: Включите соответствующие поля ввода для имени, email, сообщения и других данных, используя теги <input> и <textarea>.
Обязательные поля: Укажите атрибут required для обязательных полей, чтобы гарантировать отправку полной информации.
Структура и стили: Разместите форму внутри соответствующей секции страницы и примените стили для улучшения визуального восприятия.
Важные моменты на будущее . Обеспечьте удобство использования формы для людей с ограниченными возможностями, предоставив понятные метки и инструкции.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Мета-информация о кодировке и параметрах отображения -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Заголовок веб-страницы -->
<title>Snow Shop - Контакты</title>
<!-- Внутренние стили CSS для веб-страницы -->
<style>
/* Стили для элемента body */
body {
font-family: 'Arial', sans-serif; /* Установка семейства шрифтов и стилей по умолчанию */
margin: 0;
padding: 0;
background-color: #ffffff; /* Установка цвета фона */
}
/* Стили для элемента header */
header {
background-color: #6d6d6d; /* Установка цвета фона */
color: white; /* Установка цвета текста */
padding: 10px;
text-align: center;
}
/* Стили для навигационного меню */
nav ul {
list-style-type: none; /* Убрать маркеры списка */
margin: 0;
padding: 0;
}
nav li {
display: inline; /* Отображение пунктов списка горизонтально */
margin-right: 15px; /* Установка правого отступа для пунктов списка */
}
/* Стили для основного раздела веб-страницы */
section {
max-width: 800px; /* Установка максимальной ширины раздела */
margin: auto; /* Центрирование раздела на странице */
padding: 20px;
background-color: white; /* Установка цвета фона */
}
/* Стили для формы связи */
form {
margin-top: 20px; /* Установка верхнего отступа для формы */
}
label {
display: block; /* Отображение меток на новой строке */
margin-bottom: 8px; /* Установка нижнего отступа для меток */
}
input, textarea {
width: 100%; /* Занимать 100% ширины родительского контейнера */
padding: 8px; /* Установка внутренних отступов */
margin-bottom: 15px; /* Установка нижнего отступа для полей ввода */
box-sizing: border-box; /* Учет внутренних отступов в общей ширине элемента */
}
button {
background-color: #333; /* Установка цвета фона кнопки */
color: white; /* Установка цвета текста на кнопке */
padding: 10px 15px; /* Установка внутренних отступов кнопки */
border: none; /* Убрать границы у кнопки */
cursor: pointer; /* Изменение курсора при наведении на кнопку */
}
/* Стили для элемента footer */
footer {
background-color: #6d6d6d; /* Установка цвета фона */
color: white; /* Установка цвета текста */
text-align: center;
padding: 10px;
position: fixed; /* Фиксирование подвала внизу видимой области */
bottom: 0;
width: 100%; /* Установка ширины в 100% от видимой области */
}
</style>
</head>
<body>
<!-- Секция заголовка с названием и навигационным меню -->
<header>
<h1>Контакты</h1>
<!-- Навигационное меню с ссылками на различные страницы -->
<nav>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="about.html">О нас</a></li>
<li><a href="products.html">Товары</a></li>
<li><a href="contact.html">Контакты</a></li>
</ul>
</nav>
</header>
<!-- Основной раздел с контентом, включающим заголовок и форму связи -->
<section>
<h2>Свяжитесь с нами</h2>
<!-- Форма для отправки сообщения -->
<form action="submit_form.php" method="post">
<label for="name">Имя:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Сообщение:</label>
<textarea id="message" name="message" rows="4" required></textarea>
<button type="submit">Отправить</button>
</form>
</section>
<!-- Секция подвала с авторским уведомлением -->
<footer>
<p>© 2024 Snow Shop. Все НЕ права защищены.</p>
</footer>
</body>
</html>
Вот так выглядит наша страница “Товары”:
Давайте разберем код страницы
Внимание! В самом коде есть небольшие комментарии, которые помогают понять, что происходит в коде.
HTML-часть
Заголовок и навигация
<header>: Верхняя часть страницы с заголовком и навигацией.<h1>: Заголовок первого уровня, сообщает о том, что это страница "Контакты".<nav>: Навигационное меню с ссылками на другие страницы.
Секция с формой
<section>: Область страницы, содержащая форму обратной связи.<h2>: Заголовок второго уровня, описывает раздел страницы.<form>: Элемент формы, определяет начало формы, атрибуты action и method указывают, куда отправлять данные и каким методом (в данном случае, POST).<label>: Метка для полей ввода, помогает пользователям понять, что от них требуется.<input>: Поле ввода для имени и email, с атрибутами типа, идентификатора и обязательного заполнения.<textarea>: Поле ввода для текстового сообщения.<button>: Кнопка для отправки формы.
Общие комментарии
- Все стили находятся внутри HTML-файла в теге <style>. В реальных проектах они могут быть вынесены в отдельные CSS-файлы.
- Форма отправки данных создана для взаимодействия с пользователем, собирая имя, email и сообщение.
- Элементы формы могут быть доступны для обработки на сервере, указанном в атрибуте action, через указанный метод POST.(Такие моменты мы будем рассматривать в наших следующих курсах.)
- Стили добавляются для придания странице красивого и удобного внешнего вида, улучшающего взаимодействие с пользователем.Интересные моменты
- Использование семантических тегов HTML (например, <header>, <nav>, <section>) для лучшей структуризации кода и улучшения доступности.
- Создание стилей для улучшения внешнего вида формы и обеспечения её адаптивности.
- Использование кнопки <button> с цветовой схемой, соответствующей общему стилю страницы.
Заключение
Создание страницы с формой отправки данных - это важный шаг для улучшения взаимодействия с вашим веб-сайтом. Правильная реализация формы с учетом валидации и безопасности помогает обеспечить надежность и удобство для пользователей.
Будьте первым