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

Можно!

Но зачем?

Против

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

• Зона риска

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

08

За!

Масштаб?

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

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

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

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

14

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

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

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

• Приятный UX

15

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

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

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

• Стилизацию

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

16

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

Надёжно

• autofocus

IE 10+

18

Надёжно

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

19

Надёжно

• input type=file accept="MIME" multiple

20

Аккуратно

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

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

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

21

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

• list="" + datalist

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

22

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

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

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

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

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

23

Рано

Рано

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

• datetime, datetime-local

• month, week

• color

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

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

25

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

• true/false:

• autocomplete=""

• spellcheck=""

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

26

Валидация

Нативно

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

• required

• url, tel, number, email

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

28

Pattern

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

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

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

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

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

29

Pattern

<input type="text"

pattern="[0-9]" title="Введите цифровое значение">

30

Нативно

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

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

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

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

31

JS API валидации

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

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

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

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

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

32

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

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

• Parsley.js

• jQuery Validation plugin

• и другие

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

33

Вывод

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

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

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

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

34

Стилизация

Реальность

CSS3 селекторы

Из WHATWG

• :invalid, :valid

37

CSS3 селекторы

Из WHATWG и W3C

• :checked, :not(:checked)

• :disabled, :enabled

38

CSS3 селекторы

Из WHATWG

• :required, :optional

• :read-only, :read-write

39

CSS3 селекторы

• :placeholder

40

CSS3 селекторы

• :placeholder

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

:-webkit-input-placeholder { }

:-moz-placeholder { }

:-ms-input-placeholder { }

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

41

CSS3 селекторы

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

• input[type=email]

• input[required]

• ...

42

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

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

43

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

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

::-webkit-validation-bubble { }

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

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

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

44

Progress

Подробней

45

Без доступа

• date

• range

• number

• color

И снова Webshims Lib

46

Доступность

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

Стандарт Aria

• role="alert"

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

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

• aria-required = "true/false"

• aria-invalid = "true/false"

49

Стандарт Aria

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

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

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

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

Еще aria

50

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

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

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

51

Теперь знаем

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

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

• Стилизация

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

52

Но...

The state of HTML5 forms support

is changing very quickly though,

and continues to improve.

Jan Kleinert

«

55

Forms Boilerplate

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

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

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

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

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

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

56

Профит!

Бонус

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

• <Progress>, <meter>

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

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

59

Бонус

Теория:

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

Практика:

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

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

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

60

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

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

@operatino rhr.me

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