Форма в HTML это часть документа, которая позволяет пользователю ввести интересующую нас информацию, которую впоследствии можно принять и обработать на стороне сервера.
Другими словами, формы используются для сбора информации введённой пользователями.
Чтобы определить к какому элементу формы относится текущая метка, необходимо использовать атрибут for тега
. Значение атрибута for должно соответствовать значению глобального атрибута того элемента формы, к которому будет относится метка. Атрибут for можно не использовать, если элемент будет находиться внутри элемента .
В браузере оба варианта (метода) использования текстовых меток выглядят идентично:
После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.
HTML формы — сложные элементы интерфейса. Они включают в себя разные функциональные элементы: поля ввода и
. Каждому разделу можно присвоить название с помощью элемента .
Контактная информация
Имя
E-mail
Рис. 1. Группировка полей формы
Чтобы сделать форму более понятной для пользователей, в поля формы добавляют текст, содержащий пример вводимых данных. Такой текст называется подстановочным и создаётся с помощью атрибута placeholder .
Обязательные для заполнения поля также необходимо выделять. До появления HTML5 использовался символ звездочки * , установленный возле названия поля. В новой спецификации появился специальный атрибут required , который позволяет отметить обязательное поле на уровне разметки. Этот атрибут дает указание браузеру (при условии, что тот поддерживает HTML5), указание не отправлять данные после нажатия пользователем кнопки отправить, пока указанные поля не заполнены.
Для изменения внешний вид текстового поля при получении фокуса, используется псевдокласс focus . Например, можно сделать фон текущего поля более темным или добавить цветную рамку, чтобы оно выделялось среди остальных:
Input:focus {
background: #eaeaea;
}
Ещё один полезный html5-атрибут — атрибут autofocus . Он позволяет автоматически установить фокус на нужном начальном поле для элементов и (только в один элемент каждой формы).
Пример создания формы регистрации
Примечание
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-форма создаётся с помощью парного тега
, внутри которого располагаются теги её элементов.
Теги
Перед тем, как показывать примеры, пройдёмся по тегам.
. Создаёт форму. Если сравнивать форму с таблицей, то тег
выполняет ту же роль, что и тег
. К нему прилагаются следующие атрибуты.
action
. Адрес скрипта или документа, который обрабатывает данные формы. В качестве значения указывается URL.
method
. Метод передачи данных обработчику. Можно указать GET (по умолчанию) или POST. GET подразумевает передачу данных в виде части URL. Возможно, вы видели в адресах что-то вроде?id=225. Это оно и есть. Метод POST работает по-другому, а потому передаваемые данные от пользователя скрыты. Он более безопасен, позволяет передавать больше информации, в том числе и файлы. Но всё это больше касается программирования, нежели HTML-разметки.
accept-charset
. Устанавливает кодировку.
autocomplete
. Включает (on) или отключает (off) автозаполнение форм, когда браузер сам подсказывает вам, что вводить, основываясь на том, что вы набирали в прошлый раз. Отключать функцию имеет смысл для конфиденциальных форм, чтобы обозреватель ненароком не показал важных данных.
name. Имя формы.
Есть и ещё атрибуты, но используются они крайне редко.
. Интересный тег, с помощью которого можно создать любой элемент ввода, какой именно - задаётся атрибутом type. Строго говоря, этот тег можно использовать и вне формы, но тогда вы не сможете указать адрес обработчика, и элемент страницы будет нефункциональным.
Значение
Описание
Флажки. С их помощью вы можете выбрать сразу несколько вариантов
Кнопка выбора файла
Скрытое поле, в браузере не отображается
Кнопка с картинкой
Поле для ввода пароля. Обычное текстовое поле, но вводимые символы скрываются за звёздочками (*)
Переключатели. Почти флажки, но с их помощью можно выбрать только один из предложенных вариантов
Кнопка сброса данных формы к первоначальным значениям
Кнопка отправки данных на сервер. Обычно вы нажимаете их, чтобы подтвердить ввод - Сохранить, Применить, ОК
Текстовое поле
Множество новых значений появилось в HTML5, но они, к сожалению, пока (июнь 2016) поддерживаются только частично.
autofocus
. Фокус ввода будет по умолчанию устанавливаться на том элементе, для которого указан этот атрибут.
checked
. Установить флажок или радиокнопку по умолчанию.
pattern
. С помощью этого атрибута можно заставить пользователя ввести данные в определённом формате. Например, ввести только одну цифру от 0 до 9 или только буквы латинского алфавита (должно быть знакомо). Пока поле не будет заполнено правильно, данные формы не будут переданы на обработку.
placeholder
. Задаёт текст-подсказку.
. Контейнер, с помощью которого создаётся список. Это может быть раскрывающийся список либо список с одним или множественным выбором. За элементы списка отвечают теги
.
size
. Главное свойство, которое указывает количество отображаемых строк списка. Например, если значение равно 1, то список получается раскрывающимся, в противном случае получается либо список, все элементы которого сразу видны, либо список, по элементам которого можно перемещаться с помощью полосы прокрутки.
multiple
. Атрибут без значений. Укажите его, чтобы получить список со множественным выбором.
required
. Делает список обязательным для выбора, то есть пока пользователь не укажет в нём значение, форма не отправится. Часто так поступают со списком Пол в регистрационных формах.
. Тег элемента списка, используемый внутри
.
value
. Значение пункта списка для обработки скриптом.
selected
. Пункт с этим атрибутом по умолчанию будет выделен, как будто пользователь выбрал именно его.
. Контейнер позволяет группировать элементы списка
.
disabled
. Делает группу списка недоступной для выбора (при этом она отображается другим цветом).
label
. Текст заголовка группы.
Пример формы
Теперь, когда все теги известны, создадим небольшую форму авторизации, данные которой обрабатывает файл script.php
, находящийся в папке с HTML-страницей.
Код будет таким.
Форма
Логин:
Пароль:
Кто вы?
Гость
Администратор
Запомнить
Разберём некоторые его части.
- создаём форму, обрабатываемую файлом script.php. Данные передаются методом GET.
<
br
>
- тег перехода на следующую строку.
<
input
name
="
login
"
type
="
text
"
size
="25"
maxlength
="30"
value
="Михаил">
- создаём текстовое поле с именем login шириной в 25 символов. В качестве значения по умолчанию указываем Михаил, чтобы пользователю было понятно, что и как вводить.
<
input
name
="
pass
"
type
="
password
"
size
="25"
maxlength
="30"
value
="">
- создаём поле ввода пароля (символы замещаются звёздочками). Ширина поля - 25, максимальная длина пароля - 30 символов.
<
select
><
option
value
="
c
1">Гость
option
><
option
value
="
c
2">Администратор
option
>
select
>
- создаём простой раскрывающийся список из двух пунктов.
<
input
name
="
save
"
type
="
checkbox
"
value
="
yes
"> Запомнить
- добавляем флажок и пишем поясняющий текст.
<
br
><
input
type
="
submit
"
name
="
enter
"
value
="Вход">
- создаём кнопку, нажатие которой запускает процесс обработки данных.
- закрываем форму.
В браузере веб-форма будет выглядеть, как на рисунке ниже.
Её можно заполнять, но чтобы она начала работать, необходимо написать код и сохранить его в файле script.php
рядом с HTML-страницей.
Я абсолютно уверен, что, бегая по Интернету, Вы ни раз встречали различные формы, например, форму регистрации, форму входа в систему, форму обратной связи и многие-многие другие 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
", если не будет стоять, то значение этой переменной будет "", то есть пустой строкой.
Ещё одним элементом является поле для выбора файла. Наверняка, Вы когда-нибудь загружали файлы на сервер и Вам часто приходилось использовать для этого поле вставки имени файла. Вот такое поле создаётся с помощью уже надоевшего тега
. Напишем так:
Выберите файл для загрузки:
Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы разобрали проблему с кодировкой на сайте
. В данной статье я бы хотел рассказать о создании форм в HTML
. Мне кажется, что это самая важная тема в HTML. Мне вспоминаются слова моей учительницы по английскому языку. Она говорила, если вы знаете значения всех словоформ глагола get, то вы сможете объясниться на английском только с их помощью. То же самое и с формами в HTML
. Если вы знаете формы — вы уже неплохо знаете HTML. Сейчас наверное уже практически и нет сайтов, на которых отсутствуют формы html. Формы используются везде: при создании регистрации, авторизации, подписки, гостевой книги, форума, создании своего движка, да абсолютно везде. Статья наверняка получится большая, так что приготовьтесь. Давайте приступим к изучению формы сразу на примере:
Создание форм HTML
Имя
Пароль
Введите сообщение...
Выберите поисковую систему Google
Yandex
Rambler
Готовы изучить формы?
Да
Конечно да=)
Выберите один из вариантов
Вариант 1
Вариант 2
Вариант 3
Файл
Простая кнопка
Отправить форму
Очистить поля формы
При первом взгляде бросает в дрожь. На самом деле здёсь всё просто, давайте разбираться потихоньку:
Создание формы
начинается с ключевого слова
. Это парный тег, соответственно создание формы должно завершаться тегом
. У тега
есть несколько атрибутов. Атрибут name
задаёт имя формы (это нужно для обработки формы, например в Javascript). Можно, конечно, и не указывать имя, но всё-таки рекомендую это делать. В атрибуте action
указывается имя скрипта, который будет обрабатывать форму (обычно это скрипт на php) и выглядит это так action="request.php"
. В нашем случае мы не обрабатываем форму. Атрибут method
указывает каким способом мы будем передавать данные: открытым (get
) или скрытым (post
). Сразу пример того, что будет показано в строке браузера при этих двух различных атрибутах:
1) Если мы используем метод post: mysite.ru/request.php
.
2) Если мы используем метод get: mysite.ru/request.php?myname="Alex"&surname="Gulynin"
.
Думаю различия понятны.
Элементы формы:
1) Тестовое поле
. Текстовое поле создаётся с помощью тега
, как впрочем и все элементы формы. Атрибут type="text"
как раз и отвечает за то, что будет создано текстовое поле. Атрибут name
— это имя, как и во всех элементах формы. Атрибут value
— это значение по умолчанию.
2) Поле для ввода пароля
. Задаётся с помощью все то же тега
с атрибутом type="password"
.
3) Текстовая область
. Задаётся с помощью тега
. Это парный тег, текстовая область должна закрываться тегом
. У этого элемента есть несколько атрибутов. Также можно задать атрибут name
. Атрибут rows
отвечает за количество строк, атрибут cols
— за количество столбцов. Современные браузеры могут расширять текстовую область, чтобы удобнее было вводить в неё текст. Атрибуты rows и cols — это, так сказать, минимальные значения, до которых можно сжать форму (изначально при загрузке страницы текстовая область имеет размеры, которые заданы атрибутами rows и cols).
4) Радиокнопки
. Смысл радиокнопок в том, чтобы выбрать какое-то одно значение из нескольких. Радиокнопки
также создаются с помощью тега
с атрибутом type="radio"
. Атрибут value
указывает значение, которое соответствует радиокнопке. Хочу обратить ваше внимание вот на какой момент: в нашем примере все 3 кнопки имеют одинаковое значение атрибута name
. Если они будут иметь разное значение атрибута name, ты мы сможем нажать на них все. Соответственно не получится их правильно обработать. Атрибут checked
(значения у него нет) указывает на то, какая радиокнопка будет выбрана по умолчанию.
5) Флажки
. В отличие от радиокнопок, флажки можно прощелкать все. Наберите пример и убедитесь в этом сами. Создаются с помощью тега
с атрибутом type="checkbox"
. Смысл остальных атрибутов такой же, как и у радиокнопок. Скажу только, если мы все галочки снимем, то у нас передастся пустое значение, т.е. в нашем случае будет mycheck=""
.
6) Выпадающий список
. Выпадающий список создаётся с помощью тега
и заканчивается тегом
. В данной конструкции необходимо ещё с помощью тега
указать элементы списка.
7) Поле для отправки файла
. Наверняка вы не раз загружали и отправляли файл, например при задании аватарки для своего профиля. Такой элемент реализуется с помощью тега
с атрибутом type="file"
. Самое сложное — это обработать правильно файл, но этому будет посвящена отдельная статья.
8) Скрытое поле
. Иногда встаёт необходимость передать какие-нибудь данные, вместе со всей остальной формой. Именно для этого и служит тег
с атрибутом type="hidden"
. На самой форме его не видно, но если вы посмотрите исходный код страницы (правой кнопкой по странице и выбрать "исходный код" или нажать сочетание клавиш "ctrl+u"), та данное поле можно будет увидеть.
9) Кнопки
. Кнопки создаются с помощью тега
с атрибутом type="button"
. Атрибут value
отвечает за то, что будет написано на кнопке. Кнопки обычно служат для обработки какого-то события. О событиях кнопок можно будет прочитать в одной из следующих статей.
10) Отправка формы
. По сути это такая же кнопка, но с атрибутом type="submit"
. При нажатии на кнопку форма перейдёт на обработку по пути, указанному в атрибуте action тега