Формы в HTML5

Формы в HTML5 — это элементы управления, которые используются для сбора информации от посетителей сайта.

Формы включают в себя набор элементов, таких как: текстовые поля, кнопки, списки и др. Формы позволяют передать данные от пользователя серверу.

Но для того чтобы была возможность обрабатывать данные форм, необходимо использовать один из языков серверного программирования (например PHP, Perl).

До появления HTML5, для стилизации форм приходилось прилагать немало усилий, а для проверки данных введенных в форму необходимо было использовать JavaScript. Кроме этого в старом HTML не было полей для ввода дат, электронной почты и тп.

Формы в HTML5 решили большое количество проблем, которые возникали в старых версиях. Это обусловлено появлением новых атрибутов, и предоставив более простую стилизацию с использованием CSS3.

Элемент <form>

Является основным элементом. Он не предусматривает ввод каких либо данных, а является контейнером для остальных элементов управления формы. Для него существуют специфические атрибуты, применимые только тегу <form></form>. Эти атрибуты содержат информацию которая является общей для всех полей формы, именно поэтому в одну форму следует включать поля объединенные логически.

Атрибуты тега <form>

accept-charset — в качестве значений принимает разделенные пробелами список кодировок символов, используемые для отправки формы (<form accept-charset=»ISO-88-59-1″>);
action — атрибут являющийся обязательным для всех форм, в качестве значения принимает url адрес обработчика формы. Если значение данного атрибута не указано, то после отправки формы страница перезагрузится и поля примут значения по умолчанию. В том случае если обработка формы будет происходить на стороне клиента то для атрибута можно указать значение #. Помимо этого можно сделать та чтобы данные формы приходила вам на почту, для этого необходимо прописать: <form action=»mailto:адрес_почты» enctype=»text\plain»></form>;
autocomplete — отвечает за запоминание данных, введенных а текстовые поля формы и автоподстановку их при следующем заполнении; может принимать значения: on — поле не защищено и его можно запоминать и сохранять; off — отключает автозаполнение;
enctype — Используется для указания MIME-типа данных, отправляемых вместе с формой, например, enctype="multipart/form-data". Указывается только в случае method="post".
application/x-www-form-urlencoded — тип содержимого по умолчанию, указывает на то, что передаваемые данные представляют список URL-кодированных переменных формы. Символы пробела (ASCII 32) будут закодированы как +, а специальный символ, например, такой как ! будет закодирован шестнадцатиричной форме как %21.
multipart/form-data — используется для отправки форм, содержащих файлы, не-ASCII данные и бинарные данные, состоит из нескольких частей, каждая из которых представляет содержимое отдельного элемента формы.
text/plain — указывает на то, что передается обычный (не html) текст;
method — Задает способ передачи данных формы.
Метод get передает данные на сервер через адресную строку браузера. При формировании запроса к серверу все переменные и их значения формируют последовательность вида www.anysite.ru/form.php?var1=1&var2=2. Имена и значения переменных присоединяются к адресу сервера после знака ? и разделяются между собой знаком &. Все специальные символы и буквы, отличные от латинских, кодируются в формате %nn, пробел заменяется на +. Этот метод нужно использовать, если вы не передаете больших объемов информации. Если вместе с формой предполагается отправка какого-либо файла, этот метод не подойдет.
Метод post применяется для пересылки данных больших объемов, а также конфиденциальной информации и паролей. Данные, отправляемые с помощью этого метода, не видны в заголовке URL, так как они содержатся в теле сообщения.
<form action="action.php" enctype="multipart/form-data" method="post"></form>
name — задает имя формы. Данное имя будет использоваться для доступа к элементам формы через сценарии;
novalidate — отключает проверку в кнопке отправки формы. Он используется без значений;
target — Указывает окно, в которое будет направлена информация: _blank — новое окно; _self — тот же фрейм; _parent — родительский фрейм (если он существует, если нет — то в текущий); _top — окно верхнего уровня по отношению к данному фрейму. Если вызов происходит не из дочернего фрейма, то в тот же фрейм.

Группировка элементов формы

Элемент <fieldset>...</fieldset> позволяет группировать элементы, связанные друг с другом логически. Каждой группе можно присвоить название с помощью элемента <legend>, который должен идти после тега <fieldset>.

Атрибуты тега <fieldset>

disabled — если присутствует данный атрибут то группа элементов внутри контейнера будет отключена для редактирования и изменения. Атрибут указывается без значения.
form — в качестве значения может принимать значение атрибута id тега <form> в этом же документе. он указывает на одну или несколько форм, к которым принадлежит группа элементов. Атрибут пока не поддерживается браузерами.
name — содержит имя группы, которое может использоваться для ссылки на элементы в JavaScript, по сути является аналогом атрибута id.

Поля формы

Элемент <input> создает большинство полей формы. Атрибуты элемента отличаются в зависимости от типа поля, для создания которого используется этот элемент.

Атрибуты тега <input>

accept- атрибут указывающий какие типы файлов разрешены для отправки на сервер, данный атрибут указывается только для <input type=file>, accept=".gif", accept=".pdf", accept=".doc«
alt — определяет альтернативный текст для изображений;
autocomplete — запоминание введенных значение введенных в поле, on — разрешает сохранение и извлечение данных, off — отключает автозаполнение форм;
autofokus — позволяет в загружаемой форме сделать активным и готовым для ввода данных выбранное поле;
checked — атрибут по умолчанию ставит флажок на поля типа checkbox и radio;
disabled — отключение возможности редактирования и копирования содержимого поля;
form — значение атрибута равно значению атрибута id тега form, указывает к какой форме принадлежит данное поле;
formaction — Задает url файла, который будет обрабатывать введенные в поля данные при отправке формы. Задается только для полей типа type="submit" и type="image". Атрибут переопределяет значение атрибута action самой формы.
formenctype — Определяет, как будут кодироваться данные полей формы при отправке на сервер. Переопределяет значение атрибута enctype формы. Задается только для полей типа type="submit" и type="image". Варианты:
application/x-www-form-urlencoded — значение по умолчанию. Все символы кодируются перед отправкой (пробелы заменяются на символ +, специальные символы преобразуются в значения ASCII HEX)
multipart/form-data — символы не кодируются
text/plain — пробелы заменяются на символ +, а специальные символы не кодируются.
formmethod — Атрибут определяет метод, который браузер будет использовать для отправки данных формы на сервер. Задается только для полей типа type="submit" и type="image". Переопределяет значение атрибута method формы. Варианты:
get — значение по умолчанию. Данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер: URL?имя=значение&имя=значение
post — данные формы отправляются в виде http-запроса.
formvalidate — Определяет, что данные полей формы не должны проверяться при отправке формы. Переопределяет значение атрибута novalidate формы. Можно использовать без указания значения атрибута.
formtarget Определяет, где выводить ответ, полученный после отправки формы. Задается только для полей типа type="submit" и type="image". Переопределяет значение атрибута target формы.
_blank — загружает ответ в новое окно/вкладку
_self — загружает ответ в то же окно (значение по умолчанию)
_parent – загружает ответ в родительский фрейм
_top – загружает ответ во весь экран
framename – загружает ответ во фрейм с указанным именем.
height — Значение атрибута содержит количество пикселей без указания единицы измерения. Устанавливает высоту поля формы типа type="image", например, <input type="image" src="img_submit.gif" height="50">. Рекомендуется одновременно устанавливать как высоту, так и ширину поля.
list — атрибут является ссылкой на <datalist> и содержит его id. Предоставляет пользователю несколько вариантов на выбор при вводе знаения в поле.
max — ограничение допустимого ввода числовых данных максимальным значением, в качестве значений может принимать целые и дробные числа. Рекомендуется использовать этот атрибут вместе с атрибутом min. Работает со следующими типами полей: number, range, date, datetime, datetime-local, month, time и week.
maxlength — задает максимальное количество символов, вводимыцх в поле.
min — ограничение ввода числовых данных минимальным значением.
multiple — разрешает пользователю вводить несколько значений атрибутов, разделяя их запятой, указывается без значения атрибута.
name — в качестве значения содержит имя, используемое для доступа к данному элементу.
pattern — определяет синтаксис данных ввод которых разрешен в поле. Например, pattern="[a-z]{3}-[0-9]{3}" — квадратные скобки устанавливают диапазон допустимых символов.
placeholder — в качестве значения содержит текст который будет отображаться в поле ввода до его заполнения.
readonly — не позволяет пользователю изменятьзначение элементов формы, но при этом разрешает их копирование и выделение.
required — сообщает пользователю что данное поле оьязательно для заполнения. При попытке пользователя отправить форму без значения данного поля то на экране появится предупреждение.
size — позволяет задать видимую ширину поля в символах.
src — Задает url изображения, используемого в качестве кнопки отправки данных формы. Указывается только для поля <input type="image">.
step — применяется для элементов, предполагающих ввод числовых значений, атрибут указывает величину увеличения или уменьшения значения пр ирегулировки диапазоан.
value — содержит текст, отображаемый на кнопке, в поле или связанный текст, не указывается для полей типа file.
width — в качестве значения атрибута содержит количество пикселей. задает ширину полей формы.

Атирбут TYPE тега input

Данный атрибут является самым важным. Именно он определяет какой элемент будет отображаться на форме и какие данные он будет получать и отправлять.

button — создает кнопку.

checkbox — превращает поле ввода во флажок, который можно установить или очистить.

color — генерирует палитры цветов в поддерживающих браузерах, давая пользователям возможность выбирать значения цветов в шестнадцатеричном формате.

date — позволяет вводить дату в формате дд.мм.гггг.

datetime-local — позволяет вводить дату и время, разделенные прописной английской буквой Т по шаблону дд.мм.гггг чч:мм.

email — браузеры, поддерживающие данный атрибут, будут ожидать, что пользователь введет данные, соответствующие синтаксису адресов электронной почты.

file — позволяет загружать файлы с компьютера пользователя.

hidden — скрывает элемент управления, который не отображается браузером и не дает пользователю изменять значения по умолчанию.

image — создает кнопку, позволяя вместо текста на кнопке вставить изображение.

month — позволяет пользователю вводить год и номер месяца по шаблону гггг-мм.

number — предназначено для ввода целочисленных значений. Его атрибуты min, max и step задают верхний, нижний пределы и шаг между значениями соответственно. Эти атрибуты предполагаются у всех элементов, имеющих численные показатели. Их значения по умолчанию зависят от типа элемента.

password — создает текстовые поля в форме, при этом вводимые пользователем символы заменяются на звездочки, маркеры, либо другие, установленные браузером значки.

radio — создает переключатель — элемент управления в виде небольшого кружка, который можно включить или выключить.

range — позволит создать такой элемент интерфейса, как ползунок, min / max — позволят установить диапазон выбора.

reset — создает кнопку, которая очищает поля формы от введенных пользователем данных.

search — обозначает поле поиска, по умолчанию поле ввода имеет прямоугольную форму.

submit — создает стандартную кнопку, активизируемую щелчком мыши. Кнопка собирает информацию с формы и отправляет ее для обработки.

text — создает текстовые поля в форме, выводя однострочное текстовое поле для ввода текста.

time — позволяет вводить время в 24-часовом формате по шаблону чч:мм. В поддерживающих браузерах оно отображается как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени.

url — поле предназначено для указания URL-адресов.

week — соответствующий инструмент-указатель позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг. В зависимости от года число недель может быть 52 или 53.

Текстовые поля ввода

Элемент <textarea>...</textarea> используется вместо элемента <input type="text">, когда нужно создать большие текстовые поля. Текст, отображаемый как исходное значение, помещается внутрь тега. Размеры поля устанавливаются при помощи атрибутов cols – размеры по горизонтали, rows – размеры по вертикали. Высоту поля можно задать свойством height. Все размеры считаются исходя из размера одного символа моноширинного шрифта.

Атрибуты тега <textarea>

`autofocus`	Устанавливает фокус на нужном начальном текстовом поле автоматически.
`cols`	Устанавливает ширину через количество символов. Если пользователь вводит больше текста, появляется полоса прокрутки.
`disabled`	Отключает возможность редактирования и копирования содержимого поля.
`form`	Значение атрибута должно быть равно значению атрибута `id` элемента `<form>` в этом же документе. Определяет одну или несколько форм, которым принадлежит данное текстовое поле.
`maxlength`	Значение атрибута задает максимальное число символов для ввода в поле.
`name`	Задает имя текстового поля.
`placeholder`	Определяет короткую текстовую подсказку, которая описывает ожидаемое вводимое значение.
`readonly`	Отключает возможность редактирования содержимого поля.
`required`	Выводит сообщение о том, что данное поле является обязательным для заполнения.
`rows`	Указывает число, которое означает, сколько строк должно отображаться в текстовой области.
`wrap`	Определяет, должен ли текст сохранять переносы строк при отправке формы. Значение `hard` сохраняет перенос, а значение `soft` не сохраняет. Если используется значение `hard`, то должно указываться значение атрибута `cols`.

Раскрывающийся список

Списки дают возможность расположить большое количество пунктов компактно. Раскрывающиеся списки создаются при помощи элемента <select>...</select>. Они позволяют выбрать одно или несколько значений из предложенного множества. По умолчанию в поле списка отображается его первый элемент.

Для добавления в список пунктов используются элементы <option>...</option>, которые располагаются внутри <select>.

Для систематизации списков применяется элемент <optgroup>...</optgroup>, который создает заголовки в списках.

Для списков возможно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение.

Атрибуты тега <select>

`autofocus`	Устанавливает автоматический фокус на элементе при загрузке страницы.
`disabled`	Отключает раскрывающийся список.
`form`	Определяет форму, которой принадлежит данный список. В качестве значения атрибута указывается идентификатор формы.
`multiple`	Дает возможность выбора одного или нескольких пунктов, для этого при выборе нужно нажать и удерживать нажатой клавишу `Ctrl`.
`name`	Определяет имя для выпадающего списка. Значение атрибута содержит название, отражающее тематику списка.
`required`	Выводит сообщение о том, что пользователь должен выбрать значение из раскрывающегося списка перед отправкой формы.
`size`	Задает количество одновременно видимых на экране элементов списка. Если количество элементов списка превышает установленное количество, появляется полоса прокрутки. Значение атрибута задается целым положительным числом.

Атрибуты тега <option>

`disabled`	Делает недоступным для выбора элемент списка.
`label`	Задает укороченную версию для элемента, которая будет отражаться в выпадающем списке. Значение атрибута содержит текст, описывающий соответствующий пункт выпадающего списка.
`selected`	Отображает выбранный элемент списка по умолчанию при загрузке страницы браузером.
`value`	Указывает значение, которое будет отправлено на сервер при отправке формы.

Кнопки

Элемент <button>...</button> создает кликабельные кнопки. В отличие от кнопок, созданных <input> (<input type="submit"></input>, <input type="image">, <input type="reset">, <input type="button">), внутрь элемента <button> можно поместить контент — текст или изображение.

Для корректного отображения элемента <button> разными браузерами нужно указывать атрибут type, например, <button type="submit"></button>.

Кнопки позволяют пользователям передавать данные в форму, очищать содержимое формы или предпринимать какие-либо другие действия. Можно создавать границы, изменять фон и выравнивать текст на кнопке.

Атрибуты тега <button>

`autofocus`	Устанавливает фокус на кнопке при загрузке страницы.
`disabled`	Отключает кнопку, делая ее некликабельной.
`form`	Указывает на одну или несколько форм, которым принадлежит данная кнопка. Значение атрибута — идентификатор соответствующей формы.
`formaction`	Значение атрибута содержит url-адрес обработчика данных формы, отправляемых при нажатии на кнопку. Только для кнопки типа `type="submit"`. Переопределяет значение атрибута `action`, указанного для элемента `<form>`.
`formenctype`	Задает тип кодировки данных формы перед отправкой на сервер при нажатии на кнопки типа `type="submit"`. Переопределяет значение атрибута `enctype`, указанного для элемента `<form>`. Возможные значения: `application/x-www-form-urlencoded` — значение по умолчанию. Все символы перед отправкой будут закодированы. `multipart/form-data` — символы не кодируются. Используется в случае, когда с помощью формы загружаются файлы. `text/plain` — символы не кодируются, а пробелы заменяются на символ `+`.
`formmethod`	Атрибут определяет метод, который браузер будет использовать для отправки формы. Переопределяет значение атрибута `method`, указанного для элемента `<form>`. Указывается только для кнопок типа `type="submit"`. Возможные значения: `get` — данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер. Данный способ имеет ограничения по размеру отправляемых данных и не подходит для отправки паролей и конфиденциальной информации. `post` — данные из формы добавляются в виде http-запроса. Метод является более надежным и безопасным, чем `get` и не имеет ограничений по размеру.
`formnovalidate`	Атрибут задает, что данные формы не должны проверяться при отправке. Указывается только для кнопок типа `type="submit"`.
`formtarget`	Атрибут задает, в каком окне выводить результат после отправки формы. Указывается только для кнопок типа `type="submit"`. Переопределяет значение атрибута `target`, указанного для элемента `<form>`. `_blank` — загружает ответ в новое окно/вкладку `_self` — загружает ответ в то же окно (значение по умолчанию) `_parent` — загружает ответ в родительский фрейм `_top` — загружает ответ во весь экран `framename` — загружает ответ во фрейм с указанным именем.
`name`	Задает имя кнопки, значение атрибута — текст. Используется для ссылки на данные формы, после того как форма была отправлена, или для ссылки на данную кнопку (кнопки) в JavaScript.
`type`	Определяет тип кнопки. Возможные значения: `button` — кликабельная кнопка `reset` — кнопка сброса, возвращает первоначальное значение `submit` — кнопка для отправки данных формы.
`value`	Задает значение по умолчанию, отправляемое при нажатии на кнопку.

Надписи к полям формы

Надписи к элементам формы создаются с помощью элемента <label>...</label>. Существует два способа группировки надписи и поля. Если поле находится внутри элемента <label>, то атрибут for указывать не нужно.

Флажки и переключатели в формах

Флажки в формах задаются с помощью конструкции <input type="checkbox">, а переключатель — при помощи <input type="radio">.

Флажков, в отличие от переключателей, в одной форме может быть установлено несколько. Если для флажков указан атрибут checked, то при загрузке станицы на соответствующих полях формы флажки уже будут установлены.

Элемент <label> применяется при реализации выбора с помощью переключателей и флажков. Можно выбрать нужный пункт, просто щелкая кнопкой мыши на тексте, связанном с ним. Для этого нужно поместить <input> внутрь элемента <label>.