Haritonov

260 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
260
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Haritonov

  1. 1. Формы в вебе Роберт Харитонов
  2. 2. Можно!
  3. 3. Но зачем?
  4. 4. Против• Требует знаний• Зона риска• «Мне и так хорошо» 08
  5. 5. За!
  6. 6. Масштаб?• Социальные сети• Персонализированный поиск• Почта, платёжные системы• и другие сервисы... 14
  7. 7. Счастливый пользователь =• Удобное заполнение• Подсказки об ошибках• Приятный UX 15
  8. 8. Поговорим про• Новые поля и атрибуты• Валидацию форм• Стилизацию• Доступность 16
  9. 9. Поля иатрибуты
  10. 10. Надёжно• atfcs uoouIE 10+18
  11. 11. Надёжно• input type= u l, t l, n m e (min/max/step = "") r e ubr 19
  12. 12. Надёжно• input type=file a c p = M M " m l i l cet"IE utpe 20
  13. 13. Аккуратно• e a l - проблема с локализованными доменами (double-byte) mi • pten"^@*[ @* atr=[ ]@^ ]"• p a e o d r " - не заменяя label lchle=" 21
  14. 14. С обратной совместимостью• ls="+ dtls it" aaitМягкая деградация22
  15. 15. Желательно с полифилом Не работает в Firefox и IE:• r n e - плохая деградация ag• d t - разный формат даты, плохая стилизация ae Простой полифил из Webshims Lib и другие 23
  16. 16. Рано
  17. 17. Рано Слабая поддержка браузеров• datetime, datetime-local• month, week• color• formation, formmethod, formtarget, formenctype - без IE Тест на поддержку форм 25
  18. 18. Полезно знать• true/false: • atcmlt=" uoopee" • selhc=" plcek"• < u p t - о семантике otu> 26
  19. 19. Валидация
  20. 20. Нативно Минимальный набор для лояльной валидации:• rqie eurd• u l, t l, n m e e a l r e u b r, m i (основные браузеры, IE 10+, без Safari и мобильных) 28
  21. 21. 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
  22. 22. Pattern<nu tp=tx" ipt ye"etpten"09"tte"вдт цфоо заеи" atr=[-] il=Веие ирве нчне>30
  23. 23. Нативно Временно без валидации:• 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
  24. 24. JS API валидации Все основные браузеры (включая Safari) и IE 10+.• Смена текста ошибки• Переопределение вывода ошибок• Дополнительная валидация Доступен лёгкий полифил H5F. Подробней об API. 32
  25. 25. Строгая валидация Нативная валидация не рекомендуется, используйте фреймворки:• Parsley.js• jQuery Validation plugin• и другие Не забываем про валидацию на сервере 33
  26. 26. Вывод Строгость валидации:• Минимальная - только в HTML• Средняя - JS API + сервер• Высокая - Фреймворки + сервер 34
  27. 27. Стилизация
  28. 28. Реальность
  29. 29. CSS3 селекторы Из WHATWG• : n a i :valid i v l d, 37
  30. 30. CSS3 селекторы Из WHATWG и W3C• : h c e :not(:checked) c e k d,• : i a l d, :enabled dsbe 38
  31. 31. CSS3 селекторы Из WHATWG• : e u r d, :optional rqie• : e d o l :read-write r a - n y, 39
  32. 32. CSS3 селекторы• :lchle paeodr40
  33. 33. CSS3 селекторы• :lchle paeodrВезде, кроме Оперы, с помощью проприетарных селекторов: :wbi-nu-lchle {} -ektiptpaeodr :mzpaeodr{} -o-lchle :m-nu-lchle {} -siptpaeodrОграничения по свойствам41
  34. 34. CSS3 селекторы По атрибутам:• ipttp=mi] nu[yeeal• iptrqie] nu[eurd• ... 42
  35. 35. Частичный доступ• ошибки валидации 43
  36. 36. Частичный доступ• ошибки валидации :-ektvldto-ube{} :wbi-aiainbbl :-ektvldto-ubemsae{} :wbi-aiainbbl-esg :-ektvldto-ubearw{} :wbi-aiainbbl-ro :-ektvldto-ubearwcipr{} :wbi-aiainbbl-ro-lpe 44
  37. 37. ProgressПодробней45
  38. 38. Без доступа• date• range• number• color И снова Webshims Lib 46
  39. 39. Доступность
  40. 40. Черный экран - так выглядет ваш сайт для 39 миллионов людей в мире.
  41. 41. Стандарт 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
  42. 42. Стандарт 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
  43. 43. Нативная валидация, d t и другие HTML5 элементы форм ae пока не поддерживаются читалками.51
  44. 44. Теперь знаем• Новые HTML5 поля и атрибуты• Валидация форм• Стилизация• Доступность 52
  45. 45. Но...
  46. 46. « The state of HTML5 forms support is changing very quickly though, and continues to improve. Jan Kleinert55
  47. 47. Forms Boilerplate Стартовый комплект для создания правильных форм• Примеры использования типов полей• Лучшие практики и рекомендации• Базовая разметка и стилизация• Доступность (Accessability) Уже на гитхабе — rhr.me/FBP ! 56
  48. 48. Профит!
  49. 49. Бонус Расширенная версия слайдов на rhr.me/pres/forms• <Progress>, <meter>• Рабочие примеры кода• Больше ссылок → 59
  50. 50. Бонус Теория:• HTML5 doctor об атрибутах и о типах полей Практика:• О стилизации• Исследования особенностей форм от Wufoo• Демонстрация HTML5 форм 60
  51. 51. Роберт ХаритоновВедущий верстальщик, Одноклассники @operatino rhr.me слайды на rhr.me/pres/forms

×