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

6. Можно!

7. Но зачем?

8. Против
• Требует знаний
• Зона риска
• «Мне и так хорошо»
08

10. За!

14. Масштаб?
• Социальные сети
• Персонализированный поиск
• Почта, платёжные системы
• и другие сервисы...
14

15. Счастливый пользователь =
• Удобное заполнение
• Подсказки об ошибках
• Приятный UX
15

16. Поговорим про
• Новые поля и атрибуты
• Валидацию форм
• Стилизацию
• Доступность
16

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

18. Надёжно
• atfcs
uoou
IE 10+
18

19. Надёжно
• input type= u l, t l, n m e (min/max/step = "")
r e ubr
19

20. Надёжно
• input type=file a c p = M M " m l i l
cet"IE utpe
20

21. Аккуратно
• e a l - проблема с локализованными доменами (double-byte)
mi
• pten"^@*[ @*
atr=[ ]@^ ]"
• p a e o d r " - не заменяя label
lchle="
21

22. С обратной совместимостью
• ls="+ dtls
it" aait
Мягкая деградация
22

23. Желательно с полифилом
Не работает в Firefox и IE:
• r n e - плохая деградация
ag
• d t - разный формат даты, плохая стилизация
ae
Простой полифил из Webshims Lib и другие
23

24. Рано

25. Рано
Слабая поддержка браузеров
• datetime, datetime-local
• month, week
• color
• formation, formmethod, formtarget, formenctype - без IE
Тест на поддержку форм
25

26. Полезно знать
• true/false:
• atcmlt="
uoopee"
• selhc="
plcek"
• < u p t - о семантике
otu>
26

27. Валидация

28. Нативно
Минимальный набор для лояльной валидации:
• rqie
eurd
• u l, t l, n m e e a l
r e u b r, m i
(основные браузеры, IE 10+, без Safari и мобильных)
28

29. Pattern
Регулярные выражения:
• p t e n " ^ @ * [ @ * - email
atr=[ ]@^ ]"
• [ - A Z - ] - apha-numeric
az-09+
• ^ a z - ] a z - 0 9 _ . { , 0 $ - username
[-AZ[-AZ--]12}
Больше паттернов
29

30. Pattern
<nu tp=tx"
ipt ye"et
pten"09"tte"вдт цфоо заеи"
atr=[-] il=Веие ирве нчне>
30

31. Нативно
Временно без валидации:
• f r n v l d t = t u / a s " - на кнопку отправки
omoaiae"refle
На велосипеде:
• n v l d t = t u / a s " - на форму
oaiae"refle
31

32. JS API валидации
Все основные браузеры (включая Safari) и IE 10+.
• Смена текста ошибки
• Переопределение вывода ошибок
• Дополнительная валидация
Доступен лёгкий полифил H5F. Подробней об API.
32

33. Строгая валидация
Нативная валидация не рекомендуется, используйте фреймворки:
• Parsley.js
• jQuery Validation plugin
• и другие
Не забываем про валидацию на сервере
33

34. Вывод
Строгость валидации:
• Минимальная - только в HTML
• Средняя - JS API + сервер
• Высокая - Фреймворки + сервер
34

35. Стилизация

36. Реальность

37. CSS3 селекторы
Из WHATWG
• : n a i :valid
i v l d,
37

38. CSS3 селекторы
Из WHATWG и W3C
• : h c e :not(:checked)
c e k d,
• : i a l d, :enabled
dsbe
38

39. CSS3 селекторы
Из WHATWG
• : e u r d, :optional
rqie
• : e d o l :read-write
r a - n y,
39

40. CSS3 селекторы
• :lchle
paeodr
40

41. CSS3 селекторы
• :lchle
paeodr
Везде, кроме Оперы, с помощью проприетарных селекторов:
:wbi-nu-lchle {}
-ektiptpaeodr
:mzpaeodr{}
-o-lchle
:m-nu-lchle {}
-siptpaeodr
Ограничения по свойствам
41

42. CSS3 селекторы
По атрибутам:
• ipttp=mi]
nu[yeeal
• iptrqie]
nu[eurd
• ...
42

43. Частичный доступ
• ошибки валидации
43

44. Частичный доступ
• ошибки валидации
:-ektvldto-ube{}
:wbi-aiainbbl
:-ektvldto-ubemsae{}
:wbi-aiainbbl-esg
:-ektvldto-ubearw{}
:wbi-aiainbbl-ro
:-ektvldto-ubearwcipr{}
:wbi-aiainbbl-ro-lpe
44

45. Progress
Подробней
45

46. Без доступа
• date
• range
• number
• color
И снова Webshims Lib
46

47. Доступность

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

49. Стандарт Aria
• rl=aet
oe"lr"
• a i - i e = "off/polite/assertive"
ralv
• a i - a e l d y = "ID", a i - a e = "ID"
ralbleb ralbl
• a i - e u r d = "true/false"
rarqie
• a i - n a i = "true/false"
raivld
49

50. Стандарт Aria
• a i - u o o p e e = "inline/list/both"
raatcmlt
• a i - a u n w = "num", a i - a u t x = "text"
ravleo ravleet
• a i - a u m x, a i - a u m n = "num"
ravlea ravlei
• + все лучшие практики
Еще aria
50

51. Нативная валидация,
d t и другие HTML5 элементы форм
ae
пока не поддерживаются читалками.
51

52. Теперь знаем
• Новые HTML5 поля и атрибуты
• Валидация форм
• Стилизация
• Доступность
52

54. Но...

55. « The state of HTML5 forms support
is changing very quickly though,
and continues to improve.
Jan Kleinert
55

56. Forms Boilerplate
Стартовый комплект для создания правильных форм
• Примеры использования типов полей
• Лучшие практики и рекомендации
• Базовая разметка и стилизация
• Доступность (Accessability)
Уже на гитхабе — rhr.me/FBP !
56

58. Профит!

59. Бонус
Расширенная версия слайдов на rhr.me/pres/forms
• <Progress>, <meter>
• Рабочие примеры кода
• Больше ссылок →
59

60. Бонус
Теория:
• HTML5 doctor об атрибутах и о типах полей
Практика:
• О стилизации
• Исследования особенностей форм от Wufoo
• Демонстрация HTML5 форм
60

61. Роберт Харитонов
Ведущий верстальщик, Одноклассники
@operatino rhr.me
слайды на rhr.me/pres/forms