Как создать кросс-браузерные формы HTML5

В этом уроке мы рассмотрим, как обслуживать HTML5-формы для современных браузеров, одновременно выполняя компенсацию для старых браузеров, используя сочетание Webforms2 , Modernizr , jQuery UI и различных плагинов jQuery.

---

Вступление

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

Одной из первых попыток HTML5 была веб-форма WHATWG 2.0, изначально называемая XForms Basic. Спецификация ввела новые элементы управления формой и проверки, среди прочего. Позже он был включен в HTML5 и впоследствии был лишен модели повторения, что привело к тому, что мы сегодня знаем как HTML5 Forms.

Постоянная проблема обратной совместимости все еще остается головной болью, к сожалению. Разработчикам приходится иметь дело с ужасным Internet Explorer, который, как вы могли догадаться, не обеспечивает достаточной поддержки для последних улучшений в формах — даже в последней доступной бета-версии IE9. Старые версии IE? Fagetaboutit.

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

---

Инструмент: Модернизатор

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

Modernizr — это небольшая библиотека JavaScript, которая проверяет текущий браузер на наличие множества функций HTML5 и CSS3.

Если вы хотите узнать больше о Modernizr, вы можете ознакомиться с премиум -курсом «Видео-ускоренный курс в Modernizr», доступным на торговой площадке Tuts +.

---

Инструмент: Webforms2

Webforms2 — это библиотека JavaScript от Weston Ruter , которая обеспечивает кросс-браузерную реализацию «предыдущей» формы HTML5, спецификации «WHATWG Web Forms 2.0».

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

---

Виджет: Слайдер

Спецификация описывает ввод диапазона как неточный элемент управления для установки значения элемента в строку, представляющую число .

Вот предварительный просмотр того, как это выглядит в Opera 10.63:

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

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

  var initSlider = function () {			
	 $ ('input [type = range]'). each (function () {
		 var $ input = $ (this);
		 var $ slider = $ ('<div id = "' + $ input.attr ('id') + '" class = "' + $ input.attr ('class') + '"> </ div>') ;
		 var step = $ input.attr ('step');
		
		 $ Input.after ($ слайдер) .hide ();
						
		 $ Slider.slider ({
			 min: $ input.attr ('min'),
			 max: $ input.attr ('max'),
			 step: $ input.attr ('step'),
			 change: function (e, ui) {
				 $ (Это) .val (ui.value);
			 }
		 });
	 });
 }; 

Мы создаем новый элемент < div > для каждого из наших входов диапазона и вызываем ползунок на этом узле. Это связано с тем, что слайдер пользовательского интерфейса jQuery не будет работать, вызывая его непосредственно для элемента ввода.

Обратите внимание, что мы получаем атрибуты от ввода, такие как min, max и step, , и затем используем их как параметры для ползунка. Это помогает нашему резервному слайдеру имитировать настоящий HTML5-слайдер по функциональности.

Далее мы будем использовать Modernizr, чтобы определить, поддерживает ли текущий браузер этот тип ввода. Modernizr добавляет классы к элементу документа ( html ), позволяя вам ориентироваться на определенные функции браузера в вашей таблице стилей. Он также создает глобальный объект JavaScript с одноименным названием, который содержит свойства для каждой функции: если браузер его поддерживает, свойство будет иметь значение true а если нет, то будет false .

Обладая этими знаниями, для определения поддержки типов ввода мы будем использовать Modernizr.inputtypes[type] .

  if (! Modernizr.inputtypes.range) {
	 $ (документ) .ready (initSlider);
 }; 

Если нет поддержки ввода диапазона, мы присоединяем функцию initSlider к document.ready initSlider , чтобы инициализировать нашу функцию после загрузки страницы.

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

---

Виджет: Числовой Спиннер

Процитирую Марка Пилигрима :

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

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

На момент написания статьи он поддерживался браузерами Opera и Webkit; Вот снимок с Opera 10.6.

Поскольку jQuery не предоставляет числовой спиннер, мы вместо этого будем использовать плагин jQuery от Brant Burnett , созданный как виджет jQuery UI.

Мы реализуем ту же технику, что и раньше; создайте функцию для создания счетчика, протестируйте ее с Modernizr и прикрепите функцию к $(document).ready .

  var initSpinner = function () {			
	 $ ('input [type = number]'). each (function () {
		 var $ input = $ (this);
		 $ Input.spinner ({
			 min: $ input.attr ('min'),
			 max: $ input.attr ('max'),
			 step: $ input.attr ('step')
		 });
	 });
 };

 если (! Modernizr.inputtypes.number) {
	 $ (Документ) .ready (initSpinner);
 }; 

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

И наш резервный виджет выглядит так:

---

Виджет: Выбор даты

Существует не менее шести типов ввода для выбора даты.

• Дата
• месяц
• неделя
• время
• дата и время
• и datetime-local

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

На данный момент мы предоставим только запасной вариант для ввода date , используя jQuery UI Datepicker. Не стесняйтесь использовать любой другой плагин, чтобы полностью имитировать функциональность ввода выбора даты HTML5 в вашей реализации.

  var initDatepicker = function () {
	 $ ('input [type = date]'). each (function () {
		 var $ input = $ (this);
		 $ Input.datepicker ({
			 minDate: $ input.attr ('min'),
			 maxDate: $ input.attr ('max'),
			 dateFormat: 'гг-мм-дд'
		 });
	 });
 };

 если (! Modernizr.inputtypes.date) {
	 $ (Документ) .ready (initDatepicker);
 }; 

---

Виджет: Выбор цвета

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

  <input type = "color">

Мы будем использовать плагин ColorPicker jQuery от Stefan Petre , поскольку пользовательский интерфейс jQuery еще не предоставляет базовый пакет.

  var initColorpicker = function () {
	 $ ('input [type = color]'). each (function () {
		 var $ input = $ (this);
		 $ Input.ColorPicker ({
			 onSubmit: функция (hsb, hex, rgb, el) {
				 $ (Эл) .val (шест);
				 $ (Эл) .ColorPickerHide ();
			 }
		 });
	 });			
 };

 если (! Modernizr.inputtypes.color) {
	 $ (Документ) .ready (initColorpicker);
 }; 

И наш результат:

---

Тип входа: Поиск

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

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

Это должно выглядеть так в Safari на OS X:

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

---

Тип ввода: URL и электронная почта

Эти два типа ввода, url и email , используются в целях проверки. Они могут быть особенно полезны в мобильных браузерах, где раскладка экранной клавиатуры может быть изменена в соответствии с целевым полем. Это уже реализовано в Safari на iOS (iPhone, iPad, iPod) и некоторых версиях Android.

Эти типы ввода могут быть реализованы Webforms2 в других браузерах.

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

---

Атрибут: обязательные поля

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

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

Примечание . Обязательно назначьте атрибут name для элементов формы, иначе обязательный атрибут не вступит в силу.

---

Атрибут: Шаблон

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

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

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

---

Атрибут: Автофокус

Атрибут autofocus делает только то, что говорит: автоматически фокусирует один из наших элементов управления. В настоящее время он поддерживается в браузерах на основе Webkit (Safari, Chrome и т. Д.) И Opera. Помните: только один элемент управления формы может получить этот атрибут.

Webforms2 заботится о реализации в неподдерживаемых браузерах.

---

Атрибут: заполнитель

Атрибут placeholder — это то, что мы делали с JavaScript годами. Он добавляет часть информации о поле, например краткое описание, которая исчезает, когда поле сфокусировано.

Этот атрибут поддерживается последними бета-версиями браузеров Firefox и Webkit.

Чтобы имитировать поведение в старых браузерах, мы будем использовать плагин Placehold jQuery от дизайн-лаборатории Viget .

  var initPlaceholder = function () {
	 $ ( 'Вход [заполнитель]') placehold ().
 };

 если (! Modernizr.input.placeholder) {
	 $ (Документ) .ready (initPlaceholder);
 }; 

---

Атрибут: Мин, Макс и Шаг

Атрибуты ввода min, max и step задают ограничения для определенных элементов управления формы, таких как указатель даты, число и диапазон. Вы можете точно угадать назначение min и max по их именам. Атрибут step определяет несколько диапазонов для каждого клика или «шага». Например, если значение шага равно 2, допустимые значения могут быть 0, 2, 4 и т. Д.

Эти атрибуты в настоящее время поддерживаются только браузерами Opera и Webkit и реализованы, как запасной вариант для других браузеров, Webforms2.

---

Вывод

Сегодня мы узнали, что создание форм и предоставление запасного варианта для большинства новых дополнений — довольно простая задача. Если люди все еще пытаются напугать вас использованием HTML5 сегодня, не обращайте на них внимания; начните использовать потрясающие инструменты, которые у вас есть в вашем распоряжении прямо сейчас!

Обязательно ознакомьтесь с отличными html5Widgets от Zoltan «Du Lac » Hawryluk , которые предоставляют аналогичные решения с нативными виджетами JavaScript.

---

Дальнейшее чтение

• 28 особенностей, советов и методов HTML5, которые вы должны знать
• HTML5 и CSS3: методы, которые вы скоро будете использовать / a>




• Раздел «Формы» погружения Марка Пилигрима в HTML5
• Формы в HTML5 в Центре разработчиков Mozilla
• W3C HTML5 Forms Specification Рабочий проект
• Сравнение движков компоновки (HTML5) в Википедии