Тестирование Современных Браузеров На Поддержку Web Forms 2.0 (Html5)

В интернет-анкетах часто требуется вводить специфические данные заранее известного формата, такие как, например, адрес электронной почты, дата рождения или ссылки. Для того, чтобы пользователь ввел эти данные правильно, обычно используются особые приёмы, например несколько полей для одних данных, которые затем на сервере будут объединены и примут нужный вид (дата, время), либо java-скрипты для проверки соответствия данных шаблону. Однако, это требует дополнительных затраты сил со стороны программиста и трафика со стороны пользователя. Сейчас, с помощью полей ввода HTML5 (иначе - Web-forms 2.0) можно избежать таких затрат.

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

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

• текст-заглушка (подсказка):
       <input placeholder="Текст-заглушка">
• регулярное выражение:
       <input pattern="[A-Za-z]{3}" title="Трех-буквенный код страны"/>
• Поле с авто-фокусом
       <input autofocus />
• Поле для emai:
       <input type="email"/>
• Поле для URL:
       <input type="url"/>
• Поле для числа:
       <input type="number"
       min="0"
       max="10"
       step="2"
       value="6"/>
• Числа c ползунком:
       <input type="range"
       min="0"
       max="10" 
       step="2"
       value="6"/>
• Поле с датой:
       <input type="date">
• Поле с датой и временем:
       <input type="datetime">
• Ввод месяца и года:
       <input type="month">
• Ввод недели и года:
       <input type="week">
• Ввод времени:
       <input type="time">
• Поле для поиска:
       <input name="search" type="search">
• Выбор цвета
       <input type="color">
• Обязательное поле:
       <input required>
• поле Datalist:
       <input list="types"/>
       <datalist id="types">
            <option value="Первый">
            <option value="Второй">
            <option value="Третий">
            <option value="Четвертый">
       </datalist>

Далее приведен детальный обзор последних на момент написания статьи браузеров: Chrome 17.0.963.79, Opera 11.61, Firefox 11.0, Internet Eplorer 9.0.

Итак, Chrome v17.0.963.79:

1) Поле с текстом-заглушкой.
Здесь заглушающий текст выводится бледно-серым цветом в поле, пока пользователь не начнет вводить туда свои данные:

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

2) Поле с шаблоном.
В теге задаётся регулярное выражение, которому должны соответствовать введенные в поле данные. Также задаётся подсказка для пользователя, которая видна при наведении мыши на поле или при ошибочной отправке


3) Поле с авто-фокусом. Это значит, что после загрузки страницы это поле сразу окажется в фокусе и готово для ввода. Поддерживается в Chrome. При загрузке поле выглядит так:
 
4) Поле для ввода email. Можно сказать, что браузер поддерживает это поле. Форму отправить не удастся, если введены данные, не соответствуют шаблону id@id:

До отправки данных проверок не производится.

5) Поле для ввода URL. Chrome ведет себя аналогично предыдущему случаю.

Для отправки данных достаточно, чтобы данные в поле подходили под шаблон id:id

6) Поле для числа. Выглядит как счетчик или SpinEdit. Мышкой можно перебрать допустимые варианты

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

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

однако браузер удалит все лишние символы после числа (если таковое было введено) сразу же после потери полем фокуса

7) Ползунок.
Поле также предназначено для чисел, которые можно ввести передвижением ползунка. В примере снова заданы числа от 0 до 10 с шагом 2. На таких числах ползунок движется прерывисто, хотя для пользователя  части отрезка никак не отмечены:

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

поля для:
8) даты,
9) даты-времени,
10) месяца
11) недели
12) времени
здесь не поддерживаются, подробнее рассмотрим их ниже.
 
13) Поле поиска.
Это поле почти ничем не отличается от обычного текстового поля ввода, кроме одной детали: если поле не пустое, справа появляется крестик, нажатием на которое можно быстро его опустошить.


14) Поле для выбора цвета.
В данной версии не поддерживается.

15) Поле, обязательное для заполнения.
В Chrome при загрузке страницы оно ничем не выделено и выглядит так же, как обычное текстовое поле, но отправить форму, не заполнив его, браузер не позволит


16) Поле с вариантами или datalist. Предполагает возможность ввода данных из предлагаемых вариантов
В данной версии не поддерживается.

Рассмотрим далее браузер Opera v11.61

1) Поле с текстом-заглушкой.
Поддерживается в рассматриваемой версии Opera.

Серый текст исчезает при получении полем фокуса.


2) Поле с шаблоном
Поле проверяется перед отправкой формы:


3) Поле с авто-фокусом.
Поддерживается - при загрузке страницы поле в фокусе.


4) Поле для ввода Email.
Здесь так же до отправки данные не проверяются, но отправить строку, не соответствующую шаблону email, браузер не позволяет


5) В основном, поведение аналогично email

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


6) Поле для числа.
Счетчик здесь выглядит так:

и, аналогично, отправка недопустимых данных вызывает ошибку:


7) Ползунок.
Здесь отрезок уже наглядно разделен на части. Отметки соответствуют допустимым числам:

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

8) Поле для ввода даты.
На данный момент только Opera поддерживает поля для ввода даты и времени. Итак, дата вводится с помощью раскрывающегося календаря:

А после выбора дата представлена в формате yyyy-mm-dd

Должно заметить, что на даты также возможно накладывать ограничения, такие как, например, минимальная или максимальная, а также шаг изменения.
То есть, тег может выглядеть так:
<input type="date" />
и на календаре будут доступны для выбора только соответствующие даты.

9) Дата и время.
Дата вводится аналогично прошлому примеру, а время можно ввести перебором SpinEdit или с клавиатуры по маске hh:mm


10) Ввод месяца и года.
Здесь также раскрывается календарь, позволяющий выбрать месяц целиком

а после выбора формат даты yyyy-mm:


11) Ввод недели.
Неделя вводится аналогично:



12) Ввод времени.
см. Дата-время


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

14) Выбор цвета.
На данный момент, также работает только в Opera.
Для ввода открывается палитра стандартных цветов

можно нажать кнопку "Другой" и ввести цвет точнее с помощью палитры windows

после выбора в поле показан образец цвета


15) Обязательное поле.
Поддерживается - отправить форму с пустым полем не получится:


16) Поле datalist.
Можно ввести с клавиатуры свой вариант, а также выбрать из выпадающего списка. Список появляется при получении полем фокуса. Этот список "фильтруется", когда мы вводим первые символы с клавиатуры.

Далее, Firefox 11.0

1) Поле с заглушкой.
Аналогично Opera, виден серый текст, который пропадает при получении фокуса.


2) Поле с шаблоном
Поддерживается в браузере, при ошибке выводится подсказка:


3) авто-фокус.
Также поддерживается:


4-5) Поля для email и URL.
Шаблоны совпадают с соответствующими полями в ранее рассмотренных случаях, однако в Firefox проверка ведется еще до отправки формы. Так, поле с неверными данными подсвечивается цветной рамкой:
email:


url:


и конечно, при попытке отправки неверных данных браузер укажет нам на них:



6-14) Специфические поля для номеров, дат, времени, для поиска и выбора цвета.
Не поддерживаются. Здесь представляют собой обычные текстовые поля.

15) Обязательное поле.
Это поле заметно в Firefox сразу после загрузки страницы - оно выделено цветной рамкой даже без фокуса:

и браузер не позволит отправить форму с пустым обязательным полем:


16) Поле datalist.
Аналогично, возможен ввод и с клавиатуры, и из вариантов.
Если фокус у нашего поля, список появляется по щелчку по нему или нажатию клавиши-стрелки вверх или вниз. Также появляются варианты из списка, первые символы которых совпадают с вводимыми в поле.

И наконец, Internet Eplorer 9.0.

В данной версии нет поддержки ни одного из рассматриваемых полей, однако, по данным сайта wufoo.com, в версии 10 будет поддержка полей plaseholder (текст-подсказка), autofocus, email, URL, search (поиск), range (ползунок) и datalist. Поддержки полей для номеров, дат и цвета не анонсируется.

На странице сайта Modernizr, где можно увидеть в подробностях, что из новых элементов Html5 поддерживает ваш браузер. Здесь среди прочих типов полей ввода присутствует поле для номера телефона tel. Но, хотя на этой странице заявляется, что все рассматриваемые браузеры (кроме Explorer) поддерживают это поле, по сути оно нигде не распозналось как надо и мною не было замечено никаких отличий от обычного текстового поля ввода, то есть пока это поле не работает. Это также подтверждает HTML5-учебник на www.w3schools.com.