HTML5 атрибуты форм (часть 2)


Содержание материала:

Новые элементы форм HTML5

На данном этапе мы узнали, как усовершенствовать формы с помощью новых возможностей HTML5 — проверки и дополнительных типов данных полей ввода. Это наиболее важные новые возможности с наивысшим уровнем поддержки в браузерах, но HTML5 не останавливается на этом.

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

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

Подсказки ввода

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

Чтобы использовать элемент datalist, сначала нужно создать обычное текстовое поле. Допустим, мы создали обычный элемент :

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

Как и традиционное поле
Или введите вручную:

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

Но этот подход не работает незаметно. При получении данных формы на сервере необходимо проверить на наличие данных из списка (favoriteFruite) и из списка (dl_fruits). За исключением этого незначительного недостатка, это надежный способ предоставить новое удобство всем пользователям без исключения.

Индикатор выполнения

Новые графические элементы

и внешне похожи друг на друга, но имеют разные назначения. Элемент

отображает ход выполнения задания посредством зеленой пульсирующей полоски на сером фоне. Визуально элемент

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

Элемент указывает значение в диапазоне известных значений. Внешне похож на элемент

, но зеленая полоска имеет другой оттенок и не пульсирует. В зависимости от браузера цвет индикаторной полоски элемента может меняться при отображении значения, определенного как «слишком низкое» или «слишком высокое». Например, в браузере Chrome при отображении последнего значения цвет индикатора меняется с зеленого на желтый. Но самая важная разница между элементами

и заключается в их семантическом значении.

Для помещения в форму элементов и

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

В настоящее время элементы

и поддерживаются браузерам Chrome 9, Opera 11, Firefox 5 и Safari 5.1 (а также их более поздними версиями).

и не составляет никакого труда. Сначала рассмотрим элемент

. Он использует атрибут value, который обозначает ход выполнения задания в виде дробной величины от 0 до 1. Графически это отображается соответствующей шириной полоски индикатора. Например, чтобы показать, что задание выполнено на 25%, атрибуту value присваивается значение 0,25:

Альтернативно, можно использовать атрибут max, чтобы установить максимальное значение и изменить масштаб индикатора. Например, при значении max, равном 200, значение value должно быть между 0 и 200. Если сделать значение value равным 50, то получим те же самые 25% заполнения индикатора, как и в предыдущем примере:

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

, попросту игнорируют его. Эту проблему можно решить, вставив в элемент

резервное содержимое следующим образом:

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

Для индикатора выполнения есть еще одна опция в виде неопределенного состояния индикатора, которое указывает, что задание выполняется, но точное время его завершения неизвестно. (Индикатор в неопределенном состоянии можно рассматривать как вычурное сообщение «Задание в процессе выполнения».) Визуально индикатор в неопределенном состоянии выглядит как серое поле, вдоль которого периодически слева направо пробегает зеленая размытая полоска. Чтобы создать этот индикатор, просто не употребляйте атрибут value:

Элемент имеет подобную модель, но отображает любой вид измерений. Иногда его еще называют шкалой. Часто значение атрибута value этого элемента отображает какую-то действительную величину, например денежную сумму на счету, количество дней, вес в килограммах и т.п. Отображение этой информации управляется установкой значений атрибутов min и max:

Как и для элемента

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

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

Например, значение value, превышающее значение high, но меньше значения max, будет выше какого-то требуемого значения, но все еще в пределах допустимого максимального значения. Подобным образом значение value ниже значения low, но выше значения min, не удовлетворяет какому-либо требованию низкого значения, но будет все еще в пределах допустимого минимального значения:

Браузеры могут использовать или не использовать информацию атрибутов low и high. Например, браузер Chrome отображает слишком высокие значения (как в предыдущем примере) желтым цветом, но значения ниже low показывает как обычные. Наконец, атрибут optimum служит для указания определенного оптимального значения, но использование этого атрибута не влияет на отображение этого значения в современных браузерах.

В общем, элементы

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

Элементы и для создания кнопок команд и меню

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

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

Разметка форм в HTML5

  • CSS — CSS3
  • HTML — HTML5
  • Flexbox CSS — уроки
  • JavaScript
  • Плагины и расширения
  • Шпаргалки по Битрикс
  • Продвижение сайтов
  • Web-ДИЗАЙНЕРУ
  • ЗАРАБОТОК в интернете
  • Виды интернет-сайтов
  • Разное

Дата публикации: 14.06.2015

Эта статья – первая из цикла статей об онлайн-формах HTML5, всего их будет 3. До перехода к стилевому оформлению и API проверке со стороны клиента в Java Script, в данной статье мы рассмотрим базовые понятия о разметке. Я советую вам прочитать об этом, даже если вы уже имеете представление о формах, так как в этой статье будут описаны многие новые атрибуты и подводные камни их использования.

Формы 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

В арсенале HTML5 появился целый ряд новых видов полей ввода. Они сами по себе помогают при вводе данных и обеспечивают валидацию без кода Java Script…

вид поля применение
email для ввода электронного адреса
tel для ввода номера телефона – строгий порядок написания необязателен, но переносы строк будут удалены
url для ввода URL
search поисковое поле с автоматически удаляющимися переносами строк
number для ввода чисел с плавающей точкой
range для создания элемента управления, позволяющего вводить примерные значения, обычно для этого используется слайдер
date для ввода даты (день, месяц и год)
datetime для ввода даты (день, месяц, год) и времени (час, минута, секунда, микросекунда) в соответствии с текущим часовым поясом UTC.
datetime-local для ввода даты и времени без учета местного времени
month для ввода месяца и года без учета местного времени
week для ввода порядкового номера недели без учета местного времени
time для ввода времени без учета местного времени
color задать цвет

Атрибуты полей ввода

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

Хотя вы можете и добавить значения, если предпочитаете более строгий порядок как в XHTML. Например:

определяет метод ввода данных. Наиболее важными являются следующие методы:

  • verbatim — не текстовый контент, например, имя юзера
  • latin — латинский шрифт, такой как поля поиска
  • latin-name — имена собственные, т.е. первая буква является заглавной
  • latin-prose — обычный текстовый контент, например, сообщения, твиты и так далее
  • numeric — ввод числовых значений, к которым не подходят атрибуты number или range, например, для ввода номеров кредитных карт
атрибут применение
name название поля ввода
value исходное значение
checked Выделяет флажок или переключатель
maxlength Максимально возможная длина строки для ввода. Также можно применять с текстовыми областями в HTML5
minlength минимально возможная длина строки для ввода. Хотя возможность использования данного атрибута прописана, во время ввода символов поддержка браузера недостаточна, и происходит так, что система проверки достоверности в HTML выдает ошибку.Как альтернативу можно использовать pattern=».<3,>» , который обеспечит наличие по крайней мере трех символов.
placeholder подсказка с бледным шрифтом внутри окна для ввода.
autofocus установка фокуса на данное видимое поле ввода во время загрузки страницы
required показывает, что необходимо ввести значение
pattern удостоверяет, что значение и регулярное выражение соответствуют
min Минимальное установленное значение (для чисел и дат)
max Максимальное установленное значение (для чисел и дат)
step Степень дробления значения. Например, код input type=»number» min=»10″ max=»19″ step=»2″ сделает возможными следующие значения: 10, 12, 14, 16 or 18.
autocomplete обеспечивает подсказку для браузера о возможности авто-заполнения, например, «e-mail» для расчетов, или может быть переведен в положение «on» или «off» для того, чтобы, соответственно, активировать или дезактивировать эту функцию
inputmode
size размер символов вводимого текста или пароля или число пикселей для полей ввода e-mail, телефона или поля поиска. Вероятно, не стоит его использовать , если вы используете CSS для оформления стилей полей ввода.
rows число строк текста (только для текстовых областей)
cols число колонок текста (только для текстовых областей)
list Указывает на установленный список опций
spellcheck Может принимать значения «true» или «false» , чтобы активировать или дезактивировать функцию проверки орфографии вводимого текста
form Идентификационный номер формы, к которой относится указанное поле ввода. Как правило, поля ввода должны находиться внутри формы, но данный атрибут разрешает определить местоположение поля ввода в любой части страницы
formaction определяет URI , заменяющее действие формы при отправке (только для кнопок или изображений подтверждения отправки)
formmethod Определяет GET и POST , заменяющие метод формы при отправке (только для кнопок или изображений подтверждения отправки)
formenctype Определяет вид контента при отправке формы ( text/plain, multipart/form-data или application/x-www-form-urlencoded , только для кнопок или изображений подтверждения отправки)
formtarget Устанавливает целевое окно или фрейм, заменяющие атрибут form target при отправке (только для кнопок или изображений подтверждения отправки)
readonly Вводимые данные невозможно изменить, хотя они и будут проверены и отправлены
disabled Блокирует поле ввода, в этом случае не будет произведена валидации не будет и не будут отправлены данные.

Учитывайте, что тип поля date всегда использует формат ГГГГ-ММ-ДД для атрибутов value , min и max .
В примере, указанном ниже, мы видим поле для ввода обязательного e-mail с окончанием @mysite.com с фокусировкой на нем при первой загрузке страницы:

Datalist

datalist содержится набор подходящих опций для любого вида поля. Например:

Но имейте в виду, что реализаций отличаются в зависимости от браузеров.

Списки значений могут заполняться и с помощью Java Script, если вы хотели бы выбирать опции через Ajax.

Остановка валидации

Остановить проверку всей формы можно, если установить для элемента form атрибут novalidate . Как альтернативный способ, можно установить атрибут formnovalidate для кнопки или изображения подтверждения отправки.

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

Поля вывода

До этого мы рассматривали виды полей ввода, но в арсенале HTML5 также есть поля для вывода:

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

Отделение и маркировка полей

Спецификация формы на сайте whatwg.org form specification устанавливает, что

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

Интересно. В основном я использую для этого div , хотя не думаю, что есть какая-либо разница в значении. Тэг

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

Учтите, что маркировки следует устанавливать или вокруг, или рядом с самим полем ввода с атрибутом for , который идентифицирует поле ввода, например:

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

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

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

Далеко не все поля ввода данных и их атрибуты поддерживаются всеми браузерами. Как правило, основная часть современных браузеров начиная с IE10+ предоставляют возможность создания полей для ввода e-mail и чисел. Однако на момент написания этой статьи виды полей для ввода времени и дат были доступны только в браузерах Webkit и Blink.

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

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

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

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

1 — Стандартное поле для ввода дат всегда преобразовывает вводимые значения в формат ГГГГ-ММ-ДД вне зависимости от принятого формата даты принят в вашей местности.

2 — Firefox и IE вернутся к стандартному текстовому полю, а юзерам возможно нужно ввести даты в формате ММ-ДД-ГГГГ, принятом в США, или формате ДД-ММ-ГГГГ, принятом в европейских странах.

3 — Инструмент для выбора даты в Java Script и в jQuery UI дает возможность установить персонализованный формат вводимой даты – или даже ГГГГ-ММ-ДД для корректности – но нет гарантии, что на устройстве пользователя будет доступен Java Script.

Самое простое решение в этом случае – отказаться от применения поля ввода date в HTML5, возвратиться к текстовому полю и создать собственное управление датой. Не стоит этого делать. Вряд ли вы когда-нибудь сможете создать собственный элемент управления датой, который будет действовать на любых устройствах и со всеми экранными разрешениями, будет совместим с клавиатурой, мышью и сенсорами и будет продолжать работать при отсутствии Java Script. Так, в частности, браузеры для мобильных телефонов часто опережают обычные браузеры по набору доступных инструментов и обладают отличными элементами для сенсорного управления.

Виды полей HTML5 – это будущее в сайтостроении. Применяйте их и при необходимости добавляйте полизаполнители Java Script в случаях, когда вам требуется надежная кроссбраузерная поддержка. Но обратите внимание, что будет требоваться…

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

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

  • баги браузера или ошибки Java Script, которые будут разрешать недействительные данные
  • случаев, когда пользователь изменит ваш HTML, и когда скрипты будут использовать инструменты браузера
  • переписывание данных из систем, находящихся вне контроля
  • перехват данных во время их перемещения между браузером и сервером (как это бывает по HTTP)

Проверка со стороны клиента не заменяет и никогда не заменит проверку со стороны сервера. Проверка данных пользователя со стороны сервера является существенным условием, а со стороны клиента – желательным.

И, последнее, знайте, что даты можно получить в формате ГГГГ-ММ-ДД или в ином формате, который вы установили для пользователя (ММ-ДД-ГГГГ, ДД-ММ-ГГГГ и так далее) Проверяйте цифры в первых 4 символах или, в случае необходимости, используйте собственные методы анализа языка и оболочки даты.

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

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

Это первая из трех статей о веб-формах HTML5. Перед тем, как перейти к стилизации и JavaScript-валидации на стороне клиента, мы рассмотрим основную разметку. Я рекомендую вам прочесть эту статью, даже если вы уже знакомы с формами — здесь описано множество новых атрибутов и плюшек!

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

  • input type=»text»
  • input type=»checkbox»
  • input type=»radio»
  • input type=»password»
  • input type=»h
  • возможности стилизации с помощью CSS ограничены
  • расширенные элементы, вроде элементов для выбора даты и цвета нужно реализовывать самостоятельно, с помощью кода
  • валидация на стороне клиента требует JavaScript

Дополнительные типы полей

В HTML5 было введено огромное количество новых типов полей. Они предоставляют нативные помощники ввода и валидации без JavaScript-кода

Тип Описание
email ввод email-адреса
tel ввод телефонного номера — нет строгого синтаксиса, но разрывы строк будут удалены
url ввод URL
search поле поиска с разрывами строк автоматически удаляется
number число с плавающей точкой
range элемент управления для ввода примерного значения, обычно представляемого с помощью слайдеров
date ввод дня, месяца и года
datetime ввод дня, месяца, года, часа, минуты, секунды и микросекунды относительно текущей временной зоны
datetime-local ввод даты и времени без временной зоны
month ввод месяца и года без временной зоны
week ввод номера недели без временной зоны
time ввод времени без временной зоны
color выбор цвета

Атрибуты полей ввода

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

конечно, можно и добавить таковые, если вам нравится синтаксис в стиле XHTML, например

указывает способ ввода. Наиболее полезные возможности:

  • verbatim — содержимое с дословной передачей смысла, например имена пользователей
  • latin — латиница, например, поля поиска
  • latin-name — имена, то есть с заглавной первой буквой
  • latin-prose — содержимое с не дословной передачей смысла, например сообщения, твиты, прочее.
  • numeric — числовые значения, где не подходят типы number и range , например, номера кредитных карт
Атрибут Описание
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
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, на которое смещается фокус при загрузке страницы.

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

Список данных содержит набор подходящих значений для любого типа поля, например:

но стоить помнить, что реализация отличается в различных браузерах. Например, 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 с соответствующими полями, например:

Элементы управления не стандартизированы

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

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

Не все типы полей и атрибуты поддерживаются во всех браузерах. Говоря в общем, все современные браузеры, начиная с IE10+, включают в себя поддержку основных типов полей, вроде email или числовых полей. Но на момент написания статьи поля типа дата/время поддерживаются только в браузерах на движках Webkit и Blink.

Для не поддерживаемых типов полей браузер откатится до стандартного поля ввода типа text, а не поддерживаемые атрибуты и их значения проигнорирует.

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

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

Рассмотрим даты. Поддержка в браузерах неоднородна, и это приводит к проблемам при внедрении.

  1. Стандартное поле date всегда возвращает дату в формате YYYY-MM-DD, независимо от того, какой формат даты используется в вашем регионе.
  2. IE и Firefox откатятся до стандартного поля text, а вашим пользователям нужно вводить даты в английском формате MM-DD-YYYY, или в европейском DD-MM-YYYY
  3. 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-свойства, относящиеся к формам.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.sitepoint.com/html5-forms-markup/
Перевел: Станислав Протасевич
Урок создан: 31 Мая 2014
Просмотров: 38060
Правила перепечатки

5 последних уроков рубрики «HTML5»

Расширяем возможности HTML за счёт создания собственных тегов

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

Определение доступности атрибута HTML5 с помощью JavaScript

Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.

HTML5: API работы с вибрацией

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

Создание форм с помощью Webix Framework — 4 практических примера

Веб дизайнеры частенько сталкиваются с необходимостью создания форм. Данная задача не простая, и может вызвать головную боль (особенно если вы делаете что-то не стандартное, к примеру, много-страничную форму). Для упрощения жизни можно воспользоваться фрэймворком. В этой статье я покажу вам несколько практических приёмов для создания форм с помощью фрэймворка Webix.

Знакомство с фрэймворком Webix

В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.

Form и input — теги и их атрибуты для создания различных HTML форм для сайта

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com. В продолжение изучения языка гипертекстовой разметки переходим к рассмотрению тегов form и input с их атрибутами (что представляют из себя эти составляющие HTML кода в общем случае), с помощью которых можно создавать самые разнообразные формы для сайта.

Какой бы тематики и наполнения не был тот или иной вебресурс, на нем с большой вероятностью будут встречаться формы в том или ином виде: текстовые поля, выпадающие меню, различные кнопки или переключатели. К слову, в одной из публикаций я уже повествовал об элементах, помогающих разнообразить формы с помощью тегов select, option, textarea, label, fieldset и legend.

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

HTML формы — как они создаются с помощью form и input

Как я уже сказал вначале, какая-нибудь вебформа, а то и сразу несколько, обязательно должны присутствовать на любом мало-мальски развитом вебсайте. Чтобы понять, насколько они важны в свете соответствия веб-ресурса современным требованиям, достаточно привести вам навскидку тройку объектов, где используются формы, основанные на тегах form и input, которые по одному названию не оставляют сомнений в своей необходимости проекту той или иной направленности:

Если перейдете, к примеру, по ссылке на статью о создании обратной связи (позволяющей всем юзерам отправлять сообщения администрации сайта), то там как раз представлен код HTML с парным тегом form, который имеет открывающую () часть:

Здесь form играет важнейшую роль, так как инициирует установку вебформы. Сам по себе он не выводит некую область на веб-странице, но служит контейнером, содержащим другие тэги.

В нашем случае (см.скриншот выше) в их число входит несколько input (этот ХТМЛ тэг является одиночным, иными словами, не имеет закрывающей составляющей), а также textarea, с разными наборами атрибутов. Каждый из них определяет свой элемент, входящий в форму.

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

Обратите внимание, что однострочные текстовые поля («Ваше имя», «Электронная почта», «Тема сообщения») выведены в том числе благодаря присутствию атрибутов name (c разными значениями «name», «email», «sub») и type («text») наиболее востребованного тега input.

Для многострочного поля применен тег textarea со своими параметрами. Кнопка «Отправить» реализована тем же input в совокупности с атрибутами value и type (со значением «submit»).

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

Если внешний вид формы мы можем создавать с помощью языка гипертекстовой разметки, то обеспечить передачу данных и их обработку средствами ХТМЛ, к сожалению, мы не в силах.

Для этого предназначена программа обработки форм (обработчик), выполняющая эту задачу. Она обычно реализуется в виде скрипта, написанного на языке PHP, содержание коего в каждом конкретном случае зависит от преследуемых целей. В предоставленном мною примере с обратной связью данную роль играет созданный для этого файл mail.php с таким содержимым:

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

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

Атрибуты тега form — action, method, name и другие

Как я уже отмечал выше, любая ХТМЛ форма заключается между открывающим и закрывающим тегами form, который является контейнером, содержащим другие теги. Form имеет ряд атрибутов, некоторые из которых могут принимать различные значения (параметры). Наиболее часто используемыми из них (смотрите третий скриншот вверх отсюда) являются следующие:

1. Action — путь до документа (URL), содержащего скрипт исполнения (обработчик веб-форм). Обязательный атрибут (в HTML5 таковым не является, поскольку пятая версия языка разметки предусматривает ситуации, когда данные для обработки отправляются на текущую страницу). В качестве значения используется абсолютный или относительный путь к файлу на сервере:

2. Method — c помощью этого атрибута обеспечивается способ передачи данных. Собственно, их всего два: get и post, которые и являются параметрами. Метод get (значение по умолчанию) используется для небольших сообщений посредством адресной строки браузера. Тогда как post предназначен для отправки большего объема данных закрытым способом.

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

Далее представлю вам и остальные атрибуты тега form:

4. Accept-charset — определяет кодировку, в которой сервер должен обрабатывать полученные данные. В качестве значения (параметра) данного атрибута выступает название используемого стандарта (UTF-8, Windows-1251 и т.д.).

5. Autocomplete [HTML5] — активирует автозаполнение формы браузером, который в этом случае оставляет в памяти содержание впервые заполняемых полей (чаще логина и пароля), а при необходимости в дальнейшем ввода этих данных автоматически их вставляет в нужные места. Имеет всего два параметра: on — автоматическое заполнение включено, off — выключено.

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

6. Enctype — задает метод кодирования введенных в форму данных перед отправкой их на сервер. Может быть применено одно из трех значений:

  • application/x-www-form-urlencoded (параметр по умолчанию) — вместо пробелов применяется «+», кодируются все символы кроме букв латинского алфавита и цифр. Например, знаки кириллицы будут преобразованы в нечто, похожее на «%2F%3D%26%3F%2%3D%26%3D»;
  • text/plain — только пробелы заменяются знаком «+», буквы и другие символы кодировке не подлежат;
  • multipart/form-data — информация не кодируется. Данный параметр используется при отправлении файлов на сервер. При этом элемент загрузки файла в форме описывается тегом input с атрибутом type=»file» (подробнее о нем поговорим ниже).

Вот пример кода с применением атрибута enctype со значением «multipart/form-data»:

7. Noval >[HTML5] — это логический атрибут (значения отсутствуют), который отменяет проверку на корректность введенной пользователем информации, отправляемой на сервер:

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

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

8. Target. Результат обработки отправленных на сервер данных, внесенных юзером в форму, расположенную на странице, возвращается в форме HTML документа, который загружается в окно браузера, определяемое значением атрибута target:

  • _blank — в новое окно;
  • _self (параметр по умолчанию) — в то же окно;
  • _parent — во фрейм-родитель. Если таковой отсутствует, то в текущее окно (_self);
  • _top — в полное исходное окно, отменяя при этом все другие фреймы. При отсутствии фреймов в то же окно (_self);
  • framename — в именной фрейм, название которого задается с помощью его атрибута name ( );

Тег input и его атрибуты, расширяющие возможности форм

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

Атрибут type и формируемые им элементы — text (текстовое поле), button (кнопка), checkbox (чекбокс), radio (радиокнопка) и другие

ЗНАЧЕНИЕ ОПРЕДЕЛЕНИЕ И КОД ОТОБРАЖАЕМЫЙ ЭЛЕМЕНТ
1. BUTTON Простая кнопка. Надпись оформляется с помощью параметра атрибута value.
2. CHECKBOX Чекбоксы. Позволяют выбрать галочкой один или сразу несколько необходимых вариантов, названия пунктов (A, B, C) реализованы с помощью атрибута value.
3. COLOR [HTML5] Управление палитрой цветов.
4. DATE [HTML5] Ввод календарной даты в формате DD.MM.YYYY (день, месяц и год).
5. DATETIME-LOCAL [HTML5] Выбор даты и времени в формате DD.MM.YYYYThh:mm (день, месяц, год, часы и минуты).
6. EMAIL [HTML5] Поле для ввода адреса электронной почты
ЗНАЧЕНИЕ ОПРЕДЕЛЕНИЕ И КОД ОТОБРАЖАЕМЫЙ ЭЛЕМЕНТ
7. FILE Кнопка выбора файла для последующей загрузки его на сервер
ЗНАЧЕНИЕ ОПРЕДЕЛЕНИЕ И КОД ОТОБРАЖАЕМЫЙ ЭЛЕМЕНТ
8. HIDDEN Скрытое поле, которое не отображается, однако данные в обработчик передаются.
9. IMAGE Поле с картинкой. Нужно указать путь (относительный или абсолютный) до соответствующего изображения на сервере в качестве значения атрибута src. При нажатии картинку данные будут отправлены на сервер.
10. MONTH [HTML5] Ввод месяца и года в формате Month YYYY.
11. NUMBER [HTML5] Выбор отрицательного или положительного числа.
12. PASSWORD Текстовое поле, где символы показываются звездочками. Предназначено для скрытия вводимого пароля.
13. RADIO Переключатели (радиокнопки). Обычно используются при необходимости выбора одного варианта из предложенных. Для установки наименования каждой радиокнопки применен атрибут value.
14. RANGE [HTML5] Ползунок для выбора чисел в указанном диапазоне. Применяются следующие значения по умолчанию, если соответствующие атрибуты не указаны:

  • min = «0»
  • max = «100»
  • value = min + (max — min) / 2, или min, если max
15. RESET Кнопка для возврата данных к первоначальному значению.
16. SEARCH [HTML5] Однострочное поле для поиска.
17. SUBMIT Кнопка для отправки данных.
18. TEL [HTML5] Элемент для указания номера телефона
19. TEXT Текстовое поле для ввода символов
20. TIME [HTML5] Ввод времени в формате hh:mm.
21. URL [HTML5] Специальное поле для указания URL-адреса.
22. WEEK [HTML5] Выбор порядкового номера недели и года (Неделя NN, YYYY)

Если значение type не указано, то по умолчанию будет создано текстовое поле (type=»text»).

Какие еще атрибуты расширяют функционал input

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

В качестве примера создадим стандартную форму авторизации для ввода логина и пароля, где для каждого тега input пропишем уникальное название посредством атрибута name («login-x», «password-x», «submit1»). Вот как это будет выглядеть:

2. Accept — задает фильтрацию на виды файлов, которые можно загружать на сервер. Применим исключительно совместно с . Возможны следующий значения:

  • file_extension — расширение файла (.doc, .gif, .jpg, .png, .xls и т.д.);
  • audio/* — аудиофайлы (звуковые);
  • video/* — видеофайлы;
  • image/* — файлы изображений;
  • media_type — наименование MIME-типа (application/json, audio/mp4, image/gif и т.п.).

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

Загрузите видеоролик:

А вот с образец с возможным выбором изображений в форматах JPEG или PNG:

Загрузите картинку (формат JPEG или PNG):

После нажатия пользователем кнопки «Выберите файл» в появившемся окне выбора будут предложены те группы файлов, которые указаны посредством значения атрибута accept.

3. Alt — применяется исключительно с целью создания альтернативного текста для графической кнопки «Отправить» (input type=»image»). Если по каким-то причинам изображение на страницу не загружено, то вместо него будет выведен фрагмент текста, описывающий эту картинку, он и является параметром данного атрибута.

Естественно, наряду с alt и type=»image» (см. таблицу параметров type выше) должен быть указан и атрибут src, где в качестве значения указан относительный либо абсолютный путь до картинки. Без лишних слов к примеру (слева — код, справа — вид кнопки без отображаемой картинки):

4. Autocomplete [HTML5] — дает возможность сохранять данные, введенные пользователями (два значения: on — автозаполнение включено, off — выключено). Если присутствие такого же атрибута в теге form регулирует автоматическое заполнение сразу для всех полей вебформы, то с помощью тега input можно его включить для одних элементов и отключить для других.

В ниже представленном примере для текстового поля (type=»text»), в которое вводится логин, автоматическое заполнение включено, а для области ввода пароля оно отключено. В результате после вторичного посещения страницы юзером, на которой размещена форма авторизации, его логин будет выведен автоматически:

Но механизм автоматического заполнения (autocomplete=»on») будет работать только тогда, когда в браузерных настройках конкретного пользователя включен режим автосохранения (обычно в целях общей безопасности у большинства юзеров эта опция не активирована). Например, в веб-браузере Google Chrome он запускается так («Настройки» — «Пользователи» — «Пароли»):

5. Checked (нет значений) — устанавливает флажки (галочки) для чекбоксов (type=»checkbox») и радиокнопок, или переключателей (type=»radio»). Причем, в пределах одной вебформы можно отметить сколь угодно много чекбоксов (множественный выбор):

И только один переключатель (единичный выбор):

6. Formaction [HTML5] — работает исключительно в связке с type=»image» или type=»submit» тега input (кнопка отправки) и указывает путь до файла, который обрабатывает занесенные в веб-форму данные. Этот путь (URL) служит значением данного атрибута, который по своему действию аналогичен action для тега form, но имеет перед ним приоритет. То есть, при наличии различных параметров обоих атрибутов учитываться будет значение formaction:

Для этого примера вся информация будет обрабатываться именно скриптом, относительный путь до которого (formdata-y) описывается именно атрибутом formaction тега input. При этом элемент action=»formdata» игнорируется веб-браузером.

Еще 4 атрибута (7-10) для input, действия которых тождественны аналогичным элементам для основного тега

Введите ваше имя:

13. List [HTML5] — выводит варианты, которые можно выбирать из списка. Параметром является имя идентификатора id (глобальный атрибут) тега , который служит контейнером для набора тэгов option, каждый из которых определяет свой пункт списка:

14. Max [HTML5] — определяет максимальное значение при вводе числа либо даты, которые выступают в роли параметров. Используются целые положительные и отрицательные числа для атрибутов type=»number», type=»range», а также календарные даты в формате YYYY.MM.DD (год, месяц и день) для type=»date».

15. Min [HTML5] — устанавливает минимально возможное для выбора число или дату. В отношении значений действуют те же правила, что и для атрибута max.

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

Начало события (с 5 по 10 ноября 2020 г.):

Конец события (с 11 по 20 ноября 2020 г.):

Выберите число (от -5 до 5):

Действия следующих 6 атрибутов (пп. 16-21) тега input тождественны или почти совпадают с их воздействием применительно к тегу select.

16. Autofocus [HTML5] (параметры отсутствуют) — логический атрибут, который устанавливает фокус в поле сразу при загрузке вебстраницы, в результате чего можно вводить данные без щелчка по нему кнопкой мышки. Не может быть применен только к input type=»hidden».

17. Disabled (без значений) — отключает для пользователя тот элемент формы, к которому он добавлен. Чаще всего применяется совместно со скриптами, где прописываются условия, при выполнении которых недоступный элемент будет активирован.

18. Form [HTML5] — связывает элемент с формой, когда он располагается вне контейнера . Для связки к тэгу form добавляется глобальный атрибут ).

19. Multiple [HTML5] (параметров нет) — устанавливает возможность множественного выбора для пользователя и применяется только совместно с type=»file» и type=»email».

В случае использования поля для файловой загрузки возможно выбрать сразу несколько файлов с компьютера, задействовав клавиши Ctrl или Shift. Если же выводится поле для ввода адреса электронной почты (type=»email»), то вводить эмейлы следует через запятую.

20. Required [HTML5] (значения отсутствуют) — активирует обязательность внесения данных пользователем. Поэтому браузер блокирует отправку вебформы, если обязательное поле остается пустым и выводит соответствующее сообщение о необходимости его заполнения.

Данный атрибут не используется для графических и стандартных кнопок (type=»button | image»), а также для скрытого поля ввода (type=»hidden»).

21. Size — определяет ширину текстового поля в знаках (подходит лишь для элементов type с параметрами «email | password | search | tel | text | url»). Значение по умолчанию 20 символов.

Следующие четыре атрибута (22-25) для тега input несут практически тот же функционал, что и для многострочного поля textarea, но для полноты картины вкратце упомяну и их.

22. Maxlength [HTML5] — налагает лимит на максимальное количество символов, которое можно вводить при заполнении текстового поля. В случае попытки превысить это ограничение последует блокировка дальнейшего ввода. Этот атрибут применим исключительно для текстовых элементов с type=»email | password | search | tel | text | url».

23. Minlength [HTML5] — накладывает ограничение на минимальное число символов, требуемых ввести в текстовую область. Если последует попытка отправить данные, содержащие меньшее количество знаков, то появится коротенькое сообщение, в котором указано на необходимость дополнить содержание формы и будет дана информация о количестве уже введенных знаков. Условия использования точно такие же, как и в случае с maxlength.

24. Placeholder [HTML5] — можно поместить подсказку (она и будет служить параметром) прямо в текстовое поле, которая пропадет в тот момент, когда пользователь начнет вводить символы. Только для полей, которые формируются посредством параметров email, password, search, text, tel, url атрибута type тэга input.

25. Readonly (параметры отсутствуют) — указывает на то, что предварительно введенный в поле текст доступен только для чтения и копирования. Обычно применяется вместе со скриптами, где прописываются условия, выполнение которых может активировать этот элемент формы.

И в завершение еще несколько атрибутов, дополняющих функционал различных элементов форм:

26. Pattern [HTML5] — в роли своего значения отражает регулярное выражение, на основании которого задаются правила ввода информации. При этом рекомендуется дополнительно добавить глобальный атрибут title, параметром которого внести разъяснительный текст для помощи юзерам при заполнении полей. Pattern применяется только для элементов email, password, search, text, tel, url. Разберемся на примере. Вот код упрощенной формы регистрации (с логином и паролем):

Для поля логина (type=»text») в качестве значения pattern прописано регулярное выражение [A-Za-z]<5,>, которое подразумевает использование знаков латинского алфавита, причем введено должно быть не менее пяти символов.

В отношении текстовой области для пароля (type=»password») задано значение [A-Za-z0-9]<8,>, определяющее ввод исключительно латиницы в любом регистре (большие и маленькие буквы), а также цифр, при этом общее количество всех знаков не должно быть меньше восьми.

При нарушении заданных условий ввода браузер не позволит отправить данные и выведет соответствующее предупреждение:

27. Src — определяет путь до изображения (URL, который является его значением) для отображения графической кнопки «image» (см.таблицу параметров input type выше).

28. Step [HTML5] — устанавливает шаг для элементов, предусматривающих выбор числовых значений (input type=»date | datetime-local | month | number | range | tel | time | week.»).

В качестве параметра может принимать любое целое или дробное число. По умолчанию step=»1″. Чтобы установить конечный диапазон ввода, можно опять-таки использовать атрибуты min и max, упомянутые чуть выше. Для наглядности в тестовую форму включим 2 элемента type=»number». Для первого выставим step=»2″, в для второго step=»0,1″:

Введите значение от -10 до 10:

Введите значение от 0 до 1:

29. Value — устанавливает значение элемента формы, которое будет передано обработчику. На сервер посылается пара «имя-параметр», где имя определяется атрибутом name тега input, а параметр — атрибутом value. При этом для различных элементов формы value будет играть разные роли:

  • для type=»button | reset | submit» — устанавливает текстовую надпись на кнопках;
  • для type=»checkbox | radio | image» — идентифицирует каждый чекбокс, переключатель или графическую кнопку при отправке и обработке данных на сервере;
  • для type=»password | text» — сразу при загрузке формы в поле выводит предварительный текст, который может быть изменен или полностью удален пользователем;
  • для type=»file» (загрузка файлов) не применяется, поскольку не влияет на этот элемент.

Пример использования для каждого из выше перечисленных вариантов:

Выберите CMS: WP Joomla

Здесь значение атрибута value определяет следующие составляющие каждого из элементов: выводит текстовый фрагмент для поля type=»text» («Ваше имя»), идентифицирует каждый из переключателей («1» и «2»), установленных с помощью type=»radio», а также активирует надпись на кнопке («Отправить»).

Пример создания красивой HTML формы

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

Обратите внимания, что для получения уникального оформления отдельные компоненты формы помещены в контейнеры div, к каждому из которых добавлены классы с наборами CSS свойств:

В результате подобная вебформа приобретает вот такие очертания:

Более полная информация по созданию данной конкретной формы на этой странице (к слову, там же вы можете не только проверить функциональность отдельных текстовых областей, введя в них данные, но и поэкспериментировать с вебформой, отредактировав HTML-код или/и свойства CSS, полностью либо частично изменив ее внешний вид).

Моей целью было познакомить вас с алгоритмом использования различных значений атрибута type и тега form для создания разнообразных HTML форм на сайте. Надеюсь, задача выполнена. В любом случае, делитесь своими соображениями по этой многообразной теме в комментариях.

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

Новый атрибут для форм в HTML5

Единственное, с чем столкнулись разработчики при создании форм, — это невозможность отделить контроллеры форм от их родительского элемента «form» без применения нежелательных методов, которые помогали заставить эти контроллеры передавать данные вместе с формой.

Если вы пробовали сделать это в HTML4 или в XHTML, то вряд ли форма принимала информацию из контроллеров формы, которые структурно находились за пределами формы.

В результате, если вам хотелось получить данные и вставить их в форму из «контроллера-сироты», вам приходилось внедрять хитрые уловки на javascript, что в большинстве случаев вело к соответствующим нестыковкам.

Более надежный способ

Сегодня HTML5 предлагает нам новый атрибут для форм, который позволяет нам связать любого контроллера-сироту с любым элементом «form» на странице. Вы можете прочитать об этом методе в спецификации WHATWG HTML5 в разделе Association of Controls and Forms («Привязка контроллеров и форм»), а сегодня мы предложим вам следующий вариант:

Учитывайте две вещи:

Элемент «textarea» за пределами элемента «form» (т.е. он родственный ему элемент, а не дочерний);
Элемент «textarea» снабжен атрибутом формы со значением равным id формы, с которой он должен быть связан.

Аннулирование стандартной среды браузера

С помощью этого атрибута вы можете аннулировать стандартную среду привязки контроллеров форм, предусмотренную в браузере. Например, если у нас на странице две формы, вы можете «украсть» контроллер у формы №2 и связать его с формой №1.

Это можно сделать даже если контроллер формы находится на одной ветви с формой №2. И, как результат, форма №2 не будет получать данные из «украденного» контроллера формы. Т.е. атрибут формы, в данном случае, переписывает натуральную среду браузера.

Этот метод работает по тому же принципу и с кнопкой подтверждения ввода данных, привязанной к форме. У вас может быть кнопка за пределами формы, и вы можете привязать её, используя атрибут формы.

Что насчет поддержки браузеров?

Мы сделали тестовую страницу с формой, реализованной по данной технике, где атрибут формы установлен на «get». Это приведёт к тому, что введенные значения буду отправлены на ту же страницу в строку запроса. Если вы используете браузер с поддержкой этой функции, то вы увидите три значения в строке URL. Если же вы используете браузер без поддержки, то увидите лишь два значения.

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

Opera 9.5+ (полная поддержка)
Safari 5.1+ (это судя по сообщениям от одного из пользователей источника статьи; уровень поддержки не ясен)
Firefox 4+ (глючная/частичная поддержка)
Chrome 10+ (глючная/частичная поддержка)
IE (не поддерживает)

По нашим личным тестам результаты вышли примерно так, как описано выше, за исключением браузеров с указанной частичной поддержкой, так как нам показалось, что метод работает примерно одинаково в FF, Opera и Chrome. Вы можете продвинуться дальше, и опробовать метод в своём браузере, чтобы подтвердить описанные здесь результаты.

Итак, если вы хотите воспользоваться данным методом, у вас должна быть сформировавшаяся аудитория с очень низким числом тех, кто использует Internet Explorer, либо можете добавить функцию определения браузера с откатом на javascript, что даст тот же результат. Мы не нашли специальных элементов «polyfill» для реализации данного метода в таблице HTML5 Polyfills , но есть вероятность того, что один из них позволит реализовать то же самое; мы просто не утруждались и не опробовали их все. В целом, этот метод крайне интересен и пригоден для использования.

Learning about HTML5 Form Attributes (Part 2)

The following is an extract from our book, HTML5 & CSS3 for the Real World, 2nd Edition, written by Alexis Goldstein, Louis Lazaris, and Estelle Weyl. Copies are sold in stores worldwide, or you can buy it in ebook form here.

The pattern Attribute

The pattern attribute enables you to prov >pattern attribute.

The regular expression language used in patterns is the same Perl-based regular expression syntax as JavaScript, except that the pattern attribute must match the entire value, not just a subset. When including a pattern, you should always indicate to users what is the expected (and required) pattern.

The global title attribute has special significance when used in conjunction with the pattern attribute. Since browsers currently show the value of the title attribute on hover such as a tooltip, include pattern instructions that are more detailed than placeholder text, and which form a coherent statement. That title attribute will also be displayed with the browser’s default error message in browsers that support native form validation with error messaging, which we’ll cover later in this chapter.

Note: Regular Expressions

Regular expressions are a feature of most programming languages that allow developers to specify patterns of characters and check to see if a given string matches the pattern. Regular expressions are famously indecipherable to the uninitiated. For instance, one possible regular expression to check if a string is formatted as a hex >#[A-Fa-f0-9] <6>.

A full tutorial on the syntax of regular expressions is beyond the scope of this book, but there are plenty of great resources, tutorials, and cheat sheets available online if you’d like to learn. Alternatively, you can search the Web or ask around on forums for a pattern that will serve your purpose.

For a basic example, let’s add a pattern attribute to the password field in our form. We want to enforce the requirement that the password be at least six characters long with no spaces:

\S refers to “any nonwhitespace character,” and <6,>means “at least six times.” If you wanted to stipulate the maximum amount of characters, the syntax for between six and ten characters, for example, would be \S <6,10>.

As with the required attribute, the pattern attribute will prevent the form from being submitted if there is no match for the pattern, and will provide an error message.

If your pattern is not a valid regular expression, it will be ignored for the purposes of validation.

The pattern attribute has been supported to some extent in all browsers since Firefox 4, Safari 5, Chrome 10, Opera 11, IE10, and Andro >pattern attribute, some—notably Safari and Android through 4.4 allow invalid data to be sent on form submission.

Additionally, similar to the placeholder and required attributes, you can use the value of this attribute to provide the basis for your JavaScript validation code for nonsupporting browsers.

The disabled Attribute

The Boolean disabled attribute has been around longer than HTML5 but has been expanded on, to a degree. It can be used with any form control except the new output element, and, unlike previous versions of HTML, HTML5 allows you to set the disabled attribute on a fieldset and have it apply to all the form elements contained in that fieldset.

Generally, form elements with the disabled attribute have the content grayed out by default in the browser. Browsers will prohibit the user from focusing on a form control that has the disabled attribute set. This attribute is often used to disable the submit button until all fields are correctly filled out.

You can employ the :disabled pseudo- >:enabled or :not(:disabled) pseudo-classes to target form controls that aren’t disabled.

Form controls with the disabled attribute aren’t submitted along with the form so their values will be inaccessible to your form processing code on the server s >readonly attribute.

The readonly Attribute

The readonly attribute is similar to the disabled attribute: it makes it impossible for the user to edit the form field. Unlike disabled ,however, the field canreceive focus and its value is submitted with the form.

In a comments form, we may want to include the URL of the current page or the title of the article that is being commented on, letting the user know that we’re collecting this data without allowing them to change it:

The multiple Attribute

The multiple attribute, if present, indicates that multiple values can be entered in a form control. While it was available in previous versions of HTML, it only applied to the select element. In HTML5, it can be added to file , email , and range input types as well. If present, the user can select more than one file, include several comma-separated email addresses, or have a range with two sliders.

While multiple file input is supported in all browsers since mobile Safari 7 and IE10, the multiple attribute on range input is yet to be supported anywhere at the time of writing.

Note: Spaces or commas?

You may notice that the iOS touch keyboard for email inputs includes a space. Of course, spaces aren’t permitted in email addresses, but browsers allow you to separate multiple emails with spaces along with the required comma. Originally the spaces were disallowed in some browsers, but adding spaces after the comma separator has been included in the specification.

The form Attribute

Not to be confused with the form element, the form attribute in HTML5 allows you to associate form elements with forms in which they’re not nested. It means that you can now associate a fieldset or form control with any other form in the document. This solves the age-old issue of forms not being nestable. While you’re still unable to nest forms, you can associate “nested” form controls with a form that’s not an ancestor.

The form attribute takes as its value the ID of the form element with which the fieldset or control should be associated.

If the attribute is omitted, the control will only be submitted with the form in which it’s nested. If you include the form attribute and remove it, make sure to use el.removeAttribute(‘form’) and not el.setAttribute(‘form’, ») . If the form attribute is included but the value is either empty or points to an invalid form ID, the form control will be disassociated from all forms on the page and will not be submitted with any form, including any ancestral form in which it may be nested.

his attribute is supported in all browsers, starting with Android 4 and IE 11.

The autocomplete Attribute

The autocomplete attribute specifies whether the form, or a form control, should have autocomplete functionality. For most form fields, this will be a drop-down that appears when the user begins typing. For password fields, it’s the ability to save the password in the browser. Support for this attribute has been present in browsers for years, though it was never in the specification until HTML5.

If the autocomplete attribute is omitted from the form control or the form, the default value is on . You may have noticed this the last time you filled out a form. In order to disable autocomplete on a form control (or form), use autocomplete=»off» . This is a good idea for sensitive information, such as a credit card number, or data that will never need to be reused, such as a CAPTCHA.

Autocompletion is also controlled by the browser, ignoring developer-set preferences. While the default value is on , the browser must have it enabled for it to work at all; however, setting the autocomplete attribute to off overr >on preference for the relevant form control.

The datalist Element and the list Attribute

Datalists are currently supported in all browsers except Safari, starting with IE10 and Andro >select element, users can enter whatever value they like, but they’ll be presented with a set of suggested options.

Figure 4.4. The datalist element in action in Firefox

For some input types, like text and date input types, a drop-down list of options is presented as users type into the field, as shown in Figure 4.4. For the range input type, the browser will display little tick marks along the sl >color input type, users are presented with swatches of color suggestions, with the option to switch to the device’s default color picker if they prefer to pick a different color.

The datalist element, much like select , is a list of options, with each one placed in an option element. You then associate the datalist with an input using the list attribute on the input. The list attribute takes as its value the id attribute of the datalist you want to associate with the input. One datalist can be associated with several input fields.

Here’s what this would look like in practice:

The autofocus Attribute

The Boolean autofocus attribute specifies that a form control should be focused as soon as the page loads. Only one form element can have autofocus in a given page. For a better user experience and for accessibility reasons, it is best not to use this attribute.

The input elements support many more attributes, with some being type-specific. The attributes include alt , src , height , and width for the image input type, and step , min , and max for numeric input types, including dates and range. dirname helps tell the server the form control’s directionality. formaction , formenctype , formmethod formnovalidate , and formtarget prov >inputmode helps indicate to the browser what keypad to show when the device is capable of displaying dynamic keypads. minlength and maxlength dictate the length of allowable input. checked , name , size , type , and value should already be familiar to you, though :checked and :default pseudo-classes may be new. We’ll cover some of these with their relevant input types next.

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

Атрибут value

Атрибут value задает начальное значение для поля ввода:

Пример

Атрибут readonly

Атрибут readonly указывает, что поле ввода доступно только для чтения (изменить нельзя):

Пример

Атрибут disabled

Атрибут disabled указывает, что поле ввода отключено.

Поле ввода отключено в использовании и не кликабельно, value не будет отправлено при отправке формы:

Пример

Атрибут size

Атрибут size задает размер (в символах) для поля ввода:

Пример

Атрибут maxlength

Атрибут maxlength определяет максимально допустимую длину символов поля ввода:

Пример

С атрибутом maxlength поле ввода не будет больше введено символов, чем допустимое количество.

Атрибут maxlength не предоставляет обратной связи. Если вы хотите предупредить пользователя, вы должны написать код JavaScript.

Примечание: Ограничения ввода не являются запрещенным, JavaScript предоставляет множество способов добавления запрещенных вводимых данных. Чтобы безопасно ограничить ввод, его должен проверить ресивер (сервер)!

Атрибуты HTML5

В HTML5 добавлены следующие атрибуты для :

и следующие атрибуты для

Совет: В некоторых браузерах для работы может потребоваться активация функции автозаполнения.

Атрибут novalidate

Атрибут novalidate является атрибутом

Атрибут autofocus

Атрибут autofocus указывает, что поле ввода при загрузке страницы должно автоматически получать фокус.

Пусть «Имя» поле ввода автоматически получит фокус при загрузке страницы:

Пример

Атрибут form

Атрибут form определяет одну или несколько форм элементов .

Совет: Чтобы ссылаться на несколько форм, используйте разделенный пробелом список идентификаторов форм.

Поле ввода, расположенное вне формы HTML (все еще являющееся частью формы):

Пример

Атрибут formaction

Атрибут formaction задает URL-адрес файла, который будет обрабатывать контроль ввода при отправке формы.

Атрибут formaction переопределяет атрибут action элемента

Атрибут formenctype

Атрибут formenctype определяет способ кодирования формы данных при отправке (только для форм с method=»post»).

Атрибут formenctype переопределяет атрибут enctype из элемента

Атрибут formmethod

Атрибут formmethod определяет метод HTTP для отправки формы данных в URL-адрес действия.

Атрибут formmethod переопределяет атрибут метода элемента

Атрибут formnovalidate

Атрибут formnovalidate переопределяет атрибут novalidate элемента

Атрибут formtarget

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

Атрибут formtarget переопределяет атрибута target элемента

Атрибуты height и width

Атрибут height и w >.

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

Определить изображение как кнопка «отправить», с помощью атрибутов height и width:

Пример

Атрибут list

Атрибут list относится к элементу который содержит предварительно определенные параметры для элемента .

Элемент предварительно определен значением :

Пример

Атрибуты min и max

Атрибуты min и max определяют минимальное и максимальное значения для элемента .

Атрибуты min и max работают со следующими типами входных данных: number, range, date, datetime-local, month, time и week.

элементы с минимальными и максимальными значениями:

Пример

Введите дату от 1980-01-01:

Введите дату до 2000-01-01:

Числа (от 1 до 5):

Атрибут multiple

Атрибут multiple указывает, что пользователю разрешено вводить более одного значения в элемент .

Атрибут multiple работает со следующими типами входных данных: электронной почтой и файлами.

Поле загрузки файла, которое принимает несколько значений:

Пример

Атрибут pattern

Атрибут pattern определяет регулярное выражение, которое значение элемента проверяется element’s value is checked against.

Атрибут pattern работает со следующими типами ввода: text, search, url, tel, email и password.

Совет: Используйте глобальное атрибут title описать шаблон, чтобы помочь пользователю.

Совет: Подробнее регулярное выражение в нашем учебнике JavaScript.

Поле ввода, которое может содержать только три буквы (без цифр и специальных символов):

Пример

Атрибут placeholder

Атрибут placeholder указывает подсказку, описывающую ожидаемое значение поля ввода (примерное значение или краткое описание формата).

Подсказка отображается в поле ввода перед вводом пользователем value.

Атрибут placeholder работает со следующими типами ввода: text, search, url, tel, email и password.

Поле ввода с текстом заполнителя:

Пример

Атрибут required

Атрибут required указывает, что перед отправкой формы необходимо заполнить поле ввода.

Атрибут required работает со следующими типами ввода: text, search, url, tel, email, password, date pickers, number, checkbox, radio и file.

Необходимое поле ввода:

Пример

Атрибут step

Атрибут step определяет правовые числовые интервалы для элемента .

Пример: если step=»3″, доступные номера могут быть -3, 0, 3, 6 и т.п.

Совет: Атрибут step может использоваться вместе с атрибутами max и min для создания диапазона доступных значений.

Атрибут step работает со следующими типами ввода: number, range, date, datetime-local, month, time и week.

Поле ввода с заданными доступными интервалами:

Формы в HTML5

Пока нам удалось создать несколько интересных версий сайта. Мы еще не охватили формы, в которых пользователи могут вводить данные. Формы широко используются по всему Интернету: поисковые системы вроде Google или Bing, поля статуса в Facebook, редактор писем в Gmail позволяют набирать или отправлять информацию.

Давайте сделаем простую форму, что позволит пользователям комментировать нашу статью. Мы хотим, чтобы форма выглядела как на следующем рисунке:

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

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

Для имен задействуем . Для коротких полей — . Для больших текстов будем использовать

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

Мы должны включить соответствующий тег, который говорит браузеру: «Эй, форма начинается здесь!». Это очень похоже на тег для указания, откуда начинать статью. В HTML мы используем тег

Формы в HTML5 (часть 1)

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали о новых структурных элементах в HTML5. В данной статье я бы хотел рассказать, что нового принёс нам HTML5 при работе с формами. В первую очередь это проверка полей на соответствие некоторым условиям, без использования Javascript. Раньше мы все поля для ввода задавали тегом с атрибутом type=»text» . Затем javascript’ом проверяли, чтобы поле было непустым, удовлетворяло определенным требованиями (например, e-mail пользователя). С приходом HTML5 вся эта процедура упростилась. Давайте начнём разбираться на примере. Давайте создадим форму и добавим тег с новым атрибутом type=»email» (данный атрибут не даст нам отправить форму, пока не будет введен корректный адрес электронной почты):

В данном случае мы указали тип поля email , и по сути, пока мы не введем корректный адрес электронной почты, форма не должна отправляться. Яндекс — браузер выводит очень интересную подсказку, когда мы вводим какую-нибудь ерунду в данное поле. Я ввел «123» и попробовал отправить. Вылезло сообщение о том, что необходим символ «@»

Т.е. если я введу «@» , то форма у нас должна отправится. Что собственно и произошло. Поэтому данным типом поля я не рекомендую пользоваться, если только не добавить в него ещё один атрибут — pattern .

Данный атрибут проверяет соответствие того, что мы ввели, тому что находится в pattern . Здесь необходимо знание регулярных выражений. Давайте сделаем, чтобы наша форма отправлялась только после того, как мы введем НОРМАЛЬНЫЙ адрес электронной почты, а не только строку, содержащую «@» :

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

Вот теперь у нас поле работает нормально.
Атрибут required нужен для того, чтобы нельзя было отправить пустое выражение (required — обязателен к заполнению).

Также появился атрибут type со значением tel , который позволяет ввести телефон:
Здесь же опять необходимо указывать pattern , чтобы данное поле работало нормально, ведь формат телефонов у всех же разный. К примеру вот такой формат:

Пока телефон не будет введен правильным способом, форма никуда не отправится. Также отмечу, что pattern можно использовать и в простых текстовых полях ( type=»text» ).

Ещё один новый атрибут type со значением url , который позволяет проверить действительно ли введен url. Пример:

Ещё один новый элемент — это ползунок, который задаётся атрибутом type со значением range .

У данного элемента есть минимальное и максимальное значение, которые затем можно куда-то передавать. Сразу домашнее задание:

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

Если возникнут трудности, то код можно посмотреть ниже:

Следующий новый элемент — это number . Сразу приведу пример и всё станет понятно:

В данном случае мы можем выбрать элементы от 5 до 100 с шагом 5. Данный элемент далек от совершенства. Мало того, что он в разных браузерах выглядит по-разному, так в него можно вручную внести значение (некоторые браузеры это обрабатывают). Хотя мой браузер вполне нормально обработал данное поле (пользуюсь яндекс-браузером). Использовать его пока не рекомендую, если только не делать проверки на Javascript. Ещё одно домашнее задание (на этот раз кода не будет):

Сделайте проверку на Javascript, что введенное значение в данное поле должно было кратно 5 (использовать событие change ).

Пока мы разобрали только один атрибут required . Но есть ещё и другие:

Атрибут autofocus служит для того, чтобы при переходе на данную страницу, фокус попал именно в данное поле.

Атрибут placeholder служит для подсказки. Как только вы что-то начнете вводить, подсказка исчезнет. Для примера:

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

На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.

Работа с элементами вне формы

В HTML4 элементы input , button и другие, связанные с формой элементы, должны были содержаться внутри элемента form , как я показал во всех предыдущих примерах этой главы. В HTML5 это ограничение было снято, и вы можете связать элементы с формами в любом месте документа. Это делается при помощи атрибута form , который определяется input , button и другими, связанным с формой, элементами, о чем я расскажу в главе 14. Чтобы связать элемент с формой ( form ), которая не является предшествующей, вы просто устанавливаете атрибуту form значение id формы. В листинге 12-18 представлен пример.

Листинг 12-18: Использование атрибута form

В этом примере только один из элементов input является потомком элемента form . Другой элемент input и оба элемента button находятся вне элемента form , но они используют атрибут form , чтобы связать себя с формой.

Топ-пост этого месяца:  Что такое Global Redirect Drupal 7 и как с ним бороться
Добавить комментарий