Upload
robert-haritonov
View
262
Download
3
Embed Size (px)
DESCRIPTION
HTML версия слайдов - http://rhr.me/pres/forms/, видео - http://rhr.me/pres/forms/v/. Формы играют большую роль в современном вебе, решая вопросы коммуникации пользователя с веб сервисами и владельцами сайтов. Очень важно подавать их правильно. Я расскажу о лучших практиках и новых технологиях в применении к разработке форм, покажу как можно просто реализовывать сложные вещи. Слайды с доклада про формы на весеннем Форуме Технологий Mail.ru 2013. Слайды в HTML тут - http://rhr.me/pres/forms Видео запись доклада тут - http://rhr.me/pres/forms/v На сайте Форума Технологий - http://techforum.mail.ru/report/83
Citation preview
Формы в вебеРоберт Харитонов
Можно!
Но зачем?
Против
• Требует знаний
• Зона риска
• «Мне и так хорошо»
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