Шаблон HTML-формы
Не бывает единого шаблона формы — под каждую задачу нужно составлять что-то своё. Например, форма для отправки сообщений будет отличаться от формы для ввода данных банковской карточки. А ещё важен макет — где-то дизайнер задумал добавить одно текстовое поле с кнопкой, а где-то десяток переключателей. Поэтому мы сначала покажем общий шаблон формы, а затем разберём, из каких тегов он состоит — так вы сможете изменить наш пример под свои цели.
Шаблон HTML-формы
Из чего состоит форма
и
— контейнер формы, в нём содержатся все поля и кнопка для отправки данных. Тегу добавляется два атрибута: action и post . В первом указывается URL-адрес, на который будет отправлена форма, а второй задаёт метод отправки:
- post — посылает данные в теле HTTP-запроса. Его используют, когда нужно отправить много данных и ссылка на результат их обработки не нужна. Например, при редактировании личного профиля.
- get — метод по умолчанию. Он посылает данные формы в строке запроса, то есть они видны в адресной строке браузера. Метод применяется, например, в поисковых формах.
Тег группирует поля формы. Он часто используется с — тегом, который задаёт подписи для каждой группы. Мы использовали этот тег, чтобы разделить поля формы на три части: «Персональная информация», «Контакты» и «Обратная связь».
Заголовок или подпись для полей ввода. Он связывается с элементами двумя способами.
При помощи атрибута for со значением, аналогичным id элемента:
Элемент заключается между открывающим и закрывающим тегами :
Создаёт раскрывающийся список:
Для добавления элементов списка используется тег .
Атрибуты тега :
- autocomplete — включено ли автозаполнение поля;
- disabled — в списке нельзя ничего выбрать;
- form — связывает с формой, если он не вложен в тег ;
- multiple — создаёт «мультиселект», то есть список, в котором можно выбрать несколько значений;
- name — имя элемента, используется для отправки формы;
- required — один из пунктов обязательно должен быть выбран;
- size — размер элемента.
Добавляет поле для ввода сообщения — пользователь может оставить в нём вопрос, комментарий для техподдержки или что-то ещё.
У есть особенность: пользователи могут прямо в браузере растягивать текстовое поле по ширине и высоте, ломая вёрстку и нарушая замыслы дизайнера. Чтобы заблокировать такое поведение, используйте CSS-свойство resize: none .
Основные атрибуты textarea:
- name — имя поля;
- id — связывает поле с ;
- maxlength и minlength — задают максимальную или минимальную длину текста;
- required — указывает, что поле обязательно для заполнения;
- placeholder — выводит короткую подсказку для пользователей — что нужно вводить;
- disabled — блокирует поле ввода;
- readonly — делает поле доступным только для чтения, ввод запрещён.
Создаёт интерактивные элементы для получения данных от пользователя. С его помощью можно добавить поля для ввода имени, номера телефона, почты, логина и пароля. Даже чекбоксы и радиокнопки реализуются с помощью этого тега.
Чтобы пользователи вводили данные в правильном формате, тегу нужно задавать атрибут type с подходящим значением:
- text — можно вводить только текст;
- number — ввод только цифр;
- tel — для телефонных номеров;
- email — ввод электронной почты;
- submit — инпут превращается в кнопку для отправки данных на сервер;
- password — поле для ввода паролей;
- date — для ввода даты;
- checkbox — инпут превращается в чекбокс;
- radio — создаёт радиокнопки.
У атрибута более 20 значений, полный список — на сайте MDN.
Основные атрибуты тега :
- id — связывает input с ;
- name — имя поля;
- maxlength или minlength — максимальная или минимальная длина текста;
- max или min — максимальное или минимальное значение числа и даты;
- required — поле обязательно для заполнения;
- placeholder — в поле ввода отображается подсказка — что нужно вводить;
- disabled — блокирует input ;
- autocomplete — автозаполнение;
- checked — для чекбоксов и радиокнопок, делает поле выбранным;
- pattern — задаёт паттерн для ввода данных, часто используется в типах tel и email ;
- value — значение элемента;
- enctype — указывает, в каком виде пересылать данные на сервер.
Создаёт кнопку для отправки формы:
В старых проектах всё ещё встречаются кнопки, сделанные с помощью . Но у такого способа есть ограничения — например, в можно добавить изображение или псевдоэлемент, а в нет.
Что выбрать
— если нужно поле для ввода сообщения.
— для раскрывающихся списков.
— когда нужны чекбоксы, радиокнопки, поля для загрузки файлов и ввода данных.
— для кнопки отправки формы.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Разметка HMTL
Сначала сделаем разметку нашей будущей формы. В HTML коде я написал подробные комментарии.
Если у вас есть какие-то вопросы или предложения по сотрудничеству - заполните форму ниже
Стилизация CSS
Также написал комментарии по CSS-коду.
/* Подключение шрифта Roboto */ @import url("https:/*fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); /* Убираем все отступы */ * < margin: 0; padding: 0; box-sizing: border-box; >*, *::after, *::before < box-sizing: inherit; >/* При расчете размеров инпутов учитываем внутренние отступы и границы */ input, textarea < box-sizing: border-box; >/* В body устанавливаем шрифт, ширину и высоту, а также фон */ body < font-family: "Roboto", sans-serif; font-size: 16px; line-height: 1.2; width: 100%; min-height: 100vh; background: linear-gradient(45deg, #fff1eb, #ace0f9); display: flex; justify-content: center; /* чтобы контейнер */ align-items: center; /* был по центру */ >/* Ограничиваем контейнер по ширине 1000px */ .container < width: 100%; max-width: 1000px; padding: 0 20px; >/* Стили самой формы */ .content < display: flex; /* делаем колонки в ряд */ align-items: center; /* выравниваем по центру */ justify-content: space-between; /* колонки растянутся на всю ширину */ background: #fff; padding: 40px; border-radius: 5px; box-shadow: 4px 4px 8px 0 rgba(34, 60, 80, 0.2); >/* Стили левой колонки */ .left-side < width: 25%; /* занимает 25% общей ширины */ height: 100%; /* растягиваем на всю высоту */ position: relative; /* позиционирование относительное (для ::before) */ display: flex; flex-direction: column; /* внутри элементы располагаем в колонку */ >/* Стили разделительной линии между левой и правой колонкой */ .left-side::before < content: ""; /* контент нам не нужен */ position: absolute; /* позиционируем относительно .left-side */ height: 70%; /* высота 70% от .left-side */ width: 2px; /* ширина 2px */ background: #afafb6; right: -15px; /* позиционируем справа + отступ 15px (справа) */ top: 50%; /* выравниваем по центру */ transform: translateY(-50%); /* выравниваем по центру */ >/* Стили правой колонки */ .right-side < width: 75%; /* занимает 75% общей ширины */ margin-left: 75px; >/* Элементы левой колонки: адрес, телефон, email */ .details < margin-bottom: 15px; text-align: center; >/* Общие стили для иконок */ .details i < font-size: 25px; /* задаем размер */ color: #3e2093; /* задаем цвет */ margin-bottom: 10px; >/* Стили для заголовков левой колонки */ .topic < font-size: 18px; font-weight: 500; margin-bottom: 7px; /* отступ снизу 7px */ >/* Стили для текста левой колонки */ .text-one, .text-two < font-size: 14px; color: #afafb6; >/* Заголовок правой колонки */ .topic-text < font-size: 23px; font-weight: 600; color: #3e2093; margin-bottom: 10px; >/* Текст правой колонки */ .right-side p < margin-bottom: 20px; >/* Контейнер для input'ов формы */ .input-box < height: 50px; /* по сути задаем высоту input'а */ width: 100%; /* ширина на всю ширину правой колонки (с учетом padding) */ margin-bottom: 20px; /* отступаем снизу 20px */ >/* Стили для input и textarea (поле сообщение) */ .input-box input, .input-box textarea < height: 100%; /* растягиваем на всю высоту контейнера 50px */ width: 100%; /* растягиваем на всю ширину */ border: none; /* убираем внешние края */ border-radius: 5px; /* скругляем края */ background: #f0f1f8; /* задаем цвет фона */ padding: 0 20px; /* отступ справа и слева 20px */ >/* Отдельно стилизуем поле сообщение */ .input-box textarea < resize: none; /* чтобы нельзя было менять высоту */ padding: 20px; font-family: "Roboto", sans-serif; >/* Это контейнер для поля сообщение */ .message-box < min-height: 110px; /* минимальная высота 110px */ >/* Стили для контейнера кнопки */ .button < display: inline-block; /* делаем блочно-строчный элемент */ >/* Стили для самой кнопки */ .button input[type="button"] < color: #fff; font-size: 18px; background: #3e2093; outline: none; border: none; padding: 10px 20px; border-radius: 7px; transition: 0.2s; /* чтобы плавно менялся цвет при наведении (:hover) */ >/* Меняем цвет фона при наведении на кнопку */ .button input[type="button"]:hover
Адаптация под мобильную версию
Эти стили можете вставить в конце style.css, либо создать отдельно файл для стилей мобильной версии (mobile.css)
/* Меняем стили при ширине экрана меньше 800px */ @media (max-width: 800px) < /* Теперь форма (правая колонка) будет сверху, а элементы (левая колонка) снизу */ .content < height: 100%; flex-direction: column-reverse; /* располагаем в колонку и реверсивно */ >/* Внутри левой колонки внутренние элементы располагаем в ряд */ .left-side < margin-top: 50px; flex-direction: row; /* располагаем элементы (адрес, телефон, email) в ряд */ width: 100%; /* левая колонка на всю ширину */ justify-content: center; flex-wrap: wrap; /* перенос элементов, если не хватит места */ >.details < margin-right: 20px; >.details:last-child < margin-right: 0; >/* Убираем разделительную линию */ .left-side::before < display: none; >/* Правая колонка теперь на всю ширину и не имеет отступа слева */ .right-side < width: 100%; margin-left: 0; >>
Собственно, должно получиться в итоге так:
Исходный код
Все исходники мы можете скачать с моего GitHub.
Надеюсь вам помогла эта статья. На связи и до новых встреч!
