Оценка эффективности в интернете. Какие формы рекламы «продают».
Формы в вебе
-
Upload
robert-haritonov -
Category
Technology
-
view
262 -
download
3
description
Transcript of Формы в вебе
![Page 2: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/2.jpg)
![Page 3: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/3.jpg)
![Page 4: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/4.jpg)
![Page 5: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/5.jpg)
Можно!
![Page 6: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/6.jpg)
Но зачем?
![Page 7: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/7.jpg)
Против
• Требует знаний
• Зона риска
• «Мне и так хорошо»
07
![Page 8: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/8.jpg)
![Page 9: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/9.jpg)
За!
![Page 10: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/10.jpg)
![Page 11: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/11.jpg)
![Page 12: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/12.jpg)
![Page 13: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/13.jpg)
Масштаб?
• Социальные сети
• Персонализированный поиск
• Почта, платёжные системы
• и другие сервисы...
13
![Page 14: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/14.jpg)
Счастливый пользователь =
• Удобное заполнение
• Подсказки об ошибках
• Приятный UX
14
![Page 15: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/15.jpg)
Поговорим про
• Новые поля и атрибуты
• Валидацию форм
• Стилизацию
• Доступность
15
![Page 16: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/16.jpg)
Поля иатрибуты
![Page 17: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/17.jpg)
Надёжно
• autofocus
IE 10+
17
![Page 18: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/18.jpg)
Надёжно
• input type= url, tel, number (min/max/step = "")
18
![Page 19: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/19.jpg)
Надёжно
• input type=file accept="MIME" multiple
19
![Page 20: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/20.jpg)
Аккуратно
• email - проблема с локализованными доменами (double-byte)
• pattern="[̂ @]*@[̂ @]*"
• placeholder="" - не заменяя label
20
![Page 21: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/21.jpg)
Аккуратно
• search - проблемы со стилизацией
21
![Page 22: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/22.jpg)
С обратной совместимостью
• <meter>
•
• <progress>
•
22
![Page 23: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/23.jpg)
Meter с обратной совместимостью
• <meter>
•
<meter value="0.7"> fallback 77% </meter>
23
![Page 24: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/24.jpg)
С обратной совместимостью
• list="" + datalist
Мягкая деградация
24
![Page 25: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/25.jpg)
Желательно с полифилом
Не работает в Firefox и IE 10+:
• range - плохая деградация
• date - разный формат даты, плохая стилизация
Простой полифил из Webshims Lib и другие
25
![Page 26: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/26.jpg)
Рано
![Page 27: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/27.jpg)
Рано
Слабая поддержка браузеров
• datetime, datetime-local
• month, week
• color
• formaction, formmethod, formtarget, formenctype - без IE
Тест на поддержку форм
27
![Page 28: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/28.jpg)
Грешновато
• x-webkit-speech
28
![Page 29: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/29.jpg)
Полезно знать
• true/false:
• autocomplete=""
• spellcheck=""
• <output> - о семантике
29
![Page 30: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/30.jpg)
Валидация
![Page 31: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/31.jpg)
Нативно
Минимальный набор для лояльной валидации:
• required
• url, tel, number, email
(основные браузеры, IE 10+, без Safari и мобильных)
31
![Page 32: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/32.jpg)
Pattern
Регулярные выражения:
• pattern="[̂ @]*@[̂ @]*" - email
• [a-zA-Z0-9]+ - alpha-numeric
• [̂a-zA-Z][a-zA-Z0-9-_\.]{1,20}$ - username
Больше паттернов
32
![Page 33: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/33.jpg)
Pattern
<input type="text" pattern="[0-9]"
title="Введите цифровое значение">
33
![Page 34: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/34.jpg)
Нативно
Старая школа:
• maxlength="num"
Временно без валидации:
• formnovalidate="true/false" - на кнопку отправки
На велосипеде:
• novalidate="true/false" - на форму
34
![Page 35: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/35.jpg)
JS API валидации
Все основные браузеры (включая Safari) и IE 10+.
• Смена текста ошибки
• Переопределение вывода ошибок
• Дополнительная валидация
Доступен лёгкий полифил H5F. Подробней об API.
35
![Page 36: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/36.jpg)
Строгая валидация
Нативная валидация не рекомендуется, используйте фреймворки:
• Parsley.js
• jQuery Validation plugin
• и другие
Не забываем про валидацию на сервере
36
![Page 37: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/37.jpg)
Вывод
Строгость валидации:
• Минимальная - только в HTML
• Средняя - JS API + сервер
• Высокая - Фреймворки + сервер
37
![Page 38: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/38.jpg)
Стилизация
![Page 39: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/39.jpg)
Реальность
![Page 40: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/40.jpg)
CSS3 селекторы
Из WHATWG
• :invalid, :valid
40
![Page 41: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/41.jpg)
CSS3 селекторы
Из WHATWG и W3C
• :checked, :not(:checked)
• :disabled, :enabled
41
![Page 42: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/42.jpg)
CSS3 селекторы
Из WHATWG и W3C
• :indeterminate checkbox
Подробней
42
![Page 43: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/43.jpg)
CSS3 селекторы
Из WHATWG
• :required, :optional
• :read-only, :read-write
• :out-of-range, :in-range
• :default
43
![Page 44: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/44.jpg)
CSS3 селекторы
• :placeholder
44
![Page 45: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/45.jpg)
CSS3 селекторы
• :placeholder
Везде, кроме Оперы, с помощью проприетарных селекторов:
:-webkit-input-placeholder { }
:-moz-placeholder { }
:-ms-input-placeholder { }
Ограничения по свойствам
45
![Page 46: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/46.jpg)
CSS3 селекторы
По атрибутам:
• input[type=email]
• input[required]
• ...
46
![Page 47: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/47.jpg)
Частичный доступ
• ошибки валидации
47
![Page 48: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/48.jpg)
Частичный доступ
• ошибки валидации
::-webkit-validation-bubble { }
::-webkit-validation-bubble-message { }
::-webkit-validation-bubble-arrow { }
::-webkit-validation-bubble-arrow-clipper { }
48
![Page 49: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/49.jpg)
progress
Подробней
49
![Page 50: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/50.jpg)
Частичный доступ
• <progress> - ширина, 2 состояния
+ проприетарные стили
50
![Page 51: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/51.jpg)
Частичный доступ
• <meter> - ширина, высота, 2 состояния
+ проприетарные стили:
::-webkit-meter-bar
::-moz-meter-bar и другие в FF 16+
51
![Page 52: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/52.jpg)
Без доступа
• date
• range
• number
• color
И снова Webshims Lib
52
![Page 53: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/53.jpg)
Доступность
![Page 54: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/54.jpg)
Черный экран - так выглядет ваш сайт для 39 миллионов людей в
мире.
![Page 55: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/55.jpg)
Стандарт Aria
• role="alert"
• aria-live = "off/polite/assertive"
• aria-labelledby = "ID", aria-label = "ID"
• aria-required = "true/false"
• aria-invalid = "true/false"
55
![Page 56: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/56.jpg)
Стандарт Aria
• aria-autocomplete = "inline/list/both"
• aria-valuenow = "num", aria-valuetext = "text"
• aria-valuemax, aria-valuemin = "num"
• + все лучшие практики
Еще aria
56
![Page 57: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/57.jpg)
Нативная валидация,
date и другие HTML5 элементы форм
пока не поддерживаются читалками.
57
![Page 58: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/58.jpg)
Теперь знаем
• Новые HTML5 поля и атрибуты
• Валидация форм
• Стилизация
• Доступность
58
![Page 59: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/59.jpg)
![Page 60: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/60.jpg)
Но...
![Page 61: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/61.jpg)
The state of HTML5 forms support
is changing very quickly though,
and continues to improve.
Jan Kleinert
«
61
![Page 62: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/62.jpg)
Forms Boilerplate
Стартовый комплект для создания правильных форм
• Примеры использования типов полей
• Лучшие практики и рекомендации
• Базовая разметка и стилизация
• Доступность (Accessability)
Уже на гитхабе — rhr.me/FBP !
62
![Page 63: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/63.jpg)
![Page 64: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/64.jpg)
Профит!
![Page 65: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/65.jpg)
Бонус
Расширенная версия слайдов на rhr.me/pres/forms
• <Progress>, <meter>
• Рабочие примеры кода
• Больше ссылок →
65
![Page 66: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/66.jpg)
Бонус
Теория:
• HTML5 doctor об атрибутах и о типах полей
Практика:
• О стилизации
• Исследования особенностей форм от Wufoo
• Демонстрация HTML5 форм
66
![Page 67: Формы в вебе](https://reader034.fdocuments.net/reader034/viewer/2022051817/548e24a6b4795917128b45f8/html5/thumbnails/67.jpg)
Роберт Харитонов
Ведущий верстальщик, Одноклассники
@operatino rhr.me
слайды на rhr.me/pres/forms