Главная -> Блоги о HTML5 -> Тестирование самых современных браузеров на поддержку Web Forms 2.0

Тестирование самых современных браузеров на поддержку Web Forms 2.0

Как Вы поступаете, если Вам нужно чтобы пользователь указал дату рождения, или, например, свой e-mail? В последнем случае можно использовать тег input типа text, но в первом случае приходится подключать сторонние javascript библиотеки. С приходом HTML5 эта проблема должна решиться! В спецификации HTML5 есть раздел Web Forms 2.0, который описывает новые атрибуты форм, а также новые типы inputов. Цель сегодняшнего тестирования - посмотреть, на сколько хорошо (или плохо?) поддерживают самые современные браузеры продвинутые формы.

В тестировании участвовали: Internet Explorer 9 Platform Preview 6, Firefox 4 beta 7, Opera 11 alpha 1029 и Google Chrome 7.0.517.44.

Компьютер под управлением ОС Windows 7 Ultimate x64.

Был разработан небольшой пример: http://html5blog.ru/examples/webforms.php

В нем используются все типы тега input (search, email, url, tel, range, number, date, time и т.д.), тег datalist (выпадающее меню) и атрибуты autofocus (автоматическая фокусировка на данном элементе при загрузке страницы), placeholder(текст-заглушка), required(обязательное поле) и pattern(регулярные выражения).

Тестирование начнем с браузера Opera 11 Alpha.

Поддержка WebForms 2.0 в браузере Opera 11 Alpha

Как видно из скриншота, данный браузер поддерживает почти все типы тега input, за исключением color, search и tel (хотя на данный момент этот тип даже не представлен в спецификации. Там сказано использовать вместо него использовать атрибут pattern).

Тег datalist выглядит как выпадающее меню, правда поля не подсвечиваются при наведении мышки:

Реализация тега datalist в Opera 11 Alpha

У полей email и url отображаются небольшие иконки, информирующие пользователя о типе формы:

url и email в Opera 11 Alpha

Очень хорошо выполнен тег типа date! Высвечивается небольшой календарик, где Вы можете выбрать дату, причем если указан атрибут step или min то дни, которые нельзя выделить - подсвечены серым цветом:

Выбор даты в Opera 11 Alpha

При указании у тега input типа datetime - появляется 2 окошка - в одном из них можно выбрать число, в другом - время. Все очень удобно. При типе month высвечивается тот же календарик, но выделяются там целые месяцы.

Интересно увидеть в следующих версиях браузера исполнение типа color.

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

Итог: 15 из 21. (то есть 10 типов input, тег datalist, атрибуты min и max у типов range и date, а также атрибуты required и step).

Браузер Google Chrome 7.0.517.44

Реализация WebForms 2.0 в браузере Google Chrome 7

Из скриншота видно, что поддерживаются атрибуты: autofocus (второй элемент сфокусирован) и placeholder (в первом поле введен текст-заглушка). Атрибут required не поддерживается - браузер без проблем позволяет отправлять данные без обязательных полей. Тег datalist не поддерживается - он выглядит также как text.

Теги input типов search, email, url и tel также выглядят как обычный text, хотя было замечено, что при вводе email подсвечиваются адреса электронной почты вводимые ранее, а при вводе url - адреса сайтов. Хотя возможно это не благодаря поддержке WebForms 2.0.

Ползунок работает как надо, хотя на нем нет засечек как в Opera.

Теги input  временных типов поддерживаются, хотя и не выглядят так же эффектно как в Opera. Тут нет никаких календариков - все вводится вручную по шаблону, либо же "нащелкивается" мышкой с помощью специальных кнопок. Атрибуты min и step поддеживаются.

Выбор даты и времени в Google Chrome 7

Тип color также не поддерживается.

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

Итог: 13 из 21.

Браузер Mozilla FireFox 4 beta 7

Реализация WebForms 2.0 в браузере Mozilla Firefox 4 beta 7

Посмотрев на скриншот - остаются двоякие впечатления: с одной стороны работает и автофокус и текст заглушка и очень интересно выполнено поле required

Поле required в Firefox 4 beta 7

Но с другой стороны ни один тип тега input не поддерживается! Похоже в Mozilla еще даже не начали работу над этим.

Итог: 3 из 21.

Браузер Internet Explorer 9 Platform Preview 6.

Реализация WebForms 2.0 в браузере Internet Explorer 9 Platform Preview 6

Из этого скриншота видно, что Microsoft продолжает следовать традиции и ни одина из возможностей WebForms 2.0 не поддерживается. Остается надеяться только что в финальной версии эта ситуация улучшится.

Итог: 0 из 21.

Заметим, что ни один из браузеров пока не поддерживает атрибута pattern (регулярные выражения), который позволяет указывать какие символы можно вводить в тот или иной input.

Выводы: пока ни один браузер не поддерживает WebForms 2.0 на 100%, хотя к этой отметке близко подбирается браузер Opera и, в меньшей степени Google Chrome. Что касается Firefox то Mozilla обещала исправить ситуацию к моменту финального выпуска браузера. С браузером от Microsoft как всегда все плохо, но надежда умирает последней... до выпуска финальной версии еще есть время.

P.S. Мы не стали тестировать браузер Safari, т.к. он построен на том же движке что и Google Chrome, так что в следующем выпуске он должен показывать аналогичные результаты.