1) Тестовое поле
. Текстовое поле создаётся с помощью тега
, как впрочем и все элементы формы. Атрибут type="text"
как раз и отвечает за то, что будет создано текстовое поле. Атрибут name
— это имя, как и во всех элементах формы. Атрибут value
— это значение по умолчанию.
4) Радиокнопки
. Смысл радиокнопок в том, чтобы выбрать какое-то одно значение из нескольких. Радиокнопки
также создаются с помощью тега
с атрибутом type="radio"
. Атрибут value
указывает значение, которое соответствует радиокнопке. Хочу обратить ваше внимание вот на какой момент: в нашем примере все 3 кнопки имеют одинаковое значение атрибута name
. Если они будут иметь разное значение атрибута name, ты мы сможем нажать на них все. Соответственно не получится их правильно обработать. Атрибут checked
(значения у него нет) указывает на то, какая радиокнопка будет выбрана по умолчанию.
5) Флажки
. В отличие от радиокнопок, флажки можно прощелкать все. Наберите пример и убедитесь в этом сами. Создаются с помощью тега
с атрибутом type="checkbox"
. Смысл остальных атрибутов такой же, как и у радиокнопок. Скажу только, если мы все галочки снимем, то у нас передастся пустое значение , т.е. в нашем случае будет mycheck=""
.
8) Скрытое поле
. Иногда встаёт необходимость передать какие-нибудь данные, вместе со всей остальной формой. Именно для этого и служит тег
с атрибутом type="hidden"
. На самой форме его не видно, но если вы посмотрите исходный код страницы (правой кнопкой по странице и выбрать "исходный код" или нажать сочетание клавиш "ctrl+u"), та данное поле можно будет увидеть.
9) Кнопки
. Кнопки создаются с помощью тега
с атрибутом type="button"
. Атрибут value
отвечает за то, что будет написано на кнопке. Кнопки обычно служат для обработки какого-то события. О событиях кнопок можно будет прочитать в одной из следующих статей.
10) Отправка формы
. По сути это такая же кнопка, но с атрибутом type="submit"
. При нажатии на кнопку форма перейдёт на обработку по пути, указанному в атрибуте action тега
. Каждому разделу можно присвоить название с помощью элемента .
Контактная информация
Имя
E-mail
Рис. 1. Группировка полей формы
Чтобы сделать форму более понятной для пользователей, в поля формы добавляют текст, содержащий пример вводимых данных. Такой текст называется подстановочным и создаётся с помощью атрибута placeholder .
Обязательные для заполнения поля также необходимо выделять. До появления HTML5 использовался символ звездочки * , установленный возле названия поля. В новой спецификации появился специальный атрибут required , который позволяет отметить обязательное поле на уровне разметки. Этот атрибут дает указание браузеру (при условии, что тот поддерживает HTML5), указание не отправлять данные после нажатия пользователем кнопки отправить, пока указанные поля не заполнены.
Для изменения внешний вид текстового поля при получении фокуса, используется псевдокласс focus . Например, можно сделать фон текущего поля более темным или добавить цветную рамку, чтобы оно выделялось среди остальных:
Input:focus {
background: #eaeaea;
}
Ещё один полезный html5-атрибут — атрибут autofocus . Он позволяет автоматически установить фокус на нужном начальном поле для элементов и
Пример создания формы регистрации
HTML разметка
Примечание
action="form.php" — ссылка на файл обработчика формы. Создайте файл в кодировке UTF-8, закачайте его на сервер и замените action="form.php" на путь к файлу на вашем сервере.
Рис. 2. Внешний вид формы по умолчанию
Как видно из рисунка, каждый элемент формы имеет стили браузера по умолчанию. Очистим стили и оформим элементы формы.
Form-wrap {
width: 550px;
background: #ffd500;
border-radius: 20px;
}
.form-wrap *{transition: .1s linear}
.profile {
width: 240px;
float: left;
text-align: center;
padding: 30px;
}
form {
background: white;
float: left;
width: calc(100% - 240px);
padding: 30px;
border-radius: 0 20px 20px 0;
color: #7b7b7b;
}
.form-wrap:after, form div:after {
content: "";
display: table;
clear: both;
}
form div {
margin-bottom: 15px;
position: relative;
}
h1 {
font-size: 24px;
font-weight: 400;
position: relative;
margin-top: 50px;
}
h1:after {
content: "\f138";
font-size: 40px;
font-family: FontAwesome;
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
}
/********************** стилизация элементов формы **********************/
label, span {
display: block;
font-size: 14px;
margin-bottom: 8px;
}
input, input {
border-width: 0;
outline: none;
margin: 0;
width: 100%;
padding: 10px 15px;
background: #e6e6e6;
}
input:focus, input:focus {
box-shadow: inset 0 0 0 2px rgba(0,0,0,.2);
}
.radio label {
position: relative;
padding-left: 50px;
cursor: pointer;
width: 50%;
float: left;
line-height: 40px;
}
.radio input {
position: absolute;
opacity: 0;
}
.radio-control {
position: absolute;
top: 0;
left: 0;
height: 40px;
width: 40px;
background: #e6e6e6;
border-radius: 50%;
text-align: center;
}
.male:before {
content: "\f222";
font-family: FontAwesome;
font-weight: bold;
}
.female:before {
content: "\f221";
font-family: FontAwesome;
font-weight: bold;
}
.radio label:hover input ~ .radio-control,
.radiol input:focus ~ .radio-control {
box-shadow: inset 0 0 0 2px rgba(0,0,0,.2);
}
.radio input:checked ~ .radio-control {
color: red;
}
select {
width: 100%;
cursor: pointer;
padding: 10px 15px;
outline: 0;
border: 0;
background: #e6e6e6;
color: #7b7b7b;
-webkit-appearance: none; /*убираем галочку в webkit-браузерах*/
-moz-appearance: none; /*убираем галочку в Mozilla Firefox*/
}
select::-ms-expand {
display: none; /*убираем галочку в IE*/
}
.select-arrow {
position: absolute;
top: 38px;
right: 15px;
width: 0;
height: 0;
pointer-events: none; /*активизируем показ списка при нажатии на стрелку*/
border-style: solid;
border-width: 8px 5px 0 5px;
border-color: #7b7b7b transparent transparent transparent;
}
button {
padding: 10px 0;
border-width: 0;
display: block;
width: 120px;
margin: 25px auto 0;
background: #60e6c5;
color: white;
font-size: 14px;
outline: none;
text-transform: uppercase;
}
/********************** добавляем форме адаптивность **********************/
@media (max-width: 600px) {
.form-wrap {margin: 20px auto; max-width: 550px; width:100%;}
.profile, form {float: none; width: 100%;}
h1 {margin-top: auto; padding-bottom: 50px;}
form {border-radius: 0 0 20px 20px;}
}
Файл form.php
" . "\r\n";
$headers .= "Bcc: ваш_email". "\r\n";
if(!empty($name) && !empty($sex) && !empty($email) && !empty($country) && filter_var($email, FILTER_VALIDATE_EMAIL)){
mail($email, $subject, $msg, $headers);
echo "Спасибо! Вы успешно зарегистрировались.";
}
?>
Примечание
В переменной $subject укажите текст, который будет отображаться как заголовок письма;
Ваше_имя — здесь вы можете указать имя, которое будет отображаться в поле «от кого письмо» ;
url_вашего_сайта замените на адрес сайта с формой регистрации;
ваш_email замените на ваш адрес электронной почты ;
$headers .= "Bcc: ваш_email". "\r\n"; отправляет скрытую копию на ваш адрес электронной почты.
Формы в HTML - это самая сложная, но с другой стороны, пожалуй самая интересная тема в HTML.
Веб-формы позволяют посетителям сайта внести в специальные поля ту или иную информацию, а разработчику ее получить в удобном для него виде.
Примером формы может служить гостевая книга, анкета, онлайн тест . Формы заполняют при регистрации на сайте, при оформлении заказов в интернет магазине и т.п.
Пользуясь HTML, Вы можете создать каркас формы: текстовые поля, меню, списки, кнопки, флажки и переключатели. То есть те элементы, при помощи которых в форму вносится определенная информация.
Затем данные, внесенные в форму, отправляются на сервер для обработки. Но HTML здесь бессилен - над обработкой формы уже работает программа или скрипт, который к ней привязывается. Такие программы обычно пишут на языке php или javascript.
Атрибуты формы - тег
.
Атрибут action
является обязательным для любой формы - он указывает адрес к файлу, который обслуживает форму (обрабатывает внесенные в нее данные
).
Атрибут method
определяет способ отправки содержимого формы. Существует два метода - GET
и POST
. Сейчас не имеет смысла вникать в эти параметры, так как тема отправки информации методами GET
и POST
относится к языкам обработки данных (например, PHP
). Достаточно знать, что именно метод передачи данных POST
в большинстве случаях используется в формах.
Атрибут name
тега
Сторона света - одно из четырех основных направлений:
Север
Юг
Запад
Восток
7 Чудес света!
Пирамида Хеопса
Висячие сады Семирамиды
Статуя Зевса в Олимпии
Храм Артемиды в Эфесе
Мавзолей в Галикарнасе
Колосс Родосский
Александрийский маяк
Сторона света - одно из четырех основных направлений:
Север
Юг
Запад
Восток
7 Чудес света!
Пирамида Хеопса
Висячие сады Семирамиды
Статуя Зевса в Олимпии
Храм Артемиды в Эфесе
Мавзолей в Галикарнасе
Колосс Родосский
Александрийский маяк
Многострочное текстовое поле - тег
Тег
создает многострочное текстовое поле. В нем допустимо делать переносы строк, которые сохраняются при передаче данных обработчику.
Атрибут name
тега
является обязательным - при помощи его текстовому полю присваивают имя.
Атрибут disabled
блокирует поле - содержимое поля нельзя изменить и оно недоступно. Атрибут readonly
говорит о том, что поле предназначено только для чтения - пользователь не имеет возможность редактировать содержимое, но оно доступно - его можно выделить и, например, скопировать.
Можно задать ширину текстового поля в символах и высоту поля в строках при помощи атрибутов cols
и rows
соответственно.
Если содержимое поля превысит его размеры - появится бегунок.
Если содержимое поля превысит его размеры - появится бегунок.
Пример использования формы
Теперь давайте посмотрим: как работает форма.
Форма заказа обучающего видеоматериала:
Ваше имя: *
Ваш заказ:
Видео-урок по HTML
Видео-урок по CSS
Видео-урок по PHP
Выберите носитель:
CD
DVD
USB Flash
Ваш E-mail: *
Ваш адрес: *
Доброго времени суток, любители веб-разработки и желающие сверстать свой собственный сайт. До этого все мои публикации были посвящены основным элементам языка, способам создания различных объектов контента, их форматированию, структурированию и т.д. Освоив предыдущие темы, вы уже можете создать достаточно хороший сайт. Однако он будет неполноценным без сегодняшней темы: «Создание форм в html».
Данный раздел в языке очень важен. Поэтому уделите его изучению особое внимание, иначе созданный вами веб-ресурс нельзя будет выпустить в продакшн. Таким образом, после прочтения статьи вы узнаете, для чего нужно использовать формы, с помощью каких тегов они создаются, а также сможете опробовать конкретные примеры на практике. Приступим же!
Что такое форма и как она функционирует
Форма
– это один из важнейших объектов , который предназначен для обмена информационными данными между сервером и пользователем.
Проще говоря, если вы хотите создать интернет-магазин с возможностью заказа продукции на сайте, запрашивать на веб-ресурсе регистрацию и работать с аккаунтами или обеспечить клиентам обратную связь с менеджерами компании, то вам никак не обойтись без форм.
Форма задается при помощи специального элемента языка html
.
Замечу, что документ с кодом может содержать в себе несколько объявлений тега
, однако на сервер для обработки данных может быть отправлен всего лишь один запрос. Именно поэтому информация, которая вводиться пользователем в отведенные для этого поля и относится к разным формам, не должна быть зависимой. Также, не допускается делать формы вложенными одна в другую.
Для нетерпеливых и жаждущих быстрее взглянуть на кодовое представление, я прикрепил простой пример использования панели с текстовым полем для пароля c кнопкой:
Пример
Может сейчас и не сильно понятно, что и как взаимодействует в этой небольшой программе, однако гарантирую, что после прочтения всей статьи вы сможете создавать приложения в разы сложнее.
Отправляем данные на сторону сервера
Для того чтобы отправить набранную (или выбранную) информацию в диалоговом окне, необходимо использовать стандартный механизм – кнопку Submit
.
Код такого метода выглядит вот так:
При запуске представленной строки в отобразиться кнопка с надписью: «Отправить».
Другой способ отправки данных на сторону сервера – это нажатие в пределах диалогового окна клавиши Enter.
После подтверждения отправки указанной информации, она не сразу поступает на сервер. Сначала ее обрабатывает браузер, приводя к виду «имя=значение».
За имя отвечает параметр атрибута type
тега
, а за значение – данные, введенные пользователем. Далее преобразованная строка передается обработчику, который чаще всего задан в атрибуте action
элемента
.
Сам по себе параметр action не обязателен, а в некоторых моментах и вовсе не нужен. Например, если страница сайта написана с использованием php или js, то обработка происходит на текущей странице и ссылки не нужны.
Для большего понимания всей картины функционирования сайта я хотел бы добавить, что на сервере работа с данными выполняется уже при помощи других языков. Так, серверными языками считаются: Python, php, си-подобные языки (C#, C и т.д.), Java и другие.
Теперь я хотел бы остановиться и подробнее рассказать об элементе
. Если объяснять простым языком, то
нужен для создания текстовых полей, переключателей, разнообразных кнопок, скрытых полей, флажков и других объектов.
Тег не обязательно задавать в паре с
, однако если необходимо обработать пользовательские записи или занести их, например, в базу данных, то без контейнера не обойтись.
Основными атрибутами данного элемента языка гипертекстовой разметки являются:
Text
– создает текстовое поле;
Submit
– создает кнопку для отправки данных на сервер;
Image
– отвечает за кнопку с картинкой;
Reset
– устанавливает кнопку для очистки формы;
Password
– задает текстовое поле специально для паролей;
Checkbox
– отвечает за поля с флажками;
Radio
– отвечает за поля с выбором одного элемента;
Button
– создает кнопку;
Hidden
– используется для скрытых полей;
File
– задает поле, отвечающее за отправку файлов.
Способы передачи информации
Существует 2 способа передачи пользовательских данных на серверную сторону: Get
и Post
. Данные методы выполняют одно и то же действие, однако они существенно отличаются друг от друга. Поэтому прежде чем указывать какой-либо из них, давайте ознакомимся с их особенностями.
Post
Get
Размер передаваемых документов
Ограничиваются серверной стороной.
Максимум – 4 Кб.
Способ отображения отправленной информации
Доступна только при просмотре через браузерные расширения или другие специальные программные продукты.
Сразу же доступна всем.
Использование закладок
Нет возможности добавить в закладки, так как запросы не повторяются (все страницы ссылаются на один адрес).
Любую страницу с запросом можно сохранить в закладках и перейти к ней спустя время.
Кэширование
Исходя из предыдущего пункта все запросы на одной странице.
Каждую страницу можно кэшировать отдельно.
Предназначение
Используется для пересылки больших файлов (книг, изображений, видео и т.д.), сообщений, комментариев.
Отлично подходит для поиска запрашиваемых значений по веб-ресурсу или для передачи коротких текстовых сообщений.
Для того чтобы указать каким из двух методов передачи данных работать браузеру, в элементе
используют предусмотренный параметр method
(например, method="post"
).
Рассмотрим второй пример. Создадим форму, в которой нужно ввести свои персональные данные (имя и фамилию, дату рождения) и придумать пароль. После все это отправляем на сервер при помощи метода Post
.
Метод POST
Введите свои персональные данные!
Например, для ввода даты предусмотрены переключатели числа каждого из параметров (дня, месяца и года), а также для удобства выпадающая панель с самим календарем.
Создание панели регистрации
Основные теги и атрибуты были рассмотрены. Именно поэтому настало время для создания полноценной формы регистрации с использованием стилевой разметки css и проверкой вводимых данных. Конечно посмотреть серверную работу с ними нам не удастся, но дизайн и важные детали мы предусмотрим.
Регистрация
Регистрация на сайте
Для последующей корректной работе в нашем сервисе, пожалуйста, вводите правдивые данные!
Имя:
Фамилия:
E-mail:
Пароль:
Повтор пароля:
Советую вам сохранить данный код программы в документе с расширением.html и кодировкой utf-8, и открыть последний в окне браузера. Перед вами предстанет во всей красе панель для регистрации с полями для ввода имени, фамилии, e-mail и пароля с повторением. Заметьте, что при запуске страницы курсор сразу же расположен в первом текстовом поле. Этот прием достигается за счет атрибута autofocus
.
Начните заполнять поля, оставив одно без изменений, и нажмите кнопку «Зарегистрироваться». Как вы уже заметили, форма не будет отправлена, так как у каждого элемента <
input>
указан атрибут required
. Он устанавливает отмеченные поля обязательными для заполнения.
Еще одним интересным моментом является указание типа type="email"
, который появился в . При использовании такого типа поля, введенная информация автоматически проверяется на корректность. В случае ошибок форма не отправляется на сервер.
Вот и подошла публикация к концу. В ней я постарался собрать максимальное количество важных и актуальных знаний , касающихся форм. Надеюсь она была вам полезной! Буду очень признателен, если вы вступите в ряды моих подписчиков и расскажете о блоге своим друзьям.
Пока-пока!
С уважением, Роман Чуешов
Прочитано: 333 раз
Я абсолютно уверен, что, бегая по Интернету, Вы ни раз встречали различные формы , например, форму регистрации, форму входа в систему, форму обратной связи и многие-многие другие HTML формы
.
Собственно, форма состоит из различных элементов ввода: текстовых полей, текстовых областей, радио-кнопок, переключателей, кнопок и так далее.
И в этой статье Вы научитесь создавать абсолютно любые .
Сначала создайте простейшую HTML-страницу
, в которую добавьте контейнер (тег
), выравнивающий своё содержимое по центру. Надеюсь, что Вы с этим без труда справитесь.
А теперь займёмся формой. Форма начинается с тега
, соответственно, заканчивается закрывающим тегом
. У этого тега есть несколько атрибутов, которые очень желательно заполнять. Но для начала давайте создадим простейшую форму с атрибутами тега
, чтобы Вам было понятнее назначение каждого из них:
Здесь у нас начинается описание формы, у которой есть следующие атрибуты:
1) Атрибут "name
". Значение этого атрибута означает имя HTML формы
. Встаёт вопрос, зачем это надо? Ответ очень простой: если Вы будете использовать не одну форму, а несколько, то чтобы отличить одну форму от другой, необходимо задавать различные имена . А сами имена нужны для того, чтобы обращаться к формам, например, через JavaScript
. Я Вам открою маленький секрет , который я Вам не советую использовать, но честности ради, скажу о нём. На самом-то деле, формы можно легко различать и без имён, поэтому, вообще говоря, имя формы совсем необязательно. Но я НАСТОЯТЕЛЬНО
рекомендую давать формам имена, ведь Вам самим так будет проще понять, за что каждая из форм отвечает.
2) Атрибут "action
". Значение этого атрибута отвечает за путь к файлу скрипта, который будет обрабатывать форму. То есть мало ввести данные в форму, их же ведь ещё нужно соответствующим образом обработать, и вот как раз путь к этому файлу-обработчику
и находится в значении атрибута "action
".
3) Атрибут "method
". У него может быть одно из двух очень популярных значения: "post
" и "get
". Этот атрибут определяет способ отправки. Не буду вдаваться в подробности, просто скажу, что первый способ является скрытой отправкой данных, а второй открытой. Чтобы стало ещё понятнее, то давайте рассмотрим два адреса перехода:
а) http://mysite.ru/scipt/request.php
б) http://mysite.ru/script/request.php?a=7&b=Michael
В первом случае, пользователь не видит, что отправляет (метод "post
"), а во втором он реально видит имена переменных и их значения (метод "get
"). Вы, в конце статьи, можете попытаться отправить форму с помощью двух разных методов и убедиться в их различии. Но пока что скажу, что ГОРАЗДО
чаще используют метод "post
", то есть скрытую отправку.
Это было описание самой формы, а теперь же можно заняться добавлением элементов в форму.
Первое, что мы добавим - это текстовое поле. Добавляется текстовое поле с помощью тега
, а точнее с помощью атрибута этого тега "type
" со значением "text
". Также перед созданием текстового поля рекомендуется написать, что это за поле, например, "Ваше имя
". Внутри тега
напишите такую строчку:
Ваше имя:
Опять же, давайте разберём атрибуты:
1) Атрибут "type
" отвечает за тип элемента ввода. В данном случае , мы указали, что это обычное текстовое поле. В следующих элементах мы будем менять значение этого атрибута.
2) Атрибут "name
" отвечает за имя элемента. Здесь мы указали, что имя данного поля firstname
.
3) Атрибут "value
" отвечает за значение этого поля по умолчанию.
Как говорится, лучше один раз увидеть, чем сто раз услышать, поэтому лучше Вы наберите (причём, именно наберите, а не скопируйте!
) этот текст в редакторе, а потом посмотрите результат в браузере.
Теперь создадим ещё одно похожее поле, но только не для ввода обычных символов, а для ввода пароля. То есть должно быть всё то же самое, но только текст должен быть скрыт за звёздочками
. Поэтому, перейдя на следующую строку (тег
), напишем такой код:
Ваш пароль:
Как видите, теперь значением атрибута "type"
является "password
". Остальные атрибуты те же, что и для обычного текстового поля.
Следующий элемент - это выпадающий список. Создаётся он чуть посложнее, так как тут необходимо не только объявить создание выпадающего списка, но ещё и добавить элементы в этот список. Напишем, перейдя на следующую строку (далее, упоминать об этом не буду) следующий HTML-код
.
Выберите вариант: Вариант 1 Вариант 2 Вариант 3
Тег
означает начало выпадающего списка. Заканчивается список тегом
. Атрибут "name
" ясен, ибо уже объяснял его несколько раз. Элементы списка создаются с помощью тега
. Значение атрибута "value
" означает, какой значение будет у переменной choice
(например, в JavaScript
), то есть либо choice = 1
, либо choice = 2
, либо choice = 3
. Сразу после окончания описания тега
ставится то, что увидит пользователь в выпадающем списке. Опять же, лучше посмотрите в браузере, и Вам всё сразу станет понятно.
Теперь добавим текстовую область, используя тег
:
Напишите что-нибудь:Сообщение
Здесь мы с Вами создаём текстовую область высотой в 10
строк (значение атрибута "rows
") и шириной в 15
символов (значение атрибута "cols
").
Внутри этого парного тега указывается текст в текстовой области по умолчанию. Собственно, здесь больше нечего сказать. Двигаемся дальше.
Следующий элемент - это радио-кнопка. Радио-кнопка - это набор таких "кружочков
", из которых можно выбрать только один. Создаются радио-кнопки с помощью HTML-тега
, а, точнее, с помощью значения "radio
" атрибута "type
". Напишем такой HTML-код
:
Выберите что-нибудь одно: Вариант 1 Вариант 2 Вариант 3
Тут я остановлюсь на атрибуте "name
", потому что помимо задания имени у него есть ещё одна очень важная особенность . Если Вы НЕ
сделаете одинаковыми имена у этих трёх радио-кнопок, то они станут независимыми, а, следовательно, можно будет выбрать сразу несколько вариантов. Чтобы в этом убедиться, поменяйте имена, а потом попытайтесь выбрать сразу несколько вариантов, и Вы сразу убедитесь в моих словах. Поэтому одна группа радиокнопок должна иметь одно и то же значение атрибута "name
". Атрибут "value
" означает значение переменной "choiceradio
" (опять же, например, в JavaScript
). Сразу после описания тега
идёт текст, который увидит пользователь рядом с соответствующей радио-кнопкой.
Ещё одним элементом формы являются переключатели (checkbox
). Создаются они опять же с помощью тега
. Напишем следующие строчки:
Вы согласны с нашими правилами:
Я думаю, что здесь всё прозрачно, поэтому объяснять не буду. Советую лишь просто посмотреть, как это выглядит, в браузере. И скажу, что если флажок будет стоять, то значение переменной "terms
" будет "yes
", если не будет стоять, то значение этой переменной будет "", то есть пустой строкой.
Ещё одним элементом является поле для выбора файла. Наверняка, Вы когда-нибудь загружали файлы на сервер и Вам часто приходилось использовать для этого поле вставки имени файла. Вот такое поле создаётся с помощью уже надоевшего тега
. Напишем так:
Выберите файл для загрузки: