Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
78
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
4
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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