Формы в вебеРоберт Харитонов

Можно!

Но зачем?

Против

• Требует знаний

• Зона риска

• «Мне и так хорошо»

07

За!

Масштаб?

• Социальные сети

• Персонализированный поиск

• Почта, платёжные системы

• и другие сервисы...

13

Счастливый пользователь =

• Удобное заполнение

• Подсказки об ошибках

• Приятный UX

14

Поговорим про

• Новые поля и атрибуты

• Валидацию форм

• Стилизацию

• Доступность

15

Поля иатрибуты

Надёжно

• autofocus

IE 10+

17

Надёжно

• input type= url, tel, number (min/max/step = "")

18

Надёжно

• input type=file accept="MIME" multiple

19

Аккуратно

• email - проблема с локализованными доменами (double-byte)

• pattern="[̂ @]*@[̂ @]*"

• placeholder="" - не заменяя label

20

Аккуратно

• search - проблемы со стилизацией

21

С обратной совместимостью

• <meter>

•

• <progress>

•

22

Meter с обратной совместимостью

• <meter>

•

<meter value="0.7"> fallback 77% </meter>

23

С обратной совместимостью

• list="" + datalist

Мягкая деградация

24

Желательно с полифилом

Не работает в Firefox и IE 10+:

• range - плохая деградация

• date - разный формат даты, плохая стилизация

Простой полифил из Webshims Lib и другие

25

Рано

Рано

Слабая поддержка браузеров

• datetime, datetime-local

• month, week

• color

• formaction, formmethod, formtarget, formenctype - без IE

Тест на поддержку форм

27

Грешновато

• x-webkit-speech

28

Полезно знать

• true/false:

• autocomplete=""

• spellcheck=""

• <output> - о семантике

29

Валидация

Нативно

Минимальный набор для лояльной валидации:

• required

• url, tel, number, email

(основные браузеры, IE 10+, без Safari и мобильных)

31

Pattern

Регулярные выражения:

• pattern="[̂ @]*@[̂ @]*" - email

• [a-zA-Z0-9]+ - alpha-numeric

• [̂a-zA-Z][a-zA-Z0-9-_\.]{1,20}$ - username

Больше паттернов

32

Pattern

<input type="text" pattern="[0-9]"

title="Введите цифровое значение">

33

Нативно

Старая школа:

• maxlength="num"

Временно без валидации:

• formnovalidate="true/false" - на кнопку отправки

На велосипеде:

• novalidate="true/false" - на форму

34

JS API валидации

Все основные браузеры (включая Safari) и IE 10+.

• Смена текста ошибки

• Переопределение вывода ошибок

• Дополнительная валидация

Доступен лёгкий полифил H5F. Подробней об API.

35

Строгая валидация

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

• Parsley.js

• jQuery Validation plugin

• и другие

Не забываем про валидацию на сервере

36

Вывод

Строгость валидации:

• Минимальная - только в HTML

• Средняя - JS API + сервер

• Высокая - Фреймворки + сервер

37

Стилизация

Реальность

CSS3 селекторы

Из WHATWG

• :invalid, :valid

40

CSS3 селекторы

Из WHATWG и W3C

• :checked, :not(:checked)

• :disabled, :enabled

41

CSS3 селекторы

Из WHATWG и W3C

• :indeterminate checkbox

Подробней

42

CSS3 селекторы

Из WHATWG

• :required, :optional

• :read-only, :read-write

• :out-of-range, :in-range

• :default

43

CSS3 селекторы

• :placeholder

44

CSS3 селекторы

• :placeholder

Везде, кроме Оперы, с помощью проприетарных селекторов:

:-webkit-input-placeholder { }

:-moz-placeholder { }

:-ms-input-placeholder { }

Ограничения по свойствам

45

CSS3 селекторы

По атрибутам:

• input[type=email]

• input[required]

• ...

46

Частичный доступ

• ошибки валидации

47

Частичный доступ

• ошибки валидации

::-webkit-validation-bubble { }

::-webkit-validation-bubble-message { }

::-webkit-validation-bubble-arrow { }

::-webkit-validation-bubble-arrow-clipper { }

48

progress

Подробней

49

Частичный доступ

• <progress> - ширина, 2 состояния

+ проприетарные стили

50

Частичный доступ

• <meter> - ширина, высота, 2 состояния

+ проприетарные стили:

::-webkit-meter-bar

::-moz-meter-bar и другие в FF 16+

51

Без доступа

• date

• range

• number

• color

И снова Webshims Lib

52

Доступность

Черный экран - так выглядет ваш сайт для 39 миллионов людей в

мире.

Стандарт Aria

• role="alert"

• aria-live = "off/polite/assertive"

• aria-labelledby = "ID", aria-label = "ID"

• aria-required = "true/false"

• aria-invalid = "true/false"

55

Стандарт Aria

• aria-autocomplete = "inline/list/both"

• aria-valuenow = "num", aria-valuetext = "text"

• aria-valuemax, aria-valuemin = "num"

• + все лучшие практики

Еще aria

56

Нативная валидация,

date и другие HTML5 элементы форм

пока не поддерживаются читалками.

57

Теперь знаем

• Новые HTML5 поля и атрибуты

• Валидация форм

• Стилизация

• Доступность

58

Но...

The state of HTML5 forms support

is changing very quickly though,

and continues to improve.

Jan Kleinert

«

61

Forms Boilerplate

Стартовый комплект для создания правильных форм

• Примеры использования типов полей

• Лучшие практики и рекомендации

• Базовая разметка и стилизация

• Доступность (Accessability)

Уже на гитхабе — rhr.me/FBP !

62

Профит!

Бонус

Расширенная версия слайдов на rhr.me/pres/forms

• <Progress>, <meter>

• Рабочие примеры кода

• Больше ссылок →

65

Бонус

Теория:

• HTML5 doctor об атрибутах и о типах полей

Практика:

• О стилизации

• Исследования особенностей форм от Wufoo

• Демонстрация HTML5 форм

66

Роберт Харитонов

Ведущий верстальщик, Одноклассники

@operatino rhr.me

слайды на rhr.me/pres/forms