Также доступны и другие элементы форм, но мы рассмотрели наиболее используемые.
. Каждому разделу можно присвоить название с помощью элемента .
Контактная информация
Имя
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"; отправляет скрытую копию на ваш адрес электронной почты.
Это первая из трех статей о веб-формах HTML5. Перед тем, как перейти к стилизации и JavaScript-валидации на стороне клиента, мы рассмотрим основную разметку. Я рекомендую вам прочесть эту статью, даже если вы уже знакомы с формами - здесь описано множество новых атрибутов и плюшек!
HTML формы могут казаться простыми, но они необходимы для большинства веб-сайтов и приложений. В HTML4 типы полей ввода были ограничены следующим списком:
input type="text"
input type="checkbox"
input type="radio"
input type="password"
input type="hidden" - для данных, невидимых пользователю
input type="file" - для загрузки файлов
textarea - для ввода больших объемов текста
select - для выпадающих списков
button — обычно используется для отправки данных формы, но также можно использовать input type="submit" и input type="image"
К тому же:
возможности стилизации с помощью CSS ограничены
расширенные элементы, вроде элементов для выбора даты и цвета нужно реализовывать самостоятельно, с помощью кода
валидация на стороне клиента требует JavaScript
Дополнительные типы полей
В HTML5 было введено огромное количество новых типов полей. Они предоставляют нативные помощники ввода и валидации без JavaScript-кода
Тип
Описание
email
ввод email-адреса
tel
ввод телефонного номера - нет строгого синтаксиса, но разрывы строк будут удалены
url
ввод URL
search
поле поиска с разрывами строк автоматически удаляется
number
число с плавающей точкой
range
элемент управления для ввода примерного значения, обычно представляемого с помощью слайдеров
date
ввод дня, месяца и года
datetime
ввод дня, месяца, года, часа, минуты, секунды и микросекунды относительно текущей временной зоны
datetime-local
ввод даты и времени без временной зоны
month
ввод месяца и года без временной зоны
week
ввод номера недели без временной зоны
time
ввод времени без временной зоны
color
выбор цвета
Атрибуты полей ввода
Кроме перечисленных выше, поля ввода могут иметь любой из специфичных для формы атрибутов. Некоторые из них булевого типа, что означает, что они не требуют значений, например:
конечно, можно и добавить таковые, если вам нравится синтаксис в стиле XHTML, например
Атрибут
Описание
name
имя поля ввода
value
изначальное значение
checked
делает флажок или переключатель выбранным
maxlength
Максимальная длина вводимой текстовой строки. В HTML5 также может быть применена и для полей textarea
minlength
Минимальная длина строки. Данная возможность документирована, но на момент написания поддержка браузерами слабая, и HTML валидаторы ругаются. Альтернативный вариант использования - pattern=".{3,}", что проверит на наличие минимум трех символов во вводимой строке
placeholder
ненавязчивая подсказка внутри поля
autofocus
устанавливает фокус на указанный элемент (видимый) при загрузке страницы
required
указывает, что в поле должно быть введено значение (не пустое поле)
pattern
проверяет значение на соответствие регулярному выражению
min
минимальное разрешенное значение (числовое и дата)
max
максимальное разрешенное значение (числовое и дата)
step
шаг изменения значения. Например, input type="number" min="10" max="19" step="2" разрешит только значения 10, 12, 14, 16 или 18
autocomplete
указывает браузеру подсказку к автодополнению, например “расчетный счет”, или может быть выставлен в значение “on” или “off”, для включения/отключения овтозаполнения
inputmode
указывает способ ввода. Наиболее полезные возможности:
verbatim - содержимое с дословной передачей смысла, например имена пользователей
latin - латиница, например, поля поиска
latin-name - имена, то есть с заглавной первой буквой
latin-prose - содержимое с не дословной передачей смысла, например сообщения, твиты, прочее.
numeric - числовые значения, где не подходят типы number и range , например, номера кредитных карт
size
размер в количестве символов для полей типа text или password, или количество пикселей для полей типа email, tel, url или search. Наверное, стоит избегать, и использовать стилизацию посредством CSS
rows
Количество текстовых строк (только для textarea)
cols
количество рядов символов (только для textarea)
list
ссылается на список опций
spellcheck
установить в true или false, чтобы включить/отключить проверку привописания для поля
form
идентификатор форму, которой принадлежит данное поле. Вообще-то поля должны размещаться внутри формы, но этот атрибут позволяет разместить поле за пределами формы, в любом месте страницы
formaction
указывает URI, переопределяющее действие формы при отправке данных (только для кнопок отправки/изображений)
formmethod
задает GET или POST, переопределяет атрибут формы method (только для кнопок отправки/изображений)
formenctype
указывает тип содержимого при отправке (text/plain, multipart/form-data или application/x-www-form-urlencoded, толкьо для кнопок отправки и изображений)
formtarget
указывает целевое окно/фрейм для переопределения атрибута формы target при отправке (только для кнопок отправки / изображений)
readonly
значение поля не может быть изменено, хотя оно будет отвалидировано и отправлено
disabled
отключает поле ввода - нет валидации, и данные не будут отправлены
Заметьте, что поля date должны использовать формат YYYY-MM-DD для атрибутов value, min и max.
Следующий пример показывает поле, требующее обязательного ввода email, заканчивающегося на @mysite.com, на которое смещается фокус при загрузке страницы.
Списки данных
Список данных содержит набор подходящих значений для любого типа поля, например:
Если поддерживается datalist, браузер предоставляет список значений для автозаполнения, как только вы начинаете вводить данные в поле. Полный список обычно отображается при клике на стрелку, указывающую вниз (если таковая имеется). В отличие от стандартного выпадающего списка, пользователь может вводить произвольные значения в поле.
Возможно указывать значения и текстовые пояснения к значениям, например:
Internet Explorer
но стоить помнить, что реализация отличается в различных браузерах . Например, Firefox производит автодополнение по тексту (Internet Explorer), тогда как Chrome - по значениям (IE), а текст указывает уменьшенным серым шрифтом:
Списки данных можно заполнять с помощью JavaScript , если вы хотите получать их по AJAX.
Отключение валидации
Отключит валидацию всей формы можно выставив атрибут novalidate элементу form. В дополнение, можно выставить атрибут formnovalidate кнопке/изображению отправки формы.
Запомните, что выставление полю атрибута disabled отключит валидацию этого поля.
Поля вывода
Ранее мы обсуждали поля ввода, но HTML5 также предоставляет поля для вывода информации
output - результат вычисления пользовательских действий
progress - полоса прогресса (атрибуты value и max задают состояние)
meter - шкала, которая может менять свой цвет между зеленым, желтым и красным в зависимости от установленных значений атрибутов value, min, max, low, high и optimum
Разделение и подпись полей
Согласно спецификации , каждый элемент формы считается параграфом, и отделяется от остальных частей элементом
Итересно. Я в целях разделения использую div, хотя сомневаюсь, что это имеет большое значение. Тег p короче, разве что вам нужно будет применять дополнительный стиль, чтобы убрать поля.
Что более важно - метки нужно использовать, либо окружая элемент формы, либо размещая их рядом, и связывая их атрибутом for с соответствующими полями, например:
Имя
Фамилия
Email адрес
Подпишитесь на рассылку
Элементы управления не стандартизированы
Не существует предписаний по оформлению элементов форм, которым должны следовать производители браузеров. Это сделано намерено: стандартный элемент формы для выбора дат, ориентированный на мышь, может быть слишком мал для пользователя мобильного устройства , так что производитель может сам позаботиться о создании альтернативной версии элемента формы для сенсорных интерфейсов.
Поддержка браузерами
Не все типы полей и атрибуты поддерживаются во всех браузерах. Говоря в общем, все современные браузеры, начиная с IE10+, включают в себя поддержку основных типов полей, вроде email или числовых полей. Но на момент написания статьи поля типа дата/время поддерживаются только в браузерах на движках Webkit и Blink.
Для не поддерживаемых типов полей браузер откатится до стандартного поля ввода типа text, а не поддерживаемые атрибуты и их значения проигнорирует.
Всегда используйте правильный тип!
Важно использовать правильный тип поля для ожидаемого типа вводимых данных. Может, это и очевидно, но будут ситуации, когда вам нужно будет воспользоваться простым текстовым полем.
Рассмотрим даты. Поддержка в браузерах неоднородна, и это приводит к проблемам при внедрении.
Стандартное поле date всегда возвращает дату в формате YYYY-MM-DD, независимо от того, какой формат даты используется в вашем регионе.
IE и Firefox откатятся до стандартного поля text, а вашим пользователям нужно вводить даты в английском формате MM-DD-YYYY, или в европейском DD-MM-YYYY
JavaScript плагин, как в jQuery UI позволяет определять собственный формат - да хоть YYYY-MM-DD - но вы не можете гарантировать, что JavaScript будет включен на машине пользователя.
Простым решением будет отказ от использования HTML5 поля date, вернутья к полю text, и реализовать свой элемент управления датами. Не делайте этого. Вы никогда не создадите нормальный элемент для выбора даты, который работает на всех устройствах, на всех разрешениях экрана, поддерживает клавиатуру, мышь и сенсорный ввод , и продолжает работать при отключенном JavaScript. К тому же, в мобильных браузерах есть свои инструменты обработки элементов управления с заточкой под сенсорное управление.
За типами полей ввода HTML5 будущее. Используйте их, и, если необходимо, пользуйтесь JavaScript заменой в ситуациях, требующих хорошей кроссбраузерности. Но помните о том, что требуется...
Валидация на серверной стороне
Валидация на стороне браузера не гарантируется. Даже если вы заставили всех перейти на последнюю версию Chrome , то и тогда вы не сможете избежать:
багов браузера или ошибок в JavaScript, пропускающих неверные данные
пользователей, изменяющих DOM или скрипты с помощью инструментов браузера
отправка данных с систем, которые вы не контролируете
перехват данных на пути от браузера к серверу (обычно по HTTP)
Валидация на стороне клиента никогда не была и не будет заменой валидации на стороне сервера. Валидация пользовательских данных на стороне сервера имеет большое значение. Валидация на стороне клиента - дополнительная полезная возможность.
И, наконец, помните, что даты могут быть получены в различных форматах , будь то YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY и прочие. Проверяйте наличие цифр в первых четырех символах, или используйте встроенные средства разбора и проверки используемого языка/фреймворка в случае необходимости.
В этой статье я рассказал о многих аспектах разметки HTML5 форм. В следующей статье мы рассмотрим CSS-свойства, относящиеся к формам.
Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы разобрали проблему с кодировкой на сайте
. В данной статье я бы хотел рассказать о создании форм в HTML
. Мне кажется, что это самая важная тема в HTML. Мне вспоминаются слова моей учительницы по английскому языку . Она говорила, если вы знаете значения всех словоформ глагола get, то вы сможете объясниться на английском только с их помощью. То же самое и с формами в HTML
. Если вы знаете формы — вы уже неплохо знаете HTML. Сейчас наверное уже практически и нет сайтов, на которых отсутствуют формы html. Формы используются везде: при создании регистрации, авторизации, подписки, гостевой книги, форума, создании своего движка, да абсолютно везде. Статья наверняка получится большая, так что приготовьтесь. Давайте приступим к изучению формы сразу на примере:
Создание форм HTML
При первом взгляде бросает в дрожь. На самом деле здёсь всё просто, давайте разбираться потихоньку:
Создание формы
начинается с ключевого слова
. Это парный тег, соответственно создание формы должно завершаться тегом
. У тега
есть несколько атрибутов. Атрибут 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 тега