Какой тег используют для разметки форм

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

Документ может содержать любое количество форм, но одновременно на сервер может быть отправлена только одна форма. По этой причине данные форм должны быть независимы друг от друга.

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

Когда форма отправляется на сервер, управление данными передается программе, заданной атрибутом action тега . Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name тега , а значение введено пользователем или установлено в поле формы по умолчанию. Если для отправки данных используется метод GET , то адресная строка может принимать следующий вид.

Параметры перечисляются после вопросительного знака, указанного после адреса CGI-программы и разделяются между собой символом амперсанда (&). Нелатинские символы преобразуются в шестнадцатеричное представление (в форме %HH, где HH — шестнадцатеричный код для значения ASCII-символа), пробел заменяется на плюс (+).

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

Синтаксис

Атрибуты

accept-charset
Устанавливает кодировку, в которой сервер может принимать и обрабатывать данные. action Адрес программы или документа, который обрабатывает данные формы. autocomplete Включает автозаполнение полей формы. enctype Способ кодирования данных формы. method Метод протокола HTTP. name Имя формы. novalidate Отменяет встроенную проверку данных формы на корректность ввода. target Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

HTML5 IE Cr Op Sa Fx

    Тег FORM   Как по вашему мнению расшифровывается аббревиатура "ОС"?
 Офицерский состав Операционная система Большой полосатый мух

Результат данного примера показан на рис. 1.

Рис. 1

Рис. 1. Вид элементов формы в окне браузера

Формы в HTML5: Разметка

Это первая статья из серии в трех частях о веб-формах на HTML5 . Мы рассмотрим основы разметки перед тем, как перейти к дизайну и использованию API с помощью 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

Множество новых типов input были представлены в HTML5 . Они обеспечены собственной поддержкой и проверяют входные данные без написания кода на JavaScript :

Тип	Описание
Email	Для ввода email адреса
Tel	Для ввода номера телефона — никакого строгого синтаксиса не применяется, но удаляются разрывы строк
url	Для ввода URL-адреса
Search	Для ввода поискового запроса, автоматически удаляются разрывы строк
Number	Для ввода числа размерности floating point
Range	Элемент управления для ввода приближенного значения. Как правило, представлен в виде слайдера
Date	Для ввода даты (день, месяц, год)
Datetime	Для ввода даты (день, месяц, год, час, минута, секунда и микросекунды, основанные на данных UTC)
datetime-local	Для ввода даты и времени без временной зоны
Month	Для ввода месяца и года без временной зоны
Week	Для ввода номера недели без временной зоны
Time	Для ввода времени без временной зоны
Color	Для выбора цвета

Атрибуты ввода

Если не указано иное, поле ввода может иметь любой из следующих атрибутов. Атрибуты типа Boolean не требуют ввода значений, например, как здесь:

Прошу заметить, что поле date использует формат YYYY-MM-DD для атрибутов value , min и max .

В следующем примере форма содержит поле обязательного ввода адреса, который обязан заканчивается на « @mysite.com » и на этом же поле стоит фокус при загрузке страницы:

Списки данных

Списки данных ( datalist ) содержат набор возможных вариантов ввода для поля input , к примеру:

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

Полный список доступных вариантов автозаполнения может также быть отображен (либо по двойному щелчку мыши, либо по нажатию кнопки вниз).

В отличие от ниспадающего списка, пользователь может ввести те данные, которые пожелает, несмотря на предложенные варианты.

Можно установить как значение, так и текст описания предлагаемых значений:

Но имейте в виду, что браузеры по-разному отрабатывают этот код. Например, Firefox предложит завершить фразу исходя из текста описания (Internet Explorer), тогда как Google Chrome предпочтет значение (IE), а сам текст покажет серым:

Списки данных

Отключение проверок

Проверку формы целиком можно отключить, установив атрибут novalidate элементу form . Альтернативой этому будет установка атрибута formnovalidate кнопке/изображению подтверждения формы.

И помните о том, что установка атрибута disabled для поля ввода также отключит проверку ввода.

Поля вывода

Несмотря на то, что в первую очередь мы обсудили поля ввода, HTML5 также предоставляет доступные только для чтения поля вывода:

output — поле для вывода результатов расчета или действий пользователя;
progress — прогресс-бар (атрибуты value и max определяют его статус);
meter — шкала, цвет которой может переключаться между зеленым, желтым и красным в зависимости от значений, установленных для атрибутов value, min, max, low, high и optimum.

Разделение и маркировка полей ввода

Возьмем спецификации форм с whatwg.org :

Каждая часть формы рассматривается как параграф, и, как правило, отделена друг от друга с помощью элемента разметки

Интересно получается. Обычно я использую тег DIV , хотя вряд ли это имеет значение с семантической точки зрения. Тег просто короче, хотя, вполне возможно, вам придется применять классы для модификации полей.

Здесь важно то, что вы должны использовать элемент label рядом с самим полем ввода и атрибутом for , объявляя ID поля ввода, например:

First name

Last name

Email address

Нет стандартных элементов управления

Мы не имеем в своем распоряжении конкретно определенных элементов управления.

Это сделано намеренно: типичный указатель мыши, используемый для выбора даты, может оказаться слишком маленьким на мобильном устройстве, потому разработчик должен реализовать альтернативу для подобных устройств самостоятельно.

Поддержка браузерами

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

А типы полей для ввода даты вообще поддерживаются только в Webkit и Blink (на момент написания статьи). Неподдерживаемые поля ввода и атрибуты браузер обработает как стандартное поле ввода типа text .

Всегда используйте верный тип полей!

Важно всегда использовать правильный тип полей ввода для данных, соответствующий тем данным, которые вы запрашиваете. Это может показаться не очевидным, но вы столкнетесь с ситуациями, когда вам захочется использовать стандартный ввод текста.

Рассмотрим поля ввода типа date . Их поддержка неоднородна и это приводит к вопросам реализации:

Стандартное поле ввода date всегда возвращает значение в формате YYYY-MM-DD независимо от того, какой формат выбран на локальном устройстве;
IE и Firefox обратятся к стандартному полю ввода text , однако ваши посетители могут ожидать ввода в формате США MM-DD-YYYY или в Европейском формате DD-MM-YYYY;
Дата-пикер, написанный на JavaScript , например UI на JQuery , позволяет определить собственный формат — даже YYYY-MM-DD при необходимости, но вы не можете гарантировать, что JavaScript будет включен в браузере пользователя.

Напрашивается простое решение, которое заключается в отказе от поля ввода HTML5 типа date , возврату к типу поля text и реализации собственного процесса контроля ввода. Не стоит идти таким путем.

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

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

Поля ввода из HTML5 — это будущее. Используйте их, а при необходимости добавляйте JavaScript , когда вам требуется хорошая кросс-браузерная поддержка. Но не забудьте .

Проверку на стороне сервера

Браузерная валидация не гарантирует стопроцентной уверенности в корректности введенных данных. Даже если пользователь пользуется Google Chrome последней версии, вы не убережетесь от:

ошибок браузера или JavaScript , позволяющих ввести неверные данные;
пользователей, редактирующих HTML или скрипты, с помощью инструментов браузера;
передачи данных от систем, находящихся вне вашего контроля;
перехвата данных в промежутке браузер — сервер (по HTTP-протоколу).

Проверка на стороне клиента не была и никогда не станет заменой проверки на стороне сервера. Проверка пользовательских данных на сервере имеет очень большое значение. На стороне клиенте проверку было бы неплохо иметь.

И запомните, что типы данных « Дата » могут быть получены в формате YYYY-MM-DD или же любом другом, который вы определите для пользователя ( MM-DD-YYYY , DD-MM-YYYY , и т.п.).

Проверяйте наличие первых четырех цифр в полученной последовательности знаков или используйте встроенную поддержку парсинга полей типа « Дата ».

В этой статье мы рассмотрели довольно большой объем информации, касающейся полей ввода в HTML5 . В следующей части мы рассмотрим свойства полей, связанные с CSS .

Форма в HTML. Тег

Тег используется для создания HTML-формы. В нём находится всё содержимое формы: поля для ввода, подписи к этим полям и кнопка отправки.

Здесь action определяет URL, куда будут отправлены данные формы, а method указывает метод отправки данных: GET или POST . Если использовать метод GET , параметры формы будут отображаться в адресной строке браузера. Это небезопасно, так как данные формы можно легко изменить.

Атрибуты тега :

action — адрес, на который будут отправлены данные формы.
method — метод отправки данных: GET или POST .
target — окно или фрейм, в котором будет открыт результат отправки данных формы.
name — имя формы, которое используется для её идентификации при отправке данных на сервер.
autocomplete — может ли браузер запоминать введённые пользователем данные для автозаполнения.
enctype — способ кодирования данных формы при отправке на сервер.
novalidate — указывает, что данные формы не нужно проверять на корректность перед отправкой на сервер.Пример использования атрибутов тега :

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

HTML формы

Элементы формы такие как: текстовые поля, флажки, переключатели, кнопки и т.д., прописываются в контейнере

. Чаще всего элементы формы создаются при помощи тега . При помощи атрибута type указывается тип элемента.

Рассмотрим следующий код:

 Введите логин: 
Введите пароль:

В браузере получим примерно такую форму:

HTML форма

тег – является контейнером для элементов формы, в нем также можно использовать теги для разметки страницы;
тег – создает метку для элемента формы;
тег – создает элемент формы, при помощи атрибута type указывается какой именно элемент нужно отобразить:
- – создает текстовое поле;
- – создает поле для ввода пароля. Данный тег не требует закрывающего тега;
Текстовая область

При помощи тега мы можем создать текстовую область, в которой пользователь сможет вводить длинные сообщения:
```
 Введите ваше сообщение:
 
 
 
```
В браузере получим:

Выпадающий список

Тег создает на странице список, каждое значение из списка прописывается между тегами . :
```
  
```
В данном примере вы можете выбрать только одно значение из списка:

Чтобы была возможность выбрать несколько значений из списка, то используйте атрибут multiple с таким же значением: :

Флажки и переключатели

Чтобы создать на странице флажки, необходимо создать поле с типом checkbox : :
```
 Значение один
 Значение два
 Значение три
 
 
```
Необязательно эти поля прописывать между тегами . .

Чтобы создать на странице переключатели, необходимо создать поле с типом radio , и указать атрибут name с каким-нибудь значением: .
```
 Значение один
 Значение два
 Значение три
 
 
```
Обратите внимание, что значение атрибута name в группе переключателей должно быть одинаковым, иначе переключатели будут работать как флажки, т.е. можно будет выбрать сразу все.

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

Поле для выбора файла

Используйте тип поля file , для возможности выбора файла с компьютера: :
```
  
 
 
```
Вид в окне браузера:

Другие варианты кнопок

Эти же значения атрибута type , кроме значения image , можно применить к кнопке, созданной при помощи тега . В отличие от кнопок, созданных через тег , эту кнопку можно размещать вне контейнера

.

, это не будет считаться ошибкой. Также внутри этой кнопки можно размещать другие строчные теги.
Похожие публикации: