— HTML | MDN
Элемент HTML form (<form>
) представляет (собой) раздел документа, содержащий интерактивные элементы управления, которые позволяют пользователю отправлять информацию на веб-сервер.
Можно использовать :valid
и :invalid
CSS псевдоклассы для стилизации <form>
элемента, в зависимости от того, валиден или нет конкретный элемент elements
внутри формы.
Категория содержимого | Flow content |
Разрешённое содержимое | Flow content, но не содержащий <form> элементов |
Пропуск тега | Нет. И открывающий и закрывающий тег должны быть. |
Нормативный документ | HTML5, section 4.10.3 (HTML4.01, section 17.3) |
Как и все HTML элементы, этот элемент поддерживает глобальные атрибуты.
accept
HTML 4 Этот API вышел из употребления и его работа больше не гарантируется.- Список типов содержимого, разделённых запятой, которые принимает сервер. Примечание об использовании: Этот атрибут был удалён в HTML5 и его не следует больше использовать. Взамен, используйте
accept
атрибут заданного<input>
элемента. accept-charset
- Разделённые пробелами символьные кодировки, которые принимает сервер. Браузер использует их в том порядке, в котором они перечислены. Значение по умолчанию означает ту же кодировку что и у страницы.
(В предыдущей версии HTML, различные кодировки могли быть разделены запятыми.) action
- URI-адрес программы, которая обрабатывает информацию переданную через форму. Это значение может быть переписано с помощью атрибута
formaction
на<button>
или<input>
элементе. autocomplete
HTML5- Указывает, могут ли элементы управления автоматически быть дописаны в форме браузером. Эта настройка может быть переписана с помощью атрибута
autocomplete
на элементе формы. Возможные значения:off
: Пользователь должен явно ввести значение в каждое поле или документ предоставит свой собственный метод автодополнения; браузер автоматически не дополняет записи.on
: Браузер может автоматически дополнить значения, основанные на значениях, которые пользователь уже вводил, в течение предыдущего использования формы.
Примечание: Если вы установили значение
off
для
autocomplete
атрибута формы, из-за того, что документ предоставляет своё собственное автодополнение, то вам следует также установить значение
дляautocomplete
каждого<input>
элемента формы, которые документ может автоматически дополнить. Подробнее, смотрите Google Chrome notes. enctype
- Когда значение атрибута method равно
post
, атрибут — MIME тип содержимого, которое используется, чтобы передать форму на сервер. Возможные значения:application/x-www-form-urlencoded
: Значение по умолчанию, если атрибут не задан.multipart/form-data
: Используйте это значение, если пользуетесь элементом<input>
атрибутомtype
установленным в «file».text/plain (HTML5)
Это значение может быть переписано атрибутом
formenctype
на элементе<button>
или<input>
. method
- HTTP метод, который браузер использует, для отправки формы. Возможные значения:
post
: Соответствует HTTP POST методу ; данные из формы включаются в тело формы и посылаются на сервер.get
: Соответствует GET методу; данные из формы добавляются к URI атрибутаaction
, их разделяет ‘?’, и полученный URI посылается на сервер. Используйте этот метод, когда форма содержит только ASCII символы и не имеет побочного эффекта.
Это значение может быть переписано атрибутом
formmethod
на<button>
или<input>
элементе. name
- Имя формы. В HTML 4 его использование запрещено (
id
следует использовать взамен). Оно должно быть уникальным и не пустым среди всех форм в документе в HTML 5. novalidate
HTML5- Это Boolean атрибут показывает, что форма не проверяется на валидность, когда отправляется серверу. Если атрибут пропущен (и поэтому форма проверяется), эта настройка по умолчанию, может быть переписана атрибутом
на<button>
или<input>
элементе, принадлежащем форме. target
- Имя или ключевое слово, показывающее где отображать ответ, который будет получен, после отправки формы. В HTML 4, это имя или ключевое слово для фрейма. В HTML5, это имя или ключевое слово, контекста просмотра (например, вкладка, окно, или линейный фрейм). Следующие ключевые слова имеют специальное значение:
_self
: Загружает ответ в том же самом фрейме HTML 4 (или HTML5 контексте просмотра) как текущий. Это значение по умолчанию, если атрибут не указан._blank
: Загружает ответ в новом безымянном окне HTML 4 или HTML5 контексте просмотра._parent
: Загружает ответ HTML 4 в родительском наборе фрейма для текущего фрейма или HTML5 родительский контекст просмотра для текущего просмотра. Если нет предка, эта опция действует точно так же как as_self
._top
: HTML 4: Загружает ответ в полное, оригинальное окно, закрывая все другие фреймы. HTML5: Загружает ответ в верхний уровень контекста просмотра (т.е., контекст просмотра это предок текущего и не имеет других предков). Если нет предка, эта опция действует точно так же как as_self
.
HTML5: Это значение может быть перезаписано
formtarget
атрибутом на<button>
или<input>
элементе.
Этот элемент реализует HTMLFormElement
интерфейс.
<form action=""> <label for="GET-name">Name:</label> <input type="text" name="name"> <input type="submit" value="Save"> </form> <form action="" method="post"> <label for="POST-name">Name:</label> <input type="text" name="name"> <input type="submit" value="Save"> </form> <form action="" method="post"> <fieldset> <legend>Title</legend> <input type="radio" name="radio"> <label for="radio">Click me</label> </fieldset> </form>
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0[1] | 1.0 (1.7 или ранее) | (Да) | (Да) | (Да) |
novalidate attribute | 1.0 | 4.0 (2.0) | Нет | ? | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | (Да) | 1.0 (1.0) | (Да) | (Да) | (Да) |
novalidate attribute | ? | 4.0 (2.0) | ? | ? | ? |
[1] Интерфейс для автодополнений в Google Chrome может меняться при запросе, в зависимости от утверждения установлен ли autocomplete
со значением off
на <input>
элементах формы, так же как и на самой форме. С одной стороны, когда autocomplete
со значением off
установлен для формы, но при этом не установлен для её <input>
элементов, при запросе пользователя автоматически заполнить поля формы, Chrome может отобразить сообщение «autocomplete has been disabled for this form.» С другой стороны, если и форма и её input элементы имеют
со значением off
, браузер не отобразит это сообщение. По этой причине, вам следует устанавливать атрибуту autocomplete
значение off
для каждого <input>
у которого стоит нестандартное автодополнение.
- Другие элементы, которые используются для создания форм:
<button>
,<datalist>
,<fieldset>
,<input>
,<keygen> (en-US),<label>
,<legend>
,<meter>
,<optgroup>
,<option>
,<output>
,<progress>
,<select>
, <textarea> (en-US).
UX и HTML5: Поможем пользователю заполнить вашу мобильную форму. 4/4
Это четвёртая и последняя статья в серии советов по улучшению UX мобильных форм. Предыдущие части вы найдёте здесь: первая, вторая, третья.
Авто в HTML5: Автоисправление, Автозаполнение, Автокапитализация и Автофокус
В HTML5 есть масса автоматических аттрибутов. Для улучшения мобильного UX нужно решить, что можно перевести в автоматический режим, а что не стоит. Вот несколько основных правил:
- Отключите автоисправление там, где словари слабо справляются: email, номера, имена, адреса, города, регионы, коды местности, номера кредитных карт.
- Отключите аттрибут autocapitalize в полях для email и в других, где он не нужен (например, для ссылок). Помните, что type=email делает это за вас в последних версиях iOS и Android, но отключить функцию всё равно нужно — для старых версий или если type=email не поддерживается.
- Вы можете настроить аттрибут автокапитализации на слова, чтобы первые буквы слов автоматически меняли регистр на прописной — например, для имён или названий мест, но, опять же, используйте его с осторожностью, не забывайте тестировать.
Используйте input type=email для email-адресов. Если вы всё-таки от него отказываетесь, то хотя бы отключите автокапитализацию. Ни один адрес email не начинается с заглавной буквы.
- Для аттрибута input type=tel, настройте autocomplete=tel.
- Вы можете использовать аттрибут autofocus, чтобы элемент управления оказывался в фокусе, как только пользователь загружает страницу. При этом один только факт, что юзер открыл страницу «контакты», не означает, что он готов сразу же начать заполнение вашей формы. Поэтому напоминаем: используйте аттрибут разумно.
Вы можете использовать autofocus, как на этом примере ─ чтобы пользователь сразу же переходил к заполнению первого поля, как только он нажмет на кнопку.
Если вам нужно больше вариантов автозаполнения, полный список вы найдёте на WhatWG Wiki. Только убедитесь, что вы используете именно то, что вам нужно. Внедряйте, тестируйте, и ещё раз тестируйте.
Валидация форм в HTML5
Здесь я не буду вдаваться в технические подробности, но вы должны знать, что в HTML5 есть встроенная API валидация для многих полей. Здорово, если вы решите не использовать библиотеку JavaScript для отображения встроенных сообщений о валидации. Вот основные вещи, которые вам, как UX дизайнеру, нужно знать о валидации форм в HTML5:
- Сообщение о валидации — это элемент управления браузера. Его нельзя стилизовать в CSS, оно будет индивидуально для каждого конкретного браузера.
- Вы можете изменить текст сообщения в JavaScript, используя setCustomValidity.
- CSS3 предоставляет :invalid, :valid, :required и другие псевдо-классы для валидации форм в HTML. Они запускаются, когда фокус уходит с элемента, так что на настоящий момент они довольно бессмысленны.
Нативная валидация форм HTML в браузере Android.
В статье «Валидация нативных форм. Часть 1», Питер-Пол Кох детально рассматривает, почему сейчас валидация в HTML и CSS на самом деле не делает формы лучше.
Offline саппорт для сохранения данных пользователей
Многое может пойти не так, особенно на мобильном устройстве, ошибки случаются. Пользователь может нечаянно нажать на кнопку «назад» и потерять все свои данные.
Поэтому было бы здорово выводить всю информацию, заполненную прежде, если пользователь возвращается на страницу. То же самое относится и к ситуации, когда в работе браузера происходит сбой или пользователь закрывает вкладку. Вы можете отправлять данные пользователя в локальное хранилище или в хранилище сессии, чтобы ничего не пропало, если что-то пойдет не так. Джеффри Крофте создал библиотеку JavaScript для таких ситуаций.
Если соединение прервётся в момент отправки формы, данные могут пропасть. Чтобы этого избежать, вы можете использовать комбинацию ** HTML5 offline API** и Service Workers API для:
- хранения данных в кэше,
- попытки снова автоматически отправить данные, когда соединение восстановится.
Чтобы узнать, как написать под это код, посмотрите статью «Формы, работающие оффлайн».
Возможности мобильного устройства могут прокачать уровень UX
В первой и второй частях мы останавливались на базовых распространенных элементах HTML и на аттрибутах, для улучшения мобильных форм. Но теперь возможности мобильных устройств идут намного дальше простого отображения веб-страниц в HTML, CSS и JavaScript. Эти маленькие девайсы экипированы множеством сенсоров — и многие из них мы можем использовать в нативных приложениях и в вебе, чтобы упростить жизнь нашим пользователям.
Определяем местоположение пользователя
В предыдущем разделе я писала о предзаполнении информации о местах и адресах. Это хорошее начало. И мы можем пойти дальше. Вместо того, чтобы просить пользователя ввести своё местоположение, мы можем определить его автоматически. Встречайте: API геолокации для веба. Нативные API геолокации существуют и в iOS, Android и Windows Phone.
Citymapper — вебсайт и приложение, помогающее пользователям спланировать путешествия. Когда пользователь переходит к первому полю формы, он видит опцию «Использовать настоящее местоположение». Он её выбирает — и появляется запрос на доступ браузера к данным местоположения. Это и есть API геолокации. Затем браузер автоматически заполняет найденное местоположение, и пользователь может заполнять пункт назначения. Нативное приложение работает в основном таким же образом.
Citymapper предлагает настоящее местоположение пользователя в качестве начального пункта путешествия.
Запрашивайте разрешение пользователя обдуманно
В видео выше вы могли заметить, что мне пришлось разрешить доступ к моему местоположению на сайте Citymapper. В браузере пользователь сталкивается с запросом на разрешение от сайта к сайту, от API к API.
Будьте осторожны с тем, как именно вы запрашиваете разрешение. Пользователь может запретить доступ к геолокации, выводу уведомлений или другим элементам API, если вы запросите разрешение на них слишком рано. Также пользователь может запретить доступ, если он не понимает, зачем он вообще нужен. У вас всего один шанс, используйте его с умом. После этого исправиться будет уже практически невозможно. Я — опытный пользователь Android, но даже мне приходится рыться в настройках браузера, когда я хочу отменить разрешения, которые я ранее давала. Представьте, с какими сложностями сталкиваются ваши пользователи.
Вот несколько основных советов, как запрашивать разрешения в вебе:
- Не ведите себя как жутковатый преследователь, охотящийся за местоположением или рассылкой уведомлений: не спрашивайте разрешение сразу, как только пользователь зашел на ваш сайт. Он, может быть, ещё не знает ничего ни о вас, ни о вашем сервисе.
- Позвольте пользователю изучить ваш сайт и сервис, и только затем запрашивайте разрешение в контексте. Если вам нужен доступ к его местоположению, спрашивайте его только тогда, когда оно вам действительно нужно (Citymapper — хороший пример).
- Объясните, зачем вам нужно разрешение и что вы будете делать с полученной информацией.
Citymapper запрашивает доступ к местоположению пользователя только когда оно действительно необходимо. Очистка разрешений, когда пользователь его уже отклонил, может стать проблемой, потому что пользователю придется искать его в настройках для этого вебсайта.
Если вы хотите ещё покопаться в этой теме, то Люк Вроблевски (да-да, снова он) создал прекрасное видео, которое поможет вам с процессом запроса разрешений.
ЧЕКАУТ: улучшаем опыт
Весь UX чекаута при платежах — одна сплошная возможность усовершенствовать форму. И здесь сенсоры устройства могут сделать весь процесс практически безболезненным. Единственной болью станет количество денег, которое пользователь потратит.
Сканер кредитных карт iOS
В предыдущей части я писала об автоматическом определении кредитных карт и фишках автозаполнения, основанных на тех данных, которые пользователь ввел ранее. Это всё ещё означает, что пользователю придется ввести данные кредитной карты как минимум один раз.
Apple вывела этот процесс на новый уровень со своим сканером кредитных карт. Начиная с iOS 8 пользователи Safari могут отсканировать и автоматически заполнить информацию с банковской карты, используя камеру. Для воплощения этой магии в жизнь вам нужно добавить аттрибут автозаполнения cc-number и какое-то имя, чтобы определить это поле как поле для данных карты. Apple особо не дает официальной информации по теме, но кое-кто кое-что протестировал и поместил результат на StackOverflow.
Ещё у Safari есть варианты автозаполнения, которые пользователь может использовать, чтобы добавить данные о своих банковских картах, позволяя использовать их многократно на различных вебсайтах.
Опция сканирования кредитной карты появляется, когда Safari определяет поле, которое соответствует формату кредитной карты. Если пользователь уже регистрировал свою карту в телефоне, он может воспользоваться опцией автозаполнения.
Выведите чекаут на шаг вперед с Google Pay API
Google запустил нечто подобное: Google Pay API. Встроенный в вебсайт, API избавляет от необходимость вводить платежную информацию вручную. Он идёт на шаг впереди: помимо прочего, он может хранить адрес расчетного счета и адрес доставки.
Пользователю открывается диалог в Chrome, где отображается его сохранённая платежная информация. Можно выбрать, какие именно данные использовать, и оплатить товар или услугу напрямую из этого диалога.
Поп-ап Google Pay API в интернет-магазине
Стандартизированная версия запроса платежа API сейчас является кандидатом в рекомендации W3C. Если он будет встроен в браузеры, это позволит пользователям совершать чекаут нажатием одной кнопки, которая будет запрашивать API. Каждый дальнейший шаг будет совершаться с помощью нативных диалогов в браузере.
Упрощаем аутентификацию
В большинстве случаев, мобильные устройства — это личные вещи, которыми не принято делиться с другими людьми. И это открывает некоторые интересные возможности для аутентификации.
Magic link
Я пользуюсь менеджером паролей. Я не помню 99% своих паролей. Все они сгенерированы случайным образом. Чтобы залогиниться в новом рабочем пространстве в Slack, я должна:
открыть свой менеджер паролей,
ввести пароль от него,
найти свой workspace,
cкопировать и вставить пароль в Slack.
Нудный процесс, но Slack мудро предложил вариант получше.
У многих людей почта синхронизирована с телефоном. И Slack это понял. Когда вы добавляете новое рабочее пространство в Slack, вы можете залогиниться с помощью пароля, либо запросить опцию magic link. Если вы выберете второй вариант, Slack отправит «волшебную ссылку» вам на почту. Открываете письмо, кликаете на большой зеленой кнопке и — та-дам! — вы выполнили вход.
За кулисами эта волшебная ссылка содержит маркер аутентификации. Приложение Slack отслеживает это и выполняет аутентификацию, не требуя пароль.
Когда вы используете опцию magic link, Slack отправляет вам письмо со ссылкой, которая позволяет вам войти в ваше рабочее пространство без пароля.
Отпечаток пальца для умной идентификации
Лично я выполняю бóльшую часть своих банковских операций через смартфон. И когда дело касается входа в банковский аккаунт, есть огромная разница между двумя банковскими приложениями, что стоят у меня — French Société Générale и German N26.
В Société Générale есть строка логина и фраза-пароль. Я могу попросить приложение запомнить логин, который состоит из 10 рандомных символов. Я не в состоянии его запомнить сама — для этого я использую менеджер паролей. Но при этом мне всё ещё нужно держать в голове фразу-пароль из 6 символов и вводить ее на специальной клавиатуре. И конечно, порядок цифр меняется каждый раз, когда я выполняю вход. Безопасность, да, я знаю. Кроме того, я обязана каждые три месяца менять эту фразу-пароль. В последний раз, когда мне пришлось это делать, я сделала то же, что и большинство людей: поменяла фразу-пароль на практически такую же, потому что мне не хотелось опять запоминать еще один набор из шести цифр. И, конечно, я была чертовски уверена, что запомню этот пароль — и не ввела его в свой менеджер паролей. Ошибка новичка. Две недели спустя я попыталась залогиниться. Конечно же, я не смогла его вспомнить. После трех неудачных попыток входа мой счет заблокировали. К счастью, я использую этот счёт только как сберегательный. В приложении вы можете запросить новый пароль. Спустя почти неделю банк прислал мне новую фразу-пароль из 6 цифр бумажной почтой на мой домашний адрес в Люксембурге. М-да.
А вот N26 использует в качестве логина мой адрес электронной почты. Его я помню и без менеджера паролей. Когда я хочу выполнить вход, я прикасаюсь пальцем к стартовой кнопке моего Xperia — и дело в шляпе. В фоновом режиме телефон сканирует отпечаток моего пальца и выполняет аутентификацию. Если вдруг это не сработает, я всегда могу ввести пароль вручную.
Одно и то же устройство, два приложения, а какой разный опыт.
Ещё один пример аутентификации через отпечаток пальца в Dropbox.
Всё больше приложений как на Android, так и на iOS теперь предлагают возможность аутентификации через отпечаток пальца. Больше никаких паролей — это интересное и элегантное решение.
Конечно, люди выражают некоторое беспокойство насчет безопасности этого процесса. Национальный институт стандартов и технологий (NIST) считает биометрические данные недостаточно защищенными. Он рекомендует комбинировать биометрику со вторым фактором аутентификации.
Сканеры отпечатков пальцев тоже можно обмануть — да, как в шпионском кино. Вы слышали о самолете, который был вынужден приземлиться, потому что одна женщина узнала о неверности мужа, используя его большой палец для разблокировки телефона, пока он спал?
Распознавание лиц и Face ID
В 2018 Apple выпустила iPhone X с новой функцией face ID. Пользователи теперь могут разблокировать свои iPhone X, используя только своё лицо. Конечно, некоторые телефоны на Android, планшеты и компьютеры на Windows предложили такую функцию раньше. Но когда Apple что-то выпускает, оно становится «фишкой». На данный момент такая технология чаще всего используется для аутентификации, чтобы разблокировать телефон или компьютер.
Вместе с технологией распознавания лиц появились довольно большие вопросы. Прежде всего, некоторые алгоритмы можно обмануть, используя фотографию человека, которые легко найти или хакнуть. Ещё больше беспокойства вызывает расовое и этнокультурное разнообразие. Алгоритмы распознавания лиц не очень хорошо справляется с узнаванием «цветных» людей. Например, темнокожая исследовательница вынуждена была надеть белую маску, чтобы протестировать свой собственный проект. Её зовут Джой Буоламвини и она рассказала об этом опыте на TED talk.
Некоторые программы для распознавания лиц используются на таможнях, чтобы ускорить процесс прохождения границы. Их используют в Новой Зеландии и собираются использовать в Канаде.
Многие из нас в своё время смотрели достаточно научной фантастики, чтобы предвидеть потенциальные последствия масштабного использования технологии распознавания лиц. Используемая вне личного пространства разблокировки телефонов, она может стать причиной серьезных страхов и споров.
Google: регистрация одним нажатием
Если у пользователя есть аккаунт Google, он может насладиться всеми преимуществами регистрации одним нажатием c Google. Не нужно вводить пароль при входе на сайт, пользователю предлагают создать аккаунт во встроенном диалоговом окне. Google предоставляет безопасный аккаунт на основе маркера, он не требует пароля и привязан к основному аккаунту Google. Когда пользователь возвращается на сайт, он уже автоматически залогинен. Если пользователь хранит свои пароли в Smart Lock, то и на остальных устройствах он тоже будет автоматически залогинен.
Диалоговое окно регистрации одним нажатием с Google.
Это решение интересное, оно избавляет пользователя от необходимости заводить пароль. Но при этом пользователю приходится привязываться к Google, и потому такое решение не может быть универсальным.
Заключение
Используя возможности мобильных устройств можно сделать много крутых штук — всё ради того, чтобы помочь пользователям заполнить формы. Создавая формы, мы должны быть главным образом настроены на mobile-first (мобильная версия — в первую очередь); иначе застрянем на хорошо знакомых нам возможностях десктопов.
Не устану повторять, будьте осторожны с возможностями устройств: всегда имейте решение про запас на случай, если сенсор не сработает или пользователь откажется разрешить доступ. Не нужно полагаться исключительно на специальные возможности смартфонов (ну только если вы не делаете приложение-карту, которая целиком полагается на геолокацию).
Всё, я заканчиваю эту длинную и объемную серию статей, в которой я привела вам некоторые общие и практические рекомендации насчет UX и юзабилити. В конце концов, самое главное ─ это ваши формы и ваши пользователи. Некоторые описанные здесь вещи могут не сработать в отношении конкретно ваших пользователей — кто знает? Поэтому, что бы вы ни делали, не верьте мне (или Люку) на слово. Тестируйте решения на реальных пользователях и реальных устройствах. Анализируйте. И затем снова тестируйте. Проведите исследования с вовлечением пользователей и тестирование юзабилити. UX — это не только практические рекомендации и магические рецепты, которые вы копипастите. Придётся адаптировать рецепт, чтобы он заработал именно для вас. Поэтому, вкратце: тестируйте. Тестируйте на реальных устройствах. Тестируйте на настоящих пользователях.
Группировка элементов формы | Руководство по HTML5
Руководство по HTML5
Адам Фриман
12. 5. Отключение отдельных элементов inputПри создании более сложных форм может показаться удобной группировка некоторых элементов, что можно сделать с помощью элемента fieldset
. В таблице 12-8 представлен элемент fieldset
.
Таблица 12-8: Элемент fieldset
Элемент | fieldset |
Тип элемента | Потоковый |
Разрешенные родительские элементы | Любой элемент, который может содержать потоковые элементы, обычно потомок элемента form |
Локальные атрибуты | name , form , disabled |
Содержание | Опционально элемент legend , за которым следует потоковый контент |
Стиль тегов | Открывающий и закрывающий теги |
Новый в HTML5 | Нет |
Изменения в HTML5 | В HTML5 был добавлен атрибут form . См. раздел «Работа с элементами вне формы» далее этой главе для информации по этому атрибуту |
Соглашение по стилям |
|
Вы можете увидеть, как используется элемент fieldset
, в листинге 12-12. Я добавил в этот пример дополнительные элементы input
, чтобы показать, как fieldset
может быть применен к подмножеству элементов в форме.
Листинг 12-12: Использование элемента fieldset
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="shortcut icon" href="favicon. ico" type="image/x-icon" />
</head>
<body>
<form method="post" action="http://titan:8080/form">
<fieldset>
<p>
<label for="name">Name:
<input name="name" /></label></p>
<p>
<label for="name">City:
<input name="city" /></label></p>
</fieldset>
<fieldset>
<p>
<label for="fave1">#1:
<input name="fave1" /></label></p>
<p>
<label for="fave2">#2:
<input name="fave2" /></label></p>
<p>
<label for="fave3">#3:
<input name="fave3" /></label></p>
</fieldset>
<button>Submit Vote</button>
</form>
</body>
</html>
Я использовал элемент fieldset
для группировки двух элементов input
, которые собирают информацию о пользователе, и другой fieldset
для группировки трех элементов input
, которые позволяют пользователю голосовать за три его любимых фрукта. Вы можете увидеть, как браузер отображает стили по умолчанию для элемента fieldset
, на рисунке 12-8.
Рисунок 12-8: Использование элементаfieldset
для группировки элементовinput
Добавление описательной метки для элемента fieldset
Мы сгруппировали наши элементы input
, но у нас все еще нет контекста для пользователей. Это можно исправить, если добавив для каждого из элементов fieldset
элемент legend
. В таблице 12-9 представлен элемент legend
.
Таблица 12-9: Элемент legend
Элемент | legend |
Тип элемента | N/A |
Разрешенные родительские элементы | Элемент fieldset |
Локальные атрибуты | Нет |
Содержание | Фразовый контент |
Стиль тегов | Открывающий и закрывающий теги |
Новый в HTML5 | Нет |
Изменения в HTML5 | Нет |
Соглашение по стилям | legend { display: block; padding-start: 2px;
padding-end: 2px; border: none; } |
Элемент legend
должен быть первым дочерним для элемента fieldset
, как показано в листинге 12-13.
Листинг 12-13: Использование элемента legend
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<form method="post" action="http://titan:8080/form">
<fieldset>
<legend>Enter Your Details</legend>
<p>
<label for="name">Name:
<input name="name" /></label></p>
<p>
<label for="name">City:
<input name="city" /></label></p>
</fieldset>
<fieldset>
<legend>Vote For Your Three Favorite Fruits</legend>
<p>
<label for="fave1">#1:
<input name="fave1" /></label></p>
<p>
<label for="fave2">#2:
<input name="fave2" /></label></p>
<p>
<label for="fave3">#3:
<input name="fave3" /></label></p>
</fieldset>
<button>Submit Vote</button>
</form>
</body>
</html>
На рисунке 12-9 показано, как браузер отображает элементы legend
.
Рисунок 12-9: Использование элемента legend
Отключение группы элементов input при помощи элемента fieldset
Ранее в этой главе я показал вам, как отключить отдельные элементы input
. Вы также можете отключить несколько элементов input
за один шаг, если примените атрибут disabled
к элементу fieldset
. Когда вы это сделаете, все элементы input
, содержащиеся в fieldset
, будут отключены, как показано в листинге 12-14.
Листинг 12-14: Отключение элементовinput
с использованием элементаfieldset
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<form method="post" action="http://titan:8080/form">
<fieldset>
<legend>Enter Your Details</legend>
<p>
<label for="name">Name:
<input name="name" /></label></p>
<p>
<label for="name">City:
<input name="city" /></label></p>
</fieldset>
<fieldset disabled>
<legend>Vote For Your Three Favorite Fruits</legend>
<p>
<label for="fave1">#1:
<input name="fave1" /></label></p>
<p>
<label for="fave2">#2:
<input name="fave2" /></label></p>
<p>
<label for="fave3">#3:
<input name="fave3" /></label></p>
</fieldset>
<button>Submit Vote</button>
</form>
</body>
</html>
На рисунке 12-10 вы можете увидеть результат отключения элементов input
.
Рисунок 12-10: Отключение элементов12.7. Использование элемента buttoninput
с использованием элементаfieldset
Новые поля ввода в HTML5
Практически на каждом сайте можно встретить форму, куда пользователь должен что-то ввести. Это может быть форма регистрации, форма комментариев или подписки.
Для того, чтобы проверять корректность ввода на стороне клиента, без обновления страницы, почти везде используются скрипты, основанные на регулярных выражениях или других строковых проверках. Этот метод обязует разработчика заниматься рутинной работой, чтобы проверить каждое специфичное поле, куда пользователь ввел свои данные.
К счастью, в спецификацию HTML5 были добавлены новые поля и атрибуты полей, который смогут сильно облегчить жизнь разработчикам.
Раньше, к примеру, чтобы проверить правильность ввода Email адреса,
приходилось использовать довольно нетривиальные регулярки, которые, кстати
отталкивают немалый процент новичков. Теперь для этого существует input
type="email"
. А для проверки URL-адреса — input type="url"
.
Новые типы полей пока что не поддерживаются всеми браузерами, но отображаются
корректно. В том случае, когда браузер находит неизвестный ему тип поля, он
заменяет его на простой input type="text"
.
Кроме того, теперь можно указывать обязательные для заполнения поля (с помощью
атрибута required
), задавать автофокус и заменяющий текст, без использования
скриптов.
<form name="example" action="#form-example">
<input type="email" placeholder="Адрес электронной почты" autofocus>
<input type="url" placeholder="Домашняя страцица">
<input type="search" placeholder="Текст для поиска">
<input type="number" min="5" max="50" step="5" value="5" placeholder="Возраст">
<input type="range" max="100" step="2" value="10">
<input type="date" required>
<input type="color" required>
<input type="submit" value="Отправить">
</form>
Пока что, наиболее полную поддержку новых полей сделали в Опере.
Подробнее, советую почитать в статье про «Сумасшедшие формы».
HTML5 Свойства формы
Свойства HTML5 Новая форма
тег в HTML5 <форма> и <ввод> добавляет несколько новых свойств.
<form> новые атрибуты:
- автозаполнения
- NOVALIDATE
<Input> Новые свойства:
- автозаполнения
- автофокусировка
- форма
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- высота и ширина
- список
- мин и макс
- множественный
- шаблон (регулярное выражение)
- заполнитель
- требуется
- шаг
<Форма> / <вход> атрибут автозаполнения
автозаполнения атрибут определяет форму или поле ввода должно иметь автозаполнения.
Когда пользователи начинают печатать в поле автозаполнения, браузер должен отображать параметры для заполнения в этой области.
атрибутавтозаполнения возможно элемент формы включен, а во входной элемент выключен: Совет.
Примечание: автозаполнения применяется <форма> тег, и следующие типы <ввод> тег: текст, поиск, URL, телефон , адрес электронной почты, пароль, datepickers, диапазон и цвет.
Совет: Некоторые браузеры, возможно , потребуется включить функцию автозаполнения, для того , чтобы забрать имущество.
<Форма> NOVALIDATE недвижимость
Логическое свойство NOVALIDATE свойство.
NOVALIDATE атрибут определяет при отправке формы не должны подтверждении правильности формы ввода или домен.
<Input> атрибут автофокусировка
Атрибут автофокусировка является логический атрибут.
Атрибут автофокус определяет при загрузке страницы, домен автоматически получать фокус.
<Input> форма собственности
атрибут определяет поле формы ввода относится к одной или нескольким формам.
Совет: Для того, чтобы цитировать более одной формы, используйте список разделенных пробелами.
<Input> formaction недвижимость
Свойство formaction используется для описания URL представления формы.
Formaction атрибуты переопределение <form> элемент в атрибуте действия.
Примечание: Атрибут formactionтип = «отправить» и тип = «образ».
<Input> свойство formenctype
formenctype атрибут описывает форма передается кодирования данных сервера (только для метода формы вида = «пост» форма)
formenctype Переопределение свойств ENCTYPE атрибутов элементов формы.
Main: Этот тип атрибута = «отправить» и введите = «образ» , используемый в сочетании.
<Input> formmethod недвижимость
formmethod атрибут определяет представление путь формы.
formmethod свойство покрытия <form> атрибут метода элемента.
Примечание: Этот атрибут может использоваться с типом = «отправить» и введите = «образ» , используемый в сочетании.
<Input> formnovalidate недвижимость
NOVALIDATE свойство является Логическое свойство.
NOVALIDATE атрибут описывает элементы <Input> не должны быть проверены, когда форма была отправлена.
formnovalidate атрибуты переопределить NOVALIDATE атрибут <form> элемент.
Примечание: formnovalidate тип атрибута = «отправить для использования с
<Input> formtarget недвижимость
formtarget атрибут указывает имя или ключевое слово, чтобы указать полученные данные изображения после того, как форма будет отправлена.
В formtarget Переопределение свойств <form> целевой атрибут элемента.
Примечание: formtarget тип атрибута = «отправить» и введите = «образ» , используемый в сочетании.
<Input> высота и ширина атрибуты
высота и ширина атрибуты, заданные для типа изображения из <ввода> высоты и ширины тега изображения.
Примечание: высота и ширина свойства применимы только к типу изображения <ввод> тега.
Совет: Изображение будет обычно определяют высоту и ширину атрибутов. Если изображение установить высоту и ширину пространства, необходимого для изображения при загрузке страницы будут сохранены. Без этих атрибутов, браузер не знает размер изображения, и не может выделить соответствующее место. Фотографии в процессе загрузки будет эффект изменения страницы макета (хотя загрузило изображение).
<Input> Свойства списков
DataList атрибут определяет список полей ввода. DataList список опций для полей ввода.
<Input> минимальные и максимальные атрибуты
мин, не более, и шаг атрибуты используются в качестве входных типов, содержащих номера или даты Limited (ограничения).
Примечание: мин, макс, и шаг атрибуты применяются к следующим типам <ввода> тег: выбора даты, числа и дальности полета.
<Input> несколько свойств
множественный атрибут является логический атрибут.
несколько атрибут определяет <вход> элемент для выбора нескольких значений.
Примечание: множественные свойства применимы к следующим типам <ввод> тег: адрес электронной почты и файлов:
<Input> свойство модели
Атрибут шаблон описывает регулярное выражение, используемое для проверки значения элементов <INPUT>.
Примечание: атрибут шаблонприменяется к следующим типам <INPUT> тега: текст, поиск, URL, тел , адрес электронной почты, и пароль.
Совет: Он используется для глобального заголовка атрибута описывает режим.
Совет: Вы можете в нашем JavaScript учебник , чтобы узнать о содержании регулярного выражения
<Input> атрибут заполнитель
Атрибут заполнитель содержит намек (подсказка), описать ожидаемое значение поля ввода.
Краткое напоминание будет отображаться на поле ввода до значения пользовательского ввода.
Примечание: атрибут заполнительотносится к следующим типам <INPUT> тега: текст, поиск, URL, телефон , адрес электронной почты и пароль.
<Input> Обязательный атрибут
Обязательный атрибут является логический атрибут.
Обязательный атрибут указывает, что поле ввода должно быть заполнено (не пустой) перед отправкой.
Примечание: необходимые атрибуты для следующих типов <ввода> тег: текст, поиск, URL, телефон , адрес электронной почты, пароль, дата, номер сборщиков, флажок, радио и файл.
<Input> Атрибуты шага
шаг атрибут для поля ввода указывает интервалы номер юридического.
Если шаг = «3», юридические цифры могут быть -3,0,3,6, и т.д.
Совет: Атрибут шагможет создать региональное значение макс и атрибуты мин.
Примечание: число, диапазон, дата, DateTime: шаг типы , используемые в сочетании со следующим типом атрибута , DATETIME-местный, месяц, время и неделю.
HTML5 <ввод> Тег
标签 | 描述 |
---|---|
<form> | 定义一个form表单 |
<input> | 定义一个 input 域 |
— HTML: язык разметки гипертекста
Элемент HTML представляет раздел документа, содержащий интерактивные элементы управления для отправки информации.
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.
Можно использовать псевдоклассы CSS : valid
и : invalid
для стилизации элемента в зависимости от того, допустимы ли
элементов
внутри формы.
Этот элемент включает глобальные атрибуты.
-
accept
Устарело с HTML5 - Типы содержимого, разделенные запятыми, которые принимает сервер.
Примечание
Этот атрибут был удален в HTML5 и не должен использоваться. Вместо этого используйте атрибут
accept
для элементов -
кодировка приема
- Допустимые кодировки символов, разделенные пробелами.Браузер использует их в том порядке, в котором они перечислены. Значение по умолчанию означает ту же кодировку, что и страница.
(В предыдущих версиях HTML кодировки символов также могли быть разделены запятыми.) -
autocapitalize
Этот API не стандартизирован. - Нестандартный атрибут, используемый iOS Safari, который определяет, как элементы текстовой формы должны быть автоматически преобразованы в заглавные буквы.
автокапитализировать
атрибутов в элементах формы переопределять его на.Возможные значения:
-
нет
: без автоматического использования заглавных букв. -
предложения
(по умолчанию): начинать каждое предложение с заглавной буквы. -
слова
: Начинайте каждое слово с заглавной буквы. -
символа
: все символы должны быть заглавными, т. Е. Прописными.
-
-
автозаполнение
- Указывает, могут ли значения элементов ввода по умолчанию автоматически заполняться браузером.
автозаполнение
атрибутов элементов формы переопределяет его на. Возможные значения:
-
выкл.
: браузер не может автоматически заполнять записи. (Браузеры обычно игнорируют это при подозрительных формах входа; см. Атрибут автозаполнения и поля входа в систему.) -
на
: браузер может автоматически заполнять записи.
-
-
наименование
- Имя формы. Не рекомендуется в HTML 4 (используйте вместо него
id
).Он должен быть уникальным среди форм в документе, а не пустой строкой, как в HTML5. -
отн.
- Создает гиперссылку или аннотацию в зависимости от значения, подробности см. В атрибуте
rel
.
Атрибуты для отправки формы
Следующие атрибуты управляют поведением во время отправки формы.
-
действие
- URL-адрес, по которому обрабатывается отправка формы.Это значение может быть переопределено атрибутом
formaction
в элементе -
enctype
- Если значение атрибута
method
равноpost
,enctype
является MIME-типом отправки формы. Возможные значения:-
application / x-www-form-urlencoded
: значение по умолчанию. -
multipart / form-data
: Используйте это, если форма содержитtype = file
. -
text / plain
: введено HTML5 в целях отладки.
Это значение может быть переопределено
атрибутами formenctype
в элементах -
-
метод
- Метод HTTP для отправки формы.Возможные (без учета регистра) значения:
Это значение переопределяется атрибутами
formmethod
в элементах -
novalidate
- Этот логический атрибут указывает, что форма не должна проверяться при отправке. Если этот атрибут не установлен (и, следовательно, форма проверена как ), он может быть переопределен атрибутом
formnovalidate
в.
элемент, принадлежащий форме. -
цель
- Указывает, где отображать ответ после отправки формы. В HTML 4 это имя / ключевое слово для фрейма. В HTML5 это имя / ключевое слово для контекста просмотра (например, вкладка, окно или iframe). Следующие ключевые слова имеют особое значение:
-
_self
(по умолчанию): загрузить в тот же контекст просмотра, что и текущий. -
_blank
: загрузить в новый безымянный контекст просмотра. -
_parent
: загрузить в родительский контекст просмотра текущего. Если нет родителя, ведет себя так же, как_self
. -
_top
: загрузить в контекст просмотра верхнего уровня (т. Е. Контекст просмотра, который является предком текущего и не имеет родителя). Если нет родителя, ведет себя так же, как_self
.
Это значение может быть переопределено атрибутом
formtarget
в элементеПримечание
Установка
target = "_ blank"
в элементахнеявно обеспечивает то же поведение
rel
, что и установкаrel = "noopener"
, которая не устанавливаетwindow.opener
. -
HTML
<форма>
<метка> Имя:
Таблицы BCD загружаются только в браузере
- Руководство по HTML-формам
- Другие элементы, которые используются при создании форм:
,
,
,
,
,
.
- Получение списка элементов в форме:
HTMLFormElement.elements
- ARIA: роль формы
- ARIA: роль поиска
HTMLFormElement.elements — веб-API | MDN
Свойство HTMLFormElement
элементов
возвращает
HTMLFormControlsCollection
перечисляет все элементы управления формы, содержащиеся в
элемент
. Самостоятельно вы можете получить только
количество элементов управления формой, использующих длину
имущество.
Вы можете получить доступ к определенному элементу управления формой в возвращенной коллекции, используя либо
index или имя элемента
или id
.
До HTML 5 возвращенный объект был HTMLCollection
, на котором
HTMLFormControlsCollection
основан.
Примечание: Аналогичным образом вы можете получить список всех содержащихся форм
в рамках данного документа с использованием формы документа
имущество.
nodeList = HTMLFormElement.элементы
Value
Коллекция HTMLFormControlsCollection
, содержащая все элементы управления, не относящиеся к изображениям, в
форма. Это живая коллекция; если элементы управления формы добавляются или удаляются из формы,
эта коллекция будет обновлена, чтобы отразить изменение.
Элементы управления формы в возвращенной коллекции находятся в том же порядке, в котором они появляются. в форме, выполнив предварительный обход дерева в глубину. Это называется заказ дерева .
Элементы, включенные HTMLFormElement.Элементы
и HTMLFormElement.length
следующие:
Никакие другие элементы не включены в список, возвращаемый elements
, что делает его отличным способом получить элементы, наиболее важные при обработке форм.
Быстрый пример синтаксиса
В этом примере мы видим, как получить список элементов управления формы, а также как доступ к его членам по индексу и по имени или идентификатору.
<форма>
var input = document.getElementById ("моя-форма"). elements;
var inputByIndex = входы [0];
var inputByName = вводы ["имя пользователя"];
Доступ к элементам управления формой
В этом примере получается список элементов формы, затем выполняется итерация по списку в поисках
элементов типа
"текст"
, чтобы некоторые
форма обработки может быть проведена на них.
var input = document.getElementById ("моя-форма"). Elements;
for (i = 0; i
Отключение элементов управления формой
var inputs = document.getElementById ("my-form"). Elements;
for (i = 0; i
Таблицы BCD загружаются только в браузере
Атрибут HTML: rel - HTML: Язык разметки гипертекста
Осадка
Эта страница не завершена.
Атрибут rel
определяет отношения между связанным ресурсом и текущим документом. Действительно для
,
,
и
, поддерживаемые значения зависят от элемента, на котором найден атрибут.
Тип отношений задается значением атрибута rel
, который, если присутствует, должен иметь значение, представляющее собой неупорядоченный набор уникальных ключевых слов, разделенных пробелами.В отличие от имени класса
, которое не выражает семантику, атрибут rel
должен выражать токены, которые семантически действительны как для машин, так и для людей. Текущие реестры для возможных значений атрибута rel
- это реестр отношений ссылок IANA, HTML Living Standard и свободно редактируемая страница существующих rel-values в вики-странице микроформатов, как это предлагается Living Standard. Если используется атрибут rel
, отсутствующий в одном из трех вышеуказанных источников, некоторые валидаторы HTML (например, служба проверки разметки W3C) сгенерируют предупреждение.
В следующей таблице перечислены некоторые из наиболее важных существующих ключевых слов. Каждое ключевое слово в пределах значения, разделенного пробелами, должно быть уникальным в пределах этого значения.
Атрибут rel
относится к элементам
,
,
и
, но некоторые значения относятся только к подмножеству этих элементов .Как и все значения атрибутов ключевого слова HTML, эти значения не чувствительны к регистру.
Атрибут rel
не имеет значения по умолчанию. Если атрибут опущен или если ни одно из значений атрибута не поддерживается, то документ не имеет особых отношений с целевым ресурсом, кроме наличия гиперссылки между ними. В этом случае на
и
, если атрибут rel
отсутствует, не имеет ключевых слов или если нет одного или нескольких ключевых слов, разделенных пробелами выше, то элемент не создает любые ссылки.
и
по-прежнему будут создавать ссылки, но без определенной связи.
Как и все значения атрибутов ключевого слова HTML, эти значения не чувствительны к регистру.
Если имеется несколько
s, браузер использует их атрибуты media
, type
и sizes
для выбора наиболее подходящего значка. Если несколько значков одинаково подходят, используется последний. Если позже окажется, что наиболее подходящий значок не подходит, например, из-за того, что он использует неподдерживаемый формат, браузер переходит к следующему наиболее подходящему и так далее.
Примечание. Apple iOS не использует ни этот тип ссылки, ни атрибут sizes
, как это делают другие мобильные браузеры, для выбора значка веб-страницы для веб-клипа или заполнителя при запуске. Вместо этого он использует нестандартные apple-touch-icon
и apple-touch-startup image
соответственно.
Ярлык Тип ссылки
часто встречается перед значком
, но этот тип ссылки не соответствует требованиям, игнорируется, и веб-авторы не должны больше использовать его .
-
альтернативный
- Указывает альтернативное представление текущего документа. Действительно для ссылки, а и области, значение зависит от значений других атрибутов.
- С ключевым словом
styleheet
в - Если атрибут hreflang отличается от языка документа, он указывает на перевод.
- С атрибутом type он указывает, что указанный документ имеет то же содержимое в другом формате. Например, с
type = "application / rss + xml"
он создает гиперссылку, ссылающуюся на канал распространения. - Оба атрибута hreflang и type определяют ссылки на версии документа в альтернативном формате и на другом языке, предназначенные для других носителей:
Примечание. Устаревшее
rev = "made"
обрабатывается какrel = "alternate"
- С ключевым словом
-
автор
- Указывает автора текущего документа или статьи.Релевантно для элементов
author
создает гиперссылку. Сmailto:
) предоставляет информацию об авторе ближайшего предка<ссылка>
он представляет автора всего документа. -
закладка
- Соответствующая значению атрибута
rel
для элементов -
канонический
- Действительно для
<ссылка>
, он определяет предпочтительный URL для текущего документа, который полезен для поисковых систем. -
dns-prefetch
- Релевантный для элемента
-
внешний
- Относится к
-
помощь
- Соответствующее
help
указывает на то, что ссылка на контент предоставляет контекстно-зависимую справку, предоставляя информацию для родителя. элемента, определяющего гиперссылку, и его дочерних элементов.При использовании в пределах<ссылка>
справка предназначена для всего документа. При включении впо умолчанию
будетhelp
вместо указателя -
значок
-
Действительно с
<ссылка>
, связанный ресурс представляет значок, ресурс для представления страницы в пользовательском интерфейсе для текущего документа.Чаще всего для значка
.используется значение
: значок:Если имеется несколько
media
,type
иsizes
для выбора наиболее подходящего значка. Если несколько значков одинаково подходят, используется последний. Если позже окажется, что наиболее подходящий значок не подходит, например из-за того, что он использует неподдерживаемый формат, браузер переходит к следующему наиболее подходящему значку и так далее.Примечание. Apple iOS не использует ни этот тип ссылки, ни атрибут
sizes
, как это делают другие мобильные браузеры, для выбора значка веб-страницы для веб-клипа или заполнителя при запуске. Вместо этого он использует нестандартныеapple-touch-icon
иapple-touch-startup image
соответственно.Ярлык
Тип ссылки
часто встречается перед значком -
лицензия
-
Действительно для элементов
license
указывает на то, что гиперссылка ведет к документу, описывающему информацию о лицензировании; что основное содержание текущего документа защищено лицензией на авторские права, описанной в указанном документе. Если не внутри элементаПримечание: Хотя синоним
авторских прав
распознается, он неверен, и его следует избегать. -
манифест
- Манифест веб-приложения. Требуется использование протокола CORS для выборки из разных источников.
-
модуль предварительная загрузка
- Полезно для повышения производительности и имеет отношение к
rel = "modulepreload"
указывает браузеру предварительно получить сценарий (и зависимости) и сохранить его на карте модуля документа для дальнейшего использования. оценка.modulepreload
ссылок могут гарантировать, что выборка из сети выполняется с готовым (но не оцененным) модулем в карте модуля до того, как это обязательно понадобится. См. Также типы ссылок:modulepreload
. -
следующая
- В соответствии с
next
указывают, что текущий документ является частью серии, а следующий документ в серии есть ссылка на документ.При включении в -
nofollow
- В соответствии с
nofollow
указывает паукам поисковых систем игнорировать взаимосвязь ссылок. Отношение nofollow может указывать на то, что владелец текущего документа не поддерживает документ, на который имеется ссылка.Его часто включают поисковые оптимизаторы, которые притворяются, что их фермы ссылок не являются страницами для спама. -
Ноопенер
- Соответствует
target
). Другими словами, это заставляет ссылку вести себя как окно.opener
были пустыми, аtarget = "_ parent"
были установлены.Это противоположность открывателю.
-
noreferrer
- Соответствует
Referer
не включается) и создает контекст просмотра верхнего уровня, как если бы Также были установленыноопенер
. -
открывалка
- Создает вспомогательный контекст просмотра, если гиперссылка в противном случае создала бы контекст просмотра верхнего уровня, который не является дополнительным контекстом просмотра (т.е., имеет «
_blank
» в качествецелевого значения атрибута
). Фактически, противоположность noopener. -
пингбэк
- Предоставляет адрес сервера pingback, который обрабатывает pingback-запросы к текущему документу.
-
предварительное соединение
- Указывает, что пользовательский агент должен предварительно подключиться к источнику целевого ресурса.
-
предварительная выборка
- Указывает, что пользовательский агент должен предварительно получить и кэшировать целевой ресурс, поскольку он может потребоваться для последующей навигации.
-
предварительный натяг
- Указывает, что пользовательский агент должен предварительно получить и кэшировать целевой ресурс для текущей навигации в соответствии с потенциальным пунктом назначения, заданным атрибутом
как
(и приоритетом, связанным с соответствующим пунктом назначения). -
предварительная обработка
- Указывает, что пользовательский агент должен предварительно получить целевой ресурс и обработать его таким образом, чтобы в будущем доставлять более быстрый ответ.
-
предыдущая
-
Подобно следующему ключевому слову, относящемуся к
prev
указывают, что текущий документ является частью серии , и что ссылка ссылается на предыдущий документ в серии, является указанным документом.Примечание: синоним
предыдущий
неверен и не должен использоваться. -
поиск
-
В отношении элементов
search
указывает на то, что гиперссылка ссылается на документ, интерфейс которого специально разработан для поиска в текущий документ, сайт и связанные ресурсы, содержащие ссылку на ресурс, который можно использовать для поиска.Если для атрибута
type
установлено значениеapplication / opensearchdescription + xml
, то ресурс представляет собой подключаемый модуль OpenSearch, который можно легко добавить в интерфейс некоторых браузеров, таких как Firefox или Internet Explorer. -
таблица стилей
-
Действителен для элемента
типа
не требуется, поскольку это таблица стилейtext / css
, так как это значение по умолчанию.Если это не таблица стилей типаtext / css
, лучше всего объявить этот тип.Хотя этот атрибут определяет ссылку как таблицу стилей, взаимодействие с другими атрибутами и другими ключевыми терминами в значении rel влияет на то, загружается ли и / или используется ли таблица стилей.
При использовании с ключевым словом alternate, он определяет альтернативную таблицу стилей. В этом случае включите непустой
заголовок
.Внешняя таблица стилей не будет использоваться или даже загружаться, если носитель не соответствует значению атрибута
media
.Требует использования протокола CORS для выборки из разных источников.
-
тег
- Действителен для элементов
tag
атрибутаrel
предназначено для одного документа.
Нестандартные значения
- apple-touch-icon-precomposed
Спецификация | Статус | Комментарий |
---|---|---|
HTML Living Standard Определение атрибута rel в этой спецификации. |
Уровень жизни | Добавлен открывалка . noopener по умолчанию для target = "_ blank" . |
HTML5 Определение атрибута rel в этой спецификации. |
Рекомендация | Добавлен тег , search , prefetch , noreferrer , nofollow , icon и author . Переименовано copyright в license . Удалено начало , раздел , раздел , подраздел и приложение |
Предварительный натяг Определение «предварительного натяга» в этой спецификации. |
Кандидат в рекомендации | Добавлено преднатяга . |
Подсказки к ресурсам Определение «предварительного подключения» в этой спецификации. |
Осадка рабочий | Добавлено dns-prefetch , preconnect и prerender значений. |
HTML 4.01 Спецификация Определение «типов ссылок» в этой спецификации. |
Рекомендация | Добавлено альтернативных , таблица стилей , начало , глава , раздел , подраздел , приложение и закладка .Переименовано предыдущее в предыдущее . Удалено верхних и поиск . |
Неизвестно Определение «<ссылка>» в этой спецификации. |
Неизвестно (Устарело) |
Добавлено верхний , содержание , индекс , глоссарий , авторское право , следующий , предыдущий , помощь и поиск . |
RFC 1866: HTML 2.0 | Неизвестно (Устарело) | Первоначальное определение. |
Таблицы BCD загружаются только в браузере
Атрибуты HTML-формы
В этой главе описываются различные атрибуты элемента HTML
.
Атрибут действия
Атрибут действие
определяет действие, которое должно быть выполнено при отправке формы.
Обычно данные формы отправляются в файл на сервере, когда пользователь нажимает кнопку отправки.
В приведенном ниже примере данные формы отправляются в файл с именем «action_page.php». Этот файл содержит серверный сценарий, который обрабатывает данные формы:
Пример
При отправке отправьте данные формы на "action_page.php":
Попробуй сам "
Совет: Если атрибут action
опущен, действие устанавливается на текущую страницу.
Атрибут цели
Атрибут цели
указывает, куда
отобразить ответ, полученный после отправки формы.
Атрибут цели
может иметь один из
следующие значения:
Значение | Описание |
---|---|
_blank | Ответ отображается в новом окне или вкладке |
_self | Ответ отображается в текущем окне |
_ родительский | Ответ отображается в родительском фрейме |
_top | Ответ отображается во всем теле окна |
имя кадра | Ответ отображается в именованном iframe |
Значение по умолчанию - _self
, что означает, что
ответ откроется в текущем окне.
Пример
Здесь представленный результат откроется в новой вкладке браузера:
Попробуй сам "
Упражнения HTML
Элементы формы HTML
Тег | Описание |
---|---|
<форма> | Определяет HTML-форму для пользовательского ввода |
<вход> | Определяет элемент управления вводом |
Определяет элемент управления многострочным вводом (текстовая область) | |
<метка> | Определяет метку для элемента |
Группирует связанные элементы в форме | |
<легенда> | Определяет заголовок для элемента |
<выбрать> | Определяет раскрывающийся список |
Определяет группу связанных параметров в раскрывающемся списке | |
<опция> | Определяет параметр в раскрывающемся списке |
<кнопка> | Определяет кнопку, на которую можно нажать |
Задает список предопределенных параметров для элементов управления вводом | |
<выход> | Определяет результат вычисления |
Давайте поможем пользователям заполнить вашу мобильную форму (часть 2) - Smashing Magazine
Об авторе
Стефани - дизайнер пользовательского интерфейса и пользовательского интерфейса, а также эксперт в области мобильных технологий.Она специализируется на создании удобных для пользователей мобильных приложений, сложных информационных панелей и адаптивного Интернета ... Больше о Стефани ↬
Это вторая часть из серии об улучшении мобильных форм для пользователей. В первой части мы увидели некоторые общие рекомендации о том, как улучшить читаемость форм для мобильных пользователей, размещение и размер меток, стоимость взаимодействия и работу с ошибками.Во второй части я хочу больше сосредоточиться на мобильных возможностях. HTML5, например, принес нам множество действительно интересных функций , которые помогают пользователям заполнять мобильные формы и форматировать свои данные.Мы подробно рассмотрим, как атрибуты HTML5 могут помочь вам в этом. Затем мы выйдем за рамки «классических» элементов формы и посмотрим, как использовать мобильные возможности, такие как камера, геолокация и сканеры отпечатков пальцев, чтобы действительно вывести вашу мобильную форму на новый уровень на веб-сайтах и в нативных приложениях.
Помощь содержимому пользовательского формата с помощью HTML5
В первой части этой серии мы увидели несколько общих советов о том, как отображать поля. Теперь пора углубиться и посмотреть, как несколько хорошо продуманных строк кода HTML5 могут улучшить ваши мобильные формы.
HTML5 Оптимизация для мобильных устройств
HTML5 открывает целый мир возможностей для оптимизации форм для мобильных и сенсорных устройств. Множество интересных новых типов ввода могут запускать различные клавиатуры, чтобы помочь пользователям. Мы также можем делать некоторые интересные вещи с захватом мультимедиа прямо в браузере.
Ввод числовых данных
тип ввода = число
Атрибут HTML5
ограничивает поле ввода числами.Он имеет встроенную систему проверки, которая отклоняет все, что не является числом.
В некоторых настольных браузерах этот ввод представлен маленькими стрелками справа, которые пользователь может щелкнуть, чтобы увеличить число. На мобильном телефоне открывает клавиатуру с числами , что уменьшает количество опечаток и ошибок проверки формы. Внешний вид ввода зависит от операционной системы.
Слева клавиатура Android, а справа клавиатура iOS с цифрами. (Большой превью)Входные данные должны допускать десятичные и отрицательные числа (но некоторые клавиатуры это поддерживают).Как объясняется в спецификациях W3C, «простой способ определить, следует ли использовать type = number, - это рассмотреть, имеет ли смысл для элемента управления вводом иметь интерфейс счетчика (например, со стрелками« вверх »и« вниз »)». Это означает, что ввод не должен использоваться для кредитных карт или кодов городов.
Шаблон
И inputmode
Атрибуты
Чтобы добавить некоторые ограничения к вашим числовым входам, вы можете использовать атрибут pattern
, чтобы указать регулярное выражение, по которому вы хотите управлять значениями.
Вот как это выглядит:
Вы можете использовать этот шаблон для вызовите цифровую клавиатуру с большими кнопками на iPhone (но не на iPad). На этой клавиатуре нет знака минус или запятой, поэтому пользователи теряют возможность использовать отрицательные числа и десятичные дроби. Кроме того, здесь нельзя переключиться обратно на другую клавиатуру, поэтому будьте осторожны при ее использовании.
Также обратите внимание, что шаблоны могут применяться к любому другому типу входов.
Использование только этого шаблона не работает на большинстве телефонов Android. Вам все равно понадобится комбинация input type = number
и атрибута, чтобы это работало. Демонстрация
= число
, шаблоном
и , режимом ввода
. (Большой предварительный просмотр) inputmode
Если вы хотите активировать только мобильную цифровую клавиатуру, но не хотите иметь дело с беспорядком type = number
и pattern
, вы можете использовать ввод текста и применить атрибут inputmode = numeric.Это будет выглядеть так:
К сожалению (на момент написания), только Chrome 67 Mobile поддерживает это, но он должен прибыть в Chrome Desktop 66 без флага.
Чтобы узнать больше о том, как вводить числа в форму, прочтите «Я хотел ввести число».
тип ввода = тел.
Если вы хотите, чтобы пользователи вводили номер телефона, вы можете использовать тип ввода = тел.Как вы можете видеть на скриншоте ниже, на клавиатуре iOS запускаются те же цифры, что и для атрибута шаблона, описанного выше. Из-за сложности телефонных номеров во всем мире для этого типа ввода нет автоматической проверки.
тип ввода = тел.
на Android и iOS (большой превью) Даты ввода
Даже если это технически числовые данные, даты заслуживают отдельного раздела. Есть несколько типов ввода HTML5 для ввода дат. Наиболее часто используется тип ввода = дата
.Это вызовет выбор даты в поддерживаемых браузерах. Внешний вид средства выбора даты зависит от браузера и ОС. Чтобы узнать больше о том, как браузеры отображают input type = "date"
, я рекомендую вам прочитать «Как сделать input type = date
сложным».
тип ввода = дата
на Android и iOS (большая предварительная версия) Также есть тип = неделя
для выбора недели, тип = время
для ввода времени (с точностью до часа и минуты ) и type = datetime-local
, чтобы выбрать дату и время (используя местное время пользователя).Так много вариантов!
тип ввода = дата
хорошо подходит, например, для интерфейсов бронирования. Однако у вас могут быть некоторые потребности, которые потребуют от вас создания собственного средства выбора даты (как мы уже видели в разделе о разумных настройках по умолчанию). Но input type = date
- это всегда хороший вариант, если вам нужен выбор даты и вы не хотите добавлять на сайт целую библиотеку JavaScript для работы.
Тем не менее, иногда лучше не использовать type = date
для дат. Возьмем, к примеру, дату рождения. Если бы я родился в 1960 году (а я нет - это просто пример), мне потребовалось бы много нажатий, чтобы выбрать дату своего рождения, если бы я начинал с 2018 года. На Android я недавно обнаружил, что если я нажимаю на год в сборщике я получаю что-то вроде выпадающего колеса со всеми годами. Немного лучше, но по-прежнему требует изрядной прокрутки.
Пользователь сказал мне в Twitter:
«Я родился в 1977 году и могу подтвердить раздражение.Чем больше времени требуется для прокрутки, тем старше вы себя чувствуете :-( "
Итак, возможно, даты рождения не лучший кандидат для выбора даты.
С помощью средства выбора даты Android, даже если вы можете нажать и удерживать год, чтобы Чтобы выбрать год, выбрать дату рождения все еще утомительно. (Большой предварительный просмотр)URL, электронная почта, телефон и поиск
Мобильные телефоны скрывают некоторые другие возможности клавиатуры и оптимизации ввода, которые улучшают работу пользователя при заполнении формы. Как говорится, дьявол кроется в деталях.
Использование поля input type = url
вызовет оптимизированную клавиатуру на мобильном устройстве с прямым доступом к / (косая черта). В зависимости от ОС вы также можете предоставить быстрый доступ к обычным доменам верхнего уровня, например .fr
на скриншоте ниже. При длительном нажатии на эту кнопку появятся ярлыки для других доменов верхнего уровня. Это также идет с автоматической проверкой браузера, которая проверяет правильность формата URL.
input type = url
keyboard на Android и iOS (большой превью) input type = emailfield вызывает оптимизированную для электронной почты клавиатуру, дающую быстрый доступ к символу @
.Этот ввод требует наличия @
где-нибудь в поле, чтобы быть действительным. Это единственное подтверждение, которое он делает.
тип ввода = электронная почта
клавиатура на Android и iOS (большой предварительный просмотр) Поле типа ввода = поиск отображает клавиатуру, оптимизированную для поиска. Пользователь может напрямую запустить поиск с помощью кнопки на клавиатуре. Также есть небольшой крестик, чтобы очистить поле и ввести новый запрос.
тип ввода = поиск
клавиатура на Android и iOS (большой предварительный просмотр) Диапазон и цвет
Последние два типа ввода, которые мы рассмотрели, не особенно оптимизированы для мобильных устройств, но, используя их, мы можем избежать загрузки тяжелых пользовательских Библиотеки JavaScript, что удобно для мобильных пользователей.
input type = range предоставляет визуальный ползунок пользовательского интерфейса для ввода числа. Пользовательский интерфейс для этого элемента управления зависит от браузера.
input type = color предоставляет пользователю простой способ ввести значение цвета. Во многих реализациях браузера это идет с палитрой цветов.
тип ввода = диапазон
и тип ввода = цвет
на Android и iOS (большой предварительный просмотр) HTML-захват мультимедиа: съемка и загрузка изображений и запись звука
Я помню времена iPhone 3, когда Apple даже не могла разрешить использование на веб-сайте простого типа ввода = файл
из соображений безопасности.Те времена давно прошли. С помощью API захвата мультимедиа HTML теперь можно получить доступ к различным датчикам устройства. Мы можем снимать фото и видео, и мы даже можем записывать голос прямо в браузере.
Атрибут accept позволяет указать, какой тип мультимедиа принимать на входе: аудио, изображение, видео. Например, пользователь может предоставить браузеру прямой доступ к своей камере.
Код выглядит следующим образом:
Атрибут accept
установлен на image
.Браузер спрашивает, хочу ли я получить доступ к камере напрямую или к файлам на устройстве. (Большой превью) Атрибут захвата позволяет указать предпочтительный режим захвата. Если вы добавите атрибут capture
поверх атрибута accept
, вы можете заставить браузер открывать камеру или диктофон напрямую.
// открывает камеру>
// открывает камеру в режиме видео
// открывает диктофон
Мобильный браузер напрямую открывает механизм захвата: слева камера, справа видеорегистратор.(Большой превью) Для получения дополнительных сведений о том, как использовать мультимедиа непосредственно в браузере, прочтите раздел «Доступ и обработка изображений, видео и аудио непосредственно в браузере» в моей статье о секретных возможностях мобильных браузеров.
HTML5 Авто: автозамена, автозаполнение, автозаполнение, автокапитализация и автофокус
HTML5 поставляется с множеством автоматических атрибутов. Чтобы улучшить мобильность, вам нужно хорошо понимать, что можно автоматизировать, а что нельзя. Вот несколько общих практических правил:
- Отключить автозамену для вещей, для которых словарь слабый : адреса электронной почты, номера, имена, адреса, города, регионы, коды городов, номера кредитных карт.
- Отключите автокапитализацию для полей электронной почты и других полей, где это необходимо (например, URL-адресов веб-сайтов). Обратите внимание, что
type = email
выполняет эту работу за вас в последних версиях iOS и Android, но все равно отключите его для более старых версий или еслиtype = email
не поддерживается. - Вы можете установить для атрибута autocapitalize значение
слов
, чтобы автоматически заглавных букв первой буквы каждого слова , вводимого пользователем. Это может быть полезно для имен, мест и тому подобного, но, опять же, будьте осторожны с этим и проверьте его.
= адрес электронной почты
для адресов электронной почты. Если вы этого не сделаете, отключите хотя бы автоматический ввод заглавных букв. Ни один адрес электронной почты не начинается с заглавной буквы. (Большой превью) - Для
input type = tel
установитеautocomplete = "tel"
. - Вы можете использовать
autofocus
, чтобы дать фокус элементу управления, когда пользователь загружает страницу. Но то, что пользователь открывает страницу «контактов», не означает, что он готов сразу перейти к первому полю вашей формы.Так что, опять же, используйте его с умом.
с автофокусировкой
, чтобы сразу перейти к первому полю после нажатия кнопки. (Большой превью) Если вам нужны дополнительные параметры автозаполнения, их список можно найти на WhatWG Wiki. Просто убедитесь, что вы используете правильные. Внедряйте, тестируйте и снова тестируйте.
Проверка формы HTML5
Я не буду вдаваться в технические подробности, но вы должны знать, что HTML5 имеет встроенный API проверки формы для многих полей.Хорошо, если вы не хотите использовать библиотеку JavaScript для отображения сообщений встроенной проверки. Вот основные вещи, которые вам, как UX-дизайнеру, нужно знать о проверке форм HTML5:
Проверка собственных форм HTML в браузере Android (большой предварительный просмотр)В «Проверка собственных форм, часть 1» Питер-Пол Кох подробно описывает почему проверка форм HTML и CSS на самом деле не делает формы лучше в настоящее время.
Автономная поддержка для сохранения пользовательских данных
Многие вещи могут пойти не так, особенно на мобильных устройствах.Ошибки случаются. Пользователь может неправильно нажать кнопку «Назад» в браузере и потерять все свои данные.
Если пользователь вернется на страницу, было бы неплохо снова отобразить его данные . То же самое происходит в случае сбоя браузера или закрытия вкладки пользователем. Вы можете хранить данные пользователя в локальном или сеансовом хранилище , чтобы ничего не потерялось, если что-то пойдет не так. Джеффри Крофте написал библиотеку JavaScript, чтобы помочь вам в этом.
Если соединение потеряно во время отправки формы пользователем, они также могут потерять данные.Чтобы избежать этого, вы можете использовать комбинацию ** HTML5 offline API ** и Service Workers API , чтобы:
- сохранить данные в кеше,
- попытаться автоматически отправить их снова, когда соединение восстановится. .
Чтобы узнать, как это кодировать, ознакомьтесь со статьей «Офлайн-дружественные формы».
Возможности мобильных устройств могут вывести опыт на новый уровень
В части 1 мы остановились на основных общих элементах и атрибутах HTML-форм для улучшения мобильных форм.Но возможности мобильных устройств теперь выходят далеко за рамки отображения веб-страниц HTML, CSS и JavaScript. Эти маленькие устройства оснащены множеством датчиков . И мы сможем использовать многие из них в собственных приложениях и в Интернете, чтобы сделать жизнь наших пользователей намного проще.
Определение местоположения пользователя
В предыдущем разделе я писал о предварительном заполнении информации о местах и адресах. Хорошее начало. Мы можем пойти еще дальше. Вместо того, чтобы просить пользователей ввести местоположение, мы можем обнаружить его .Познакомьтесь с API геолокации в Интернете. Существуют также собственные API-интерфейсы геолокации для iOS, Android и Windows Phone.
Citymapper - это веб-сайт и приложение, которое помогает пользователям планировать свои путешествия. Когда пользователь входит в первое поле, он видит опцию «Использовать текущее местоположение». Если они выберут его, им будет предложено разрешить браузеру доступ к их геолокационным данным. Это API геолокации. Затем браузер автоматически заполняет найденное местоположение, и пользователь может перейти к полю назначения.Собственное приложение работает примерно так же.
Будьте умны, запрашивая разрешение у пользователя
Вы могли заметить в предыдущем видео, что я должен был согласиться предоставить доступ к моей позиции веб-сайту Citymapper. В браузере пользователь обрабатывает разрешения веб-сайта по веб-сайту, API по API.
Вы также должны быть осторожны, когда вы запрашиваете разрешение . Пользователь может отказать в доступе к геолокации, уведомлению или другому API, если вы спросите слишком рано. Они также могут отказать, если не поймут, зачем вам это разрешение. У вас есть один шанс; используйте его с умом . После этого вылечиться будет практически невозможно. Я опытный пользователь Android, и даже мне приходится искать параметры в моем браузере, когда я хочу сбросить разрешения, которые я предоставил веб-сайту. Представьте себе проблемы, с которыми столкнутся ваши пользователи.
Вот несколько общих советов по запросу разрешений в Интернете:
- Не будьте жуткими с точки зрения геолокации или уведомлений: Не спрашивайте разрешения, как только пользователь заходит на ваш сайт .Они могут еще не знать о вас или ваших услугах.
- Позвольте пользователю открыть для себя ваш веб-сайт и услуги. Затем запрашивает разрешение в контексте . Если вы хотите получить доступ к их местоположению, спрашивайте их только тогда, когда вам это нужно (Citymapper - хороший пример).
- Объясните , зачем вам нужно разрешение и что вы будете с ним делать .
Если вы хотите пойти дальше, Люк Вроблевски (да, он снова) создал хорошее видео, чтобы помочь вам с процессом запроса разрешения.
Улучшенный опыт оформления заказа
Большой областью улучшения форм является весь процесс оплаты при оформлении заказа. Опять же, датчики на устройстве могут сделать это почти безболезненным. Единственной проблемой будет сумма денег, которую тратит пользователь.
Сканер кредитных карт iOS
В предыдущем разделе я писал об автоопределении кредитных карт и функциях автозаполнения на основе предыдущего ввода данных пользователем.Это по-прежнему означает, что пользователь должен ввести данные своей кредитной карты хотя бы один раз.
Apple подняла этот уровень на новый уровень, выпустив сканер кредитных карт . Начиная с iOS 8 в Safari, пользователи могут использовать свою камеру для сканирования и автозаполнения информации о своей кредитной карте. Чтобы выполнить это волшебство, вам нужно будет добавить атрибут autocomplete cc-number
и какое-то имя, чтобы идентифицировать его как поле кредитной карты. У Apple не так много официальной информации об этом, но некоторые люди провели некоторое тестирование и выложили результаты в StackOverflow.
Safari также имеет параметры автозаполнения, которые пользователи могут использовать для добавления своей кредитной карты, что позволяет им повторно использовать ее на нескольких веб-сайтах.
Параметр сканирования кредитной карты появляется, когда Safari обнаруживает поле, соответствующее формату кредитной карты. Если у пользователя уже есть карта, зарегистрированная в телефоне, он может использовать опцию автозаполнения. (Большой превью)Сделайте заказ еще один шаг вперед с Google Pay API
Google запустил нечто похожее: Google Pay API. При внедрении на веб-сайте API устраняет необходимость вручную вводить платежную информацию .Он идет еще дальше: он также может хранить адреса для выставления счетов и доставки.
Пользователь получает диалоговое окно в Chrome, в котором отображается различная сохраненная платежная информация. Они могут выбрать, какой из них использовать, и могут заплатить напрямую через диалоговое окно .
Всплывающее окно API Google Pay, появляющееся на веб-сайте электронной коммерции (Источник) (Большой предварительный просмотр)Стандартизированная версия API запроса оплаты в настоящее время является кандидатом в рекомендацию W3C. Если это будет реализовано в браузерах, это позволит пользователям оформлять заказ с помощью одной кнопки, которая запрашивает API.Каждый последующий шаг будет обрабатываться встроенными диалогами браузера.
Упрощение аутентификации
Мобильные телефоны в большинстве случаев являются личными устройствами, которыми люди обычно не делятся с другими. Это открывает некоторые интересные возможности для аутентификации.
Magic Link
Я использую менеджер паролей. Я не знаю 99% своих паролей. Все они генерируются случайным образом. Чтобы войти в новую рабочую область Slack, я должен:
- открыть мой менеджер паролей,
- ввести мой главный пароль,
- выполнить поиск рабочей области,
- скопировать и вставить пароль в приложение Slack.
Это утомительный процесс, но Slack был достаточно умен, чтобы предложить лучший вариант.
Многие пользователи синхронизируют почту на своем телефоне. Slack это понимал. Когда вы добавляете новое рабочее пространство Slack в приложение, вы можете либо войти в систему, используя пароль, либо попросить опцию «волшебная ссылка». Если вы выберете последнее, Slack отправит волшебную ссылку на ваш почтовый ящик . Открываем почту, нажимаем на большую зеленую кнопку и - та-да! - вы вошли в систему.
За кулисами эта волшебная ссылка содержит токен аутентификации.Приложение Slack улавливает это и аутентифицирует вас, не запрашивая пароль.
При использовании опции «волшебная ссылка» Slack отправляет вам электронное письмо со ссылкой, которая позволяет подключиться к вашему Slack без необходимости вводить пароль. (Большой превью)Отпечаток пальца для интеллектуальной идентификации
Почти все банковские операции я выполняю на своем мобильном устройстве. А когда дело доходит до входа в мои банковские счета, есть огромная разница между моим французским банковским приложением Societe General и немецким приложением N26.
В Société Générale у меня есть строка входа и кодовая фраза. Я могу попросить приложение запомнить строку входа в систему, состоящую из 10 случайных цифр. Я не могу вспомнить этого; Я использую для этого менеджер паролей. Я все еще должен запомнить и ввести шестизначную парольную фразу на специально созданной клавиатуре. Конечно, позиции номеров меняются каждый раз, когда я вхожу в систему. Безопасность - да, я знаю. Кроме того, я должен менять эту парольную фразу каждые три месяца. В прошлый раз, когда меня заставили изменить кодовую фразу, я поступил так же, как и большинство людей: выбрал почти ту же парольную фразу, потому что мне не нужно было запоминать еще одно шестизначное число.И, конечно, я был чертовски уверен, что запомню его, поэтому не ввел его в свой менеджер паролей. Ошибка новичка. Через две недели я попытался авторизоваться. Конечно, забыл. Я сделал три неудачных попытки, после чего моя учетная запись была заблокирована. К счастью, я использую этот счет только для сбережений. В приложении вы можете запросить новый пароль. Банку потребовалась почти одна неделя, чтобы отправить мне новую шестизначную кодовую фразу бумажной почтой на мой домашний адрес в Люксембурге. Ага.
N26, с другой стороны, использует мой адрес электронной почты в качестве строки для входа.Я могу вспомнить это без менеджера паролей. Когда я хочу войти в систему, я кладу палец на кнопку запуска на телефоне Xperia, и все. В фоновом режиме мой телефон сканирует мой отпечаток пальца и аутентифицирует меня. Если это не сработает, я могу вернуться к паролю.
Одно и то же устройство, два приложения, два совершенно разных опыта. У
Dropbox есть еще один пример аутентификации по отпечатку пальца. (Большой превью)Все больше и больше приложений на Android и iOS теперь предлагают пользователю возможность аутентификации с помощью отпечатка пальца .Больше никаких паролей - интересное и элегантное решение.
Конечно, люди выражали некоторые опасения по этому поводу. Национальный институт стандартов и технологий (NIST) считает, что биометрия недостаточно безопасна. Он рекомендует комбинировать биометрию со вторым фактором аутентификации.
Дактилоскопические датчики тоже можно обмануть - да, как в шпионских фильмах. Вы слышали о самолете, который был вынужден приземлиться из-за того, что женщина узнала об измене своего мужа после того, как большим пальцем разблокировала его телефон, пока он спал?
Распознавание лиц и идентификатор лица
В 2018 году Apple выпустила iPhone X с новым идентификатором лица.Пользователи могут разблокировать свой iPhone X с помощью лица . Конечно, некоторые другие телефоны Android, планшеты и компьютеры с Windows предлагали эту функцию раньше. Но когда Apple что-то запускает, это становится «вещью». На данный момент эта технология в основном используется в качестве аутентификации для разблокировки телефонов и компьютеров.
Есть несколько довольно серьезных проблем с технологией распознавания лиц. Во-первых, некоторые алгоритмы можно обмануть изображением человека, которое легко взломать.Еще одна большая проблема - разнообразие. Алгоритмы распознавания лиц, как правило, испытывают трудности с распознаванием цветных людей. Например, чернокожая исследовательница должна была надеть белую маску, чтобы проверить свой собственный проект. Исследователь - Джой Буоламвини, она выступила на TED с докладом об этой проблеме.
Некоторое программное обеспечение для распознавания лиц также используется некоторыми таможенными службами для ускорения прохождения границы. Он используется в Новой Зеландии и будет использоваться в Канаде.
Большинство из нас видели достаточно научной фантастики, чтобы увидеть потенциальные проблемы и последствия систем, использующих распознавание лиц в большом масштабе.Такая технология, используемая за пределами личного пространства для разблокировки телефонов, может стать противоречивой и пугающей.
Google: регистрация в одно касание
Если у пользователя есть учетная запись Google, он может воспользоваться преимуществами регистрации в Google одним касанием. При посещении веб-сайта и появлении запроса на создание учетной записи во встроенном диалоговом окне пользователю не нужно вводить пароль. Google предоставляет безопасную учетную запись без пароля на основе токенов, связанную с учетной записью Google пользователя. Когда пользователь возвращается, он автоматически входит в систему.Если они хранят свои пароли в Smart Lock, они автоматически входят в систему и на других устройствах.
Диалоговое окно регистрации в Google одним касанием (Источник) (Большой предварительный просмотр)Примечание : Это интересное решение без пароля. Конечно, с его помощью пользователи связываются с Google, что не всем будет комфортно с .
Заключение
Вы можете сделать много действительно интересных вещей, когда начнете использовать мобильные возможности, чтобы помочь пользователям заполнять формы.При построении форм нам необходимо мышление - прежде всего мобильное; в противном случае мы застрянем на привычных нам возможностях рабочего стола.
Опять же, будьте осторожны с возможностями устройства: всегда имеет запасное решение на случай отказа датчика или отказа пользователя в доступе. Старайтесь не делать эти возможности единственными вариантами для этих функций (если вы не создаете картографическое приложение, основанное на геолокации).
Это конец серии из двух действительно длинных статей, в которых я дал вам несколько общих советов по UX и юзабилити, а также передовой опыт.В конце концов, независимо от вашей формы и ваших пользователей . Некоторые вещи, описанные здесь, могут даже не работать специально для ваших пользователей - кто знает? Итак, что бы вы ни делали, не верьте мне (или Люку) на слово. Протестируйте его с реальными пользователями на реальных устройствах. Измерьте это. И снова протестируем. Проведите небольшое исследование пользователей и тестирование удобства использования . Пользовательский опыт - это не только лучшие практики и волшебные рецепты, которые вы копируете и вставляете. Вам нужно адаптировать рецепт, чтобы он работал на вас.
Итак, вкратце: Протестируйте.Протестируйте на реальных устройствах. Протестируйте на реальных пользователях.
(lf, ra, al, il)Как создавать HTML-формы
В этом руководстве вы узнаете, как создать форму в HTML для сбора данных, вводимых пользователем.
Что такое HTML-форма
HTML-формынеобходимы для сбора различных типов пользовательских данных, таких как контактные данные, такие как имя, адрес электронной почты, номера телефонов, или такие данные, как информация о кредитной карте и т. Д.
Формысодержат специальные элементы, называемые элементами управления, такие как поле ввода, флажки, переключатели, кнопки отправки и т. Д. Пользователи обычно заполняют форму, изменяя ее элементы управления, например. ввод текста, выбор элементов и т. д. и отправка этой формы на веб-сервер для дальнейшей обработки.
Тег
используется для создания HTML-формы. Вот простой пример формы входа:
<форма>
В следующем разделе описаны различные типы элементов управления, которые можно использовать в форме.
Элемент ввода
Это наиболее часто используемый элемент в HTML-формах.
Он позволяет вам определять различные типы полей ввода пользователя в зависимости от атрибута type
. Элемент ввода может иметь тип текстовое поле , поле пароля , флажок , переключатель , кнопка отправки , кнопка сброса , поле выбора файла , а также несколько новых типов ввода. в HTML5.
Ниже описаны наиболее часто используемые типы входов.
Текстовые поля
Текстовые поля - это однострочные области, которые позволяют пользователю вводить текст.
Элементы управления вводом однострочного текста создаются с использованием элемента
, чей атрибут type
имеет значение text
. Вот пример однострочного ввода текста, используемого для ввода имени пользователя:
<форма>
- Результат приведенного выше примера будет выглядеть примерно так:
Примечание: Тег
используется для определения меток для элементов
.Если вы хотите, чтобы ваш пользователь вводил несколько строк, вам следует вместо этого использовать
.
Поле пароля
Поля пароля аналогичны текстовым полям. Единственная разница; символы в поле пароля маскируются, т. е. отображаются в виде звездочек или точек. Это сделано для того, чтобы никто другой не прочитал пароль на экране. Это также элементы управления однострочным вводом текста, созданные с использованием элемента
, атрибут типа
которого имеет значение , пароль
.
Вот пример однострочного ввода пароля, используемого для ввода пароля пользователя:
<форма>
- Результат приведенного выше примера будет выглядеть примерно так:
Кнопки радио
Радиокнопки используются, чтобы позволить пользователю выбрать ровно одну опцию из предопределенного набора опций.Он создается с использованием элемента
, атрибут типа
которого имеет значение radio
.
Вот пример переключателей, которые можно использовать для сбора информации о поле пользователя:
<форма>
- Результат приведенного выше примера будет выглядеть примерно так:
Флажки
Флажки позволяют пользователю выбрать одну или несколько опций из предопределенного набора опций.Он создается с использованием элемента
, атрибут типа
которого имеет значение , флажок
.
Вот пример флажков, которые можно использовать для сбора информации о хобби пользователя:
<форма>
- Результат приведенного выше примера будет выглядеть примерно так:
Примечание: Если вы хотите установить переключатель или флажок по умолчанию, вы можете добавить атрибут , отмеченный
, к элементу ввода, например
.
Поле выбора файла
Поля файла позволяют пользователю найти локальный файл и отправить его как вложение с данными формы. Веб-браузеры, такие как Google Chrome и Firefox, отображают поле ввода выбора файла с помощью кнопки «Обзор», которая позволяет пользователю перемещаться по локальному жесткому диску и выбирать файл.
Он также создается с использованием элемента
, для которого значение атрибута type
установлено на file
.
<форма>
- Результат приведенного выше примера будет выглядеть примерно так:
Совет: Есть несколько других типов ввода.Пожалуйста, ознакомьтесь с главой о новых типах ввода HTML5, чтобы узнать больше о новых типах ввода.
Textarea
Textarea - это элемент управления вводом многострочного текста, который позволяет пользователю вводить более одной строки текста. Элементы управления вводом многострочного текста создаются с использованием элемента
.
<форма>
- Результат приведенного выше примера будет выглядеть примерно так:
Выбрать боксы
Поле выбора - это раскрывающийся список параметров, который позволяет пользователю выбрать один или несколько вариантов из раскрывающегося списка параметров.Поле выбора создается с использованием элемента
и элемента
.
Элементы
внутри элемента
определяют каждый элемент списка.
<форма>
- Результат приведенного выше примера будет выглядеть примерно так:
Кнопки отправки и сброса
Кнопка отправки используется для отправки данных формы на веб-сервер.При нажатии кнопки отправки данные формы отправляются в файл, указанный в атрибуте action формы
для обработки отправленных данных.
Кнопка сброса сбрасывает все элементы управления форм до значений по умолчанию. Попробуйте следующий пример, введя свое имя в текстовое поле и нажав кнопку «Отправить», чтобы увидеть его в действии.
Введите свое имя в текстовое поле выше и нажмите кнопку «Отправить», чтобы увидеть его в действии.
Примечание: Вы также можете создавать кнопки с помощью элемента
. Кнопки, созданные с помощью элемента
, работают так же, как кнопки, созданные с помощью элемента ввода, но они предлагают более широкие возможности визуализации, позволяя встраивать другие элементы HTML.
Элементы управления формой группировки
Вы также группируете логически связанные элементы управления и метки в веб-форме с помощью элемента
.Группирование элементов управления формы по категориям упрощает пользователям поиск элемента управления, что делает форму более удобной для пользователя. Давайте попробуем следующий пример, чтобы увидеть, как это работает:
<форма>
Часто используемые атрибуты формы
В следующей таблице перечислены наиболее часто используемые атрибуты элементов формы:
Атрибут | Описание |
---|---|
название |
Задает имя формы. |
действие |
Задает URL-адрес программы или сценария на веб-сервере, который будет использоваться для обработки информации, отправленной через форму. |
метод |
Задает метод HTTP, используемый браузером для отправки данных на веб-сервер. Значение может быть либо , чтобы получить (по умолчанию), либо после . |
цель |
Указывает, где отображать ответ, полученный после отправки формы. Возможные значения: _blank , _self , _parent и _top . |
enctype |
Указывает, как данные формы должны быть закодированы при отправке формы на сервер.Применимо, только если значение атрибута method равно post . |
Есть несколько других атрибутов, чтобы узнать о них, см. Справку по тегу
.
Примечание: Атрибут name
представляет имя формы в коллекции форм.Его значение должно быть уникальным среди форм в документе и не должно быть пустой строкой.
Совет: Все данные, отправленные с помощью метода get
, отображаются в адресной строке браузера. Но данные, отправленные через post
, не видны пользователю.