HTML5 | Элементы форм
Последнее обновление: 08.04.2016
Формы состоят из определенного количества элементов ввода. Все элементы ввода помещаются между тегами <form> и </form>
Наиболее распространенным элементом ввода является элемент input. Однако реальное действие этого элемента зависит от того, какое значение установлено у его атрибута type. А он может принимать следующие значения:
text: обычное текстовое поле
password: тоже текстовое поле, только вместо вводимых символов отображаются звездочки, поэтому в основном используется для ввода пароля
radio: радиокнопка или переключатель. Из группы радиокнопок можно выбрать только одну
checkbox: элемент флажок, который может находиться в отмеченном или неотмеченном состоянии
hidden: скрытое поле
submit: кнопка отправки формы
color: поле для ввода цвета
date: поле для ввода даты
datetime: поле для ввода даты и времени с учетом часового пояса
datetime-local: поле для ввода даты и времени без учета часового пояса
email: поле для ввода адреса электронной почты
month: поле для ввода года и месяца
number: поле для ввода чисел
range: ползунок для выбора числа из некоторого диапазона
tel: поле для ввода телефона
time: поле для ввода времени
week: поле для ввода года и недели
url: поле для ввода адреса url
file: поле для выбора отправляемого файла
image: создает кнопку в виде картинки
Кроме элемента input в различных модификациях есть еще небольшой набор элементов, которые также можно использовать на форме:
button: создает кнопку
-
select: выпадающий список
label: создает метку, которая отображается рядом с полем ввода
textarea: многострочное текстовое поле
Атрибуты name и value
У всех элементов ввода можно установить атрибуты name и value.
Эти атрибуты имеют важное значение. По атрибуту name
мы можем идентифицировать поле ввода, а атрибут value позволяет установить значение поля ввода. Например:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Формы в HTML5</title> </head> <body> <form method="get" action="index.html"> <input type="text" name="login" value="Tom"/> <input type="password" name="password"/> <input type="submit" value="Войти" /> </form> </body> </html>
Здесь текстовое поле имеет значение «Tom» (как указано в атрибуте value), поэтому при загрузке веб-страницы в этом поле мы увидим данный текст.
Поскольку методом отправки данных формы является метод «get», то данные будут отправляться через строку запроса. Так как нам в данном случае не важно, как
данные будут приниматься, не важен сервер, который получает данные, поэтому в качестве адреса я установил ту же самую страницу — то есть файл index.
html.
И при отправке мы сможем увидеть введенные данные в строке запроса:
В строке запроса нас интересует следующий кусочек:
login=Tom&password=qwerty
При отправке формы браузер соединяет все данные в набор пар «ключ-значение». В нашем случае две таких пары: login=Tom и
password=qwerty. Ключом в этих парах выступает название поля ввода, которое определяется атрибутом name, а значением — собственно
то значение, которое введено в поле ввода (или значение атрибута value).
Получив эти данные, сервер легко может узнать, какие значения в какие поля ввода были введены пользователем.
НазадСодержаниеВперед
Формы в HTML5
С появлением HTML5 формы получили новые замечательные типы полей ввода и новые атрибуты для полей и форм. В этой статье мы коротко опишем что из себя представляют тринадцать новых типов полей, а также четырнадцать новых атрибутов, что позволит вам составить четкое представление для чего они нужны и как их использовать.
Итак, что же нового и полезного дают нам формы в HTML5?
Обратите внимание, что на текущий момент не все новые элементы поддерживаются современными браузерами. Рекомендуется смотреть примеры в браузере Google Chrome
Новые типы полей ввода
Color
<input name=»color» type=»color»/>
Этот тип поля очень прост для понимания: он обеспечивает выбор цвета для пользователя, и генерирует шестнадцатеричное значение. Палитра цветов будет нативной для каждой операционной системы или браузера, как и большинство новых полей.
Date
<input name=»date» type=»date»/>
Поле Date позволит вам выбрать дату из раскрывающегося списка — думаю, Вы часто видели подобные элементы на страницах, когда, например, пытались заказать номер на сайте отеля.
Date-time
<input name=»departure-day-time» type=»date-time»/>
Если вы хотите, чтобы пользователь выбрал одновременно не только дату, но и время, например, для указания предпочитаемого рейса, то «date-time» это тот тип поля, который лучше всего подойдет.
Datetime-local
<input name=»arrival-time» type=»datetime-local»/>
Этот тип поля точно такой же как «date-time», но он предоставляет вам время в локальной временной зоне.
<input type=»email» name=»email»/>
Этот тип поля создан специально для ввода адреса электронной почты, теперь нет необходимости создавать регулярное выражение на JS или PHP для проверки вводимой строки. На смартфонах оно будет вызывать специальную клавиатуру для удобного ввода адреса.
Month
<input name=»expiry» type=»month»/>
Это поле ввода позволит вам выбрать месяц года, это очень удобно, например, для ввода информации о кредитной карте в форме заказа.
Number
<input type=»number» min=»48″ max=»84″ step=»0.5″ value=»48″ name=»height-inches»/>
Поле Number, как вы могли догадаться, предназначено только для ввода чисел. Вы можете указать разрешенный диапозон для чисел, если вы укажете атрибуты min и max как в приведенном выше примере, а также указать шаг в этом диапазоне.
Range
<input type=»range» min=»1″ max=»100″ value=»0″/>
В поле Range браузер выводит ползунок, который пользователь может перетаскивать влево-вправо. Можно указать минимальное и максимальное значение, а также значение по умолчанию.
Tel
<input type=»tel» name=»tel»/>
Этот тип поля очень удобно использовать в смартфонах, так как оно вызывает цифровую клавиатуру телефона, чтобы можно было ввести номер телефона максимально просто. Оно, однако, не проверяет правильность ввода, в отличие от Email или URL.
Time
<input name=»start-time» type=»time»/>
Этот тип ввода позволит пользователям выбирать только определенное время, например, часы и минуты.
Url
<input type=»url» name=»url»/>
Это поле будет проверять на правильность ввода URL-адреса, а на смартфоне откроется URL-клавиатура.
Week
<input name=»conference » type=»week»/>
Это поле позволяет пользователю возможность выбрать определенную неделю.
Новые атрибуты форм
Теперь давайте посмотрим, какие новые атрибуты могут быть использованы в сочетании с новыми или ранее существовавшими полями. Существует в общей сложности четырнадцать новых атрибутов, давайте взглянем на их прямо сейчас.
Autocomplete
<input type=»text» name=»fullname» autocomplete=»on»/>
Автозаполнение — этот атрибут помогает пользователям заполнить поле на основе предыдущих записей, он может либо сэкономить время, либо вызвать проблемы, так что аккуратнее с этим.
Autofocus
<input type=»text» name=»username» autofocus/>
Этот атрибут ставит курсор в нужное поле при загрузке страницы, так что пользователь может сразу начать печатать.
Form
<input type=»button» name=»filter» form=»filter/>
Form связывает поле с формой по идентификатору, поэтому элемент не обязательно должен быть в пределах соответствующей формы, чтобы быть её частью.
Formaction
<input type=»submit» value=»Send» formaction=»email.
php»/>
Указывает обработчик формы.
Formenctype
<input type=»submit» value=»Send» formenctype=»application/x-www-form-urlencoded»/>
Устанавливает способ кодирования данных формы при их отправке на сервер.
Formnovalidate
<form action=»login.php»>
<label for=»name»>Полное имя:</label>
<input type=»text» name=»name» value=»Иванов Иван»/>
<input type=»submit» formnovalidate value=»Send»/>
</form>
Этот атрибут указывает, что форму не нужно проверять при отправке данных. Атрибут может быть установлен для любого типа поля.
Formmethod
<input type=»submit» value=»Send» formmethod=»POST»/>
Определяет, какой метод HTTP использовать, чтобы отправить форму, например, POST или GET.
Formtarget
<input type=»submit» value=»Send» formtarget=»_self»/>
Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.
List & Multiple
<label>Мой любимый цвет:
<datalist>
<select name=»colours»>
<option value=»Красный»>Красный</option>
<option value=»Желтый»>Желтый</option>
<option value=»Зеленый»>Зеленый</option>
<!— … —>
</select>
Если другой, укажите:
</datalist>
<input type=»text» name=»colour» list=»colours» multiple/>
</label>
Тег <datalist> определяет список предопределенных вариантов элемента <input>, которые можно выбирать при наборе в текстовом поле.
Novalidate
<form action=»login.php» novalidate>
<label for=»name»>Full name:</label>
<input type=»text» name=»name» value=»John Doe»/>
<input type=»submit» value=»Send»/>
</form>
Указывает, что форма не должна быть провалидирована при её отправке на сервер, этот атрибут устанавливается только на элемент формы.
Pattern
<input pattern=»[0-9]{5}» name=»zip» type=»text» title=»Zipcode»/>
Pattern позволяет определить регулярное выражение в HTML-разметке поля, а не в JS.
Placeholder
<input type=» password » name=»password» placeholder=»Введите ваш пароль»/>
Placeholder обычно отображается в виде светло-серого текста в поле, до тех пор пока поле не активно. Обычно этот атрибут содержит подсказку, что именно необходимо ввести в это поле.
Required
<input type=»text» name=»username» required/>
Атрибут ‘required’ делает поле обязательным к заполнению и форма не может быть отправлена, пока требуемые данные не будут введены. И нет необходимости использовать JS.
Демонстрация
Я надеюсь, что в скором времени все эти поля получат поддержку современных браузеров и это значительно облегчит работу веб-мастеров при создании сложных форм!
Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом
- ВКонтакте
ARIA&colon.
Роль формы — Доступность Роль формы можно использовать для идентификации группы элементов на странице, которые обеспечивают функции, эквивалентные HTML-форме.
Это форма, которая собирает и сохраняет контактную информацию пользователя.
, чтобы содержать элементы управления формы, а не элемент ARIA 9.0003 форма роль, если у вас нет очень веской причины.
Элемента HTML достаточно, чтобы сообщить вспомогательным технологиям, что форма существует.
Ориентир формы идентифицирует область содержимого, содержащую набор элементов и объектов, которые в целом объединяются для создания формы, когда никакие другие именованные ориентиры не подходят (например, основной или поиск ).
Примечание: Использование <формы> 9Элемент 0004 будет автоматически передавать раздел контента как ориентир формы , если ему предоставлено доступное имя.
Разработчики всегда должны отдавать предпочтение правильному семантическому HTML-элементу, а не ARIA.
По возможности используйте элемент HTML . Элемент определяет ориентир формы , когда он имеет доступное имя (например, aria-labeledby , aria-label или title ). Убедитесь, что у каждой формы в документе есть уникальная метка, чтобы помочь пользователям понять назначение формы. Эта метка должна быть видна всем пользователям, а не только пользователям вспомогательных технологий. Используйте search ориентир вместо формы ориентир, когда форма используется для функции поиска.
Используйте role="form" для определения области страницы; не используйте его для идентификации каждого поля формы. Даже если вы используете ориентир формы вместо , вам рекомендуется использовать собственные элементы управления формы HTML, такие как ,
и
Вместо этого рекомендуется использовать .
Используйте с осторожностью
Роли ориентиров предназначены для обозначения более крупных общих разделов документа. Использование слишком большого количества ориентиров может создать «шум» в программах чтения с экрана, что затруднит понимание общего макета страницы.
Вводы не являются формами
Вам не нужно объявлять role="form" для каждого элемента формы (вводы, текстовые области, выборки и т. д.). Он должен быть объявлен в HTML-элементе, обертывающем элементы формы. В идеале используйте Элемент в качестве элемента-оболочки и не объявляйте role="form" .
Поиск
Если для поиска используется форма, следует использовать более специализированное значение role="search" .
Маркировка ориентиров
Каждому элементу и роли формы , которые должны быть представлены в качестве ориентира, должно быть присвоено доступное имя.
Это имя позволит пользователю вспомогательных технологий быстро понять назначение ориентира формы.
Используйте aria-labeledby , aria-label или title для того же элемента, которому присвоено role="form" , чтобы предоставить ему доступное имя.
Использование
role="form" Повторяющиеся описания
Программа чтения с экрана объявит тип ориентира. Из-за этого вам не нужно описывать, что представляет собой ориентир в его метке. Например, объявление role="form" с aria-label="Контактная форма" может быть избыточно объявлен как "форма контактной формы".
Предпочтение HTML
Использование элемента автоматически сообщит, что раздел имеет роль формы . Если это вообще возможно, предпочитайте использовать его вместо этого.
| Спецификация |
|---|
| Доступные расширенные интернет-приложения (WAI-ARIA) |
| ARIA Authoring Practices # aria_lh_form |
- Элемент
- Элемент
<легенда>
Форма - (роль): Доступные многофункциональные интернет-приложения (WAI-ARIA) 1.1
Последнее изменение: , участниками MDN
Формы в HTML5 - Справочник по HTML
Поделиться этой страницей
Новинка! Вышла моя 44-страничная электронная книга " CSS за 44 минуты "! 😃
Получить сейчас → Определяет интерактивную кнопку .
Пример: Копировать
<кнопка> Представить форму
Определяет группу элементов управления в форме.
Пример: Копировать
Подпишитесь на информационный бюллетень