Полезные сниппеты на HTML5 / Хабр
Эта подборка полезных сниппетов, использующих HTML5, может помочь вам улучшить ваш сайт.Автозаполнение в текстовых полях
Используя HTML5-элементdatalist
вы можете создать текстовое поле с автозаполнением. Очень удобно!<input name="frameworks" list="frameworks" /> <datalist> <option value="MooTools"> <option value="Moobile"> <option value="Dojo Toolkit"> <option value="jQuery"> <option value="YUI"> </datalist>
Поля ввода email, url и tel
В HTML5 появилось множество новых типов для полей ввода, и среди нихemail
, url
и tel
. Они позволяют писать более красивый код, делают за вас всю работу по валидации контента, а так же заставляют мобильные браузеры отображать сенсорную клавиатуру со специальными кнопками (вроде @ и .com) при заполнении этих полей.<input type="url"> <input type="email"> <input type="tel">
Шаблоны на соответствие полей формы регулярному выражению
Раньше вам приходилось использовать JavaScript для валидации контента на фронтэнде. @]+\.[a-zA-Z]{2,6}»> <input type=»password» pattern=»(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}» title=»Не менее восьми символов, содержащих хотя бы одну цифру и символы из верхнего и нижнего регистра»> <input type=»tel» pattern=»(\+?\d[- .]*){7,13}» title=»Международный, государственный или местный телефонный номер»>Кастомное контекстное меню
HTML5 позволяет добавлять элементы в контекстное меню (это то самое меню, которое появляется, если кликнуть правой кнопкой мыши где-нибудь на вашей странице).На момент написания статьи, элемент
ContextMenu
совместим только с Firefox, но можно надеяться, что другие браузеры добавят его поддержку в самое ближайшее время.<section contextmenu="mymenu"> <p>Да, можно кликнуть правой кнопкой прямо здесь.</p> </section> <menu type="context"> <menuitem label="Пожалуйста, не воруйте наши изображения" icon="img/forbidden.png"></menuitem> <menu label="Социальные сети"> <menuitem label="Поделиться на FaceBook"> </menuitem> </menu> </menu>
Видео на HTML5, с резервным Flash-проигрывателем.
Одна из самых больших новых возможностей HTML5, безусловно, его способность воспроизводить видео без использования Flash. Но для старых браузеров, не совместимых с HTML5, вы должны реализовать флэш-проигрыватель, как запасной вариант. В следующем примере показано, как вставитьmp4
и ogv
видео в HTML5, с резервным проигрывателем для старых браузеров.<video controls> <source src="__VIDEO__.MP4" type="video/mp4"> <source src="__VIDEO__.OGV" type="video/ogg"> <object type="application/x-shockwave-flash" data="__FLASH__.SWF"> <param name="movie" value="__FLASH__.SWF"> <param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4"> <img src="__VIDEO__.JPG" alt="__TITLE__" title="Нет возможности воспроизведения видео в вашем браузере"> </object> </video>
Скрытые элементы в HTML5
В HTML5 появился атрибутhidden
, который можно применить к любому элементу. Его действие аналогично CSS-свойству display:none
.<p hidden>Вы не увидите этот текст</p>
Автофокус для текстовых полей
Аттрибутautofocus
позволяет вам установить фокус на определенный элемент при загрузке страницы. Полезно, например, для страниц поиска, авторизации или регистрации.<input autofocus="autofocus">
Предварительная загрузка в HTML5
Jean-Baptiste Jung написал подробную статью о предварительной загрузке в HTML5. Если в кратце — то это простой способ уведомить браузер о том, какие ресурсы скоро могут понадобиться, чтобы он загрузил их заранее (например картинки, подгружаемые аяксом). В приведенном ниже коде реализуется предварительная загрузка изображения.<link rel="prefetch" href="http://www.catswhocode.com/wp-content/uploads/my_image.png">
Воспроизведение аудиофайлов на HTML5
HTML5 может воспроизводить видео и, конечно, он также может воспроизводить аудиофайлы, например, в форматеmp3
. В коде ниже реализуется минималистичный но функциональный аудиоплеер.<audio src="sound.mp3"></audio> <div> <button>Play</button> <button>Pause</button> <button>Volume Up</button> <button>Volume Down</button> </div>
html input
Поле ввода информации
autocomplete
Автозавершение
<input type="text" autocomplete="off" />
disabled
Отключает элемент формы
Данные элемента не уйдут с запросом
<input type="time" disabled />
form
Идентификатор формы, на которую ссылается элемент
<form></form> <input type="text" form="form1" />
maxlength
Максимальная длина значения элемента
Применяется для text, password, url, search, telephone, email
min, max
Диапазон допустимых значений для дат, number и range.
<input type="time" min="17:00" max="22:00" />
pattern
Регулярка для валидации
<input type="color" pattern="#[0-9A-Fa-f]{6}" placeholder="#ffffff" title="color" /> <input type="text" pattern="[0-9]{13,16}" title="13 или 16 цифр кредитки" placeholder="номер карты" />
placeholder
Подсказка
<input type="time" placeholder="подсказка" />
readonly
Элемент доступен только для чтения
<input type="text" value="Not Editable" readonly />
required
Помечает поле как обязательное
Не используется для buttons, range, color, hidden
<input type="email" required />
step
Шаг для полей дат, number, range
<input type="number" step="5" />
type
Тип поля
button — кнопка, ничего не делает, используется для навешивания различных обработчиков
<input type="button" value="кнопка" />
checkbox — флажок
<input type="checkbox" name="remember" value="true" />
colour — поле выбора цвета
<input name="clr" type="color" placeholder="#0 00000" pattern="#[0-9A-Fa-f]{6}" required />
date — поле ввода даты
<input name="date" type="date" placeholder="YYYY-MM-DD" min="1900-01-01" required />
datetime — поле ввода даты со временем в системе utc
<input name="datetime" type="datetime" placeholder="YYYY-MM-DD" min="2010-01-01T00:00Z" max="2011-12-31T23:59Z" required />
datetime-local — поле ввода даты со временем
email — поле ввода электронной почты
Доступные атрибуты
<input type="email" name="email" />
file — поле для закачки файла
Доступные атрибуты:
<input type="file" name="image" accept="image/*" capture /> <input type="file" name="video" accept="video/*" capture /> <input type="file" name="audio" accept="audio/*" capture />
hidden — скрытое поле
<input type="hidden" name="user_id" value="1" />
image —
month — поле ввода месяца с годом
<input name="month" type="month" placeholder="YYYY-MM" min="2010-01" max="2020-01" step="6" required />
number — поле ввода числовых данных
<input type="number" min="0" step="5"> <input type="number" p laceholder="100 to 999" pattern="[1-9][0-9]{2}" min="100" max="999" required />
password — пароль
<input type="password" name="password" />
radio — переключатель
<input type="radio" name="color" value="red" /> <input type="radio" name="color" value="green" />
range — ползунок
reset — кнопка сброса
<input type="reset" value="Очистить эту форму" />
search — поле поиска
submit — кнопка отправки
<input type="submit" value="Отправить эту форму" />
tel — используется для ввода телефонного номера.
week — поле ввода номера недели
<input type="week" name="week" min="2010-W01" max="2020-W02" required />
value
Значение поля
examples
<!-- использование с выпадающим списком --> <input list="data-list-id" /> <datalist> <option value="1 элемент выпадающего списка" /> <option value="2 элемент выпадающего списка" /> <option value="3 элемент выпадающего списка" /> </datalist>
input type=tel – поле ввода телефонного номера (NEW)
ⓘ input type=tel – поле ввода телефонного номера NEW # T
вход
элемент
с атрибутом типа, чей
значение « tel
» представляет однострочный текст
редактирование элемента управления для ввода номера телефона.
Допустимое содержимое #
пустой (пустой элемент)
Разрешенные атрибуты #
глобальные атрибуты & имя & неполноценный & форма & тип★ и автозаполнение и автофокус & список & максимальная длина & шаблон и только для чтения & необходимый & размер & заполнитель & значение
- ⓘ глобальные атрибуты
- Любые атрибуты, разрешенные глобально.
- ⓘ имя = строка #
- Часть имени пары имя/значение, связанная с этим элемент для отправки формы.
- ⓘ отключен = «неполноценный» или «» (пустая строка) или пустая #
- Указывает, что элемент представляет отключенный контроль.
- Значение идентификатор атрибут на форма с которым связать элемент.
- ⓘ тип = «тел» #
- Указывает, что его вход элемент однострочный текстовый элемент управления для ввода номер телефона.
- ⓘ автозаполнение = «включено» или «выключено» НОВЫЙ #
- Указывает, представляет ли элемент ввод элемент управления, для которого UA предназначен для хранения введенного значения пользователем (чтобы UA мог предварительно заполнить форму позже).
- ⓘ автофокус = «автофокус» или «» (пустая строка) или пустая НОВЫЙ #
- Указывает, что элемент представляет элемент управления, к которому UA предназначен для того, чтобы сосредоточить внимание, как только документ загружен.
- ⓘ список = Идентификационная ссылка НОВЫЙ #
- Значение идентификатор атрибут на список данных с которым связать элемент.
- ⓘ максимальная длина = положительное число #
- Максимально допустимая длина значения элемента.
- ⓘ шаблон = шаблон НОВЫЙ #
- Указывает регулярное выражение, по которому UA предназначен для проверки значения элемента управления, представленного его элемент.
Регулярное выражение, которое должен соответствовать JavaScript Узор производства, как указано в [ECMA 262].
- ⓘ только для чтения = «только для чтения» или «» (пустая строка) или пустая #
- Указывает, что элемент представляет элемент управления, значение которого не предназначен для редактирования.
- ⓘ требуется = «необходимый» или «» (пустая строка) или пустая НОВЫЙ #
- Указывает, что элемент является обязательной частью формы подчинение.
- ⓘ размер = положительное число #
- Количество опций, предназначенных для отображения элементом управления представлена его элементом. tel.attrs.placeholder»> ⓘ заполнитель = строка NEW #
- Краткая подсказка (одно слово или короткая фраза), предназначенная для помочь пользователю при вводе данных в элемент управления представлена его элементом.
- ⓘ значение = строка #
- Указывает значение для этого вход элемент.
Дополнительные ограничения и предупреждения #
- Ввод интерактивного элемента не должен появляются как потомки элемента a.
- Ввод интерактивного элемента не должен отображаться как потомок элемента кнопки.
- Любой элемент ввода, потомок элемента метки с атрибутом for должен иметь Значение идентификатора, которое соответствует этому атрибуту.
- Атрибут списка элемента ввода должен ссылаться на элемент списка данных.
- Ввод элемента с типом атрибута чье значение «кнопка» должно иметь непустое значение атрибута.
- Атрибут usemap в элементе ввода устарел. Используйте элемент img вместо элемента ввода для карт изображений.
- Атрибут align элемента ввода устарел. Вместо этого используйте CSS.
Отсутствие тега #
вход элемент является пустым элементом. Вход элемент должен иметь начальный тег но не должен иметь конечный тег.
Разрешенные родительские элементы #
любой элемент, который может содержать элементы фразировки
Номер телефона | Система веб-дизайна США (USWDS)
Шаблоны: создание профиля пользователя
Помогите пользователям ввести свой номер телефона или номера, чтобы обеспечить эффективное общение.
Шаблон номера телефона позволяет пользователям легко вводить свой номер телефона и обеспечивает правильный формат номера телефона.
Об этом шаблоне
Какую проблему он решает?
Люди форматируют свой номер телефона по-разному — с пробелами, дефисами, точками и скобками или без них. Некоторым может быть привычнее указывать только семь цифр. Этот паттерн был разработан, чтобы уменьшить путаницу и разочарование и обеспечить точный вход.
Когда использовать этот шаблон
Используйте этот шаблон, если вам нужно получить номер телефона пользователя. Спрашивайте номер телефона только в том случае, если он вам нужен. Этот шаблон предназначен для поддержки телефонных номеров в США и их определенного формата.
Какое решение?
Помогите пользователям вводить свои телефонные номера в согласованном, правильном и удобном формате. Используйте метку формы и текст подсказки, чтобы показать пользователям ожидаемый формат, а также если вам конкретно нужен номер мобильного телефона в США или с поддержкой SMS. По возможности используйте маскирование ввода и проверку как на стороне клиента, так и на стороне сервера, чтобы убедиться, что введенный ими номер телефона может быть успешно использован для связи с ними в случае необходимости.
Руководство
Что делать
- Сообщите пользователям, зачем вам нужен их номер телефона, почему вы можете связаться с ними и когда.
- Четко укажите, нужен ли вам номер телефона в США.
- Четко укажите, нужен ли вам номер мобильного телефона с поддержкой SMS, например, когда вам нужно отправить код безопасности для подтверждения.
- Используйте четкий текст подсказки и маскировку ввода, чтобы обеспечить правильное форматирование.
- Использовать тип ввода «текст» вместо «числовой».
- Используйте набор полей и легенду, чтобы сгруппировать связанные переключатели вместе, и очистите метки и атрибуты этих элементов формы.
- Рассмотрите возможность использования атрибута автозаполнения при вводе номера телефона, чтобы позволить браузеру автоматически заполнять информацию, если она была введена ранее.
- Предлагайте очень четкие сообщения проверки, чтобы помочь пользователям успешно выполнить требования к формату.
- Разрешить пользователю указывать несколько телефонных номеров, варианты маркировки
Первичный
иВторостепенный
. - Подумайте о том, чтобы предложить дополнительное поле для бизнес-линии или других временных резиденций/убежищ.
- Учитывайте последствия для безопасности пользователей, использующих общие телефоны и ящики голосовой почты. Попросите разрешения оставить потенциально конфиденциальные сообщения.
Чего не делать
- Не требовать от пользователей ввода дефисов или других символов.
- Не разбивать номер телефона на отдельные поля. Отдельные поля имеют высокую стоимость взаимодействия с пользователем
- Не думайте, что ящики голосовой почты являются частными, если это явно не указано в настройках на основе разрешений или в самом сообщении.
10-значный, только для США, например 999-999-9999
Потенциально конфиденциальная информацияДа, вы можете оставить конфиденциальную информацию в голосовой почте или текстовом сообщении
Нет, пожалуйста, не оставляйте конфиденциальную информацию в голосовой почте или текстовых сообщениях
Дополнительный номер телефона10-значный, только для США, например 999-999-9999
Потенциально конфиденциальная информацияДа, вы можете оставить конфиденциальную информацию в голосовой почте или тексте сообщение
Нет, пожалуйста, не оставляйте конфиденциальную информацию в голосовой почте или тексте сообщения
<набор полей>10-значный, только для США, например 999-999-9999<набор полей> <дел>