Рекомендации по оплате и адресной форме
Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.
Увеличьте конверсию, помогая пользователям максимально быстро и легко заполнять формы адреса и оплаты.
Сэм Даттон
Хорошо продуманные формы помогают пользователям и повышают коэффициент конверсии. Одно маленькое исправление может иметь большое значение!
Попробуйте: если вы предпочитаете изучать эти лучшие практики с помощью практического руководства, ознакомьтесь с двумя лабораториями кода для этого поста: * Лаборатория лучших практик для платежных форм * Лаборатория лучших практик для адресных форм
Вот пример простой формы оплаты, которая демонстрирует все лучшие практики:
Вот пример простой формы адреса, которая демонстрирует все лучшие практики:
Контрольный список
- Используйте осмысленные элементы HTML : , , и .
- Пометьте каждое поле формы тегом .
- Используйте атрибуты элемента HTML для доступа к встроенным функциям браузера , в частности type и autocomplete соответствующими значениями.
- Не используйте type=»number» для чисел, которые не подлежат увеличению, например номеров платежных карт. Вместо этого используйте type=»text» и inputmode=»numeric» .
- Если подходящее значение автозаполнения доступно для input , select или textarea , вам следует использовать его.
- Чтобы браузеры могли автоматически заполнять формы, задайте для входных name и id стабильные значения , которые не меняются между загрузками страниц и развертываниями веб-сайтов.
- Отключите кнопки отправки после того, как они были нажаты или нажаты.
- Проверяйте данные во время ввода, а не только при отправке формы.
- Сделайте гостевую оплату по умолчанию и упростите создание учетной записи после завершения оформления заказа.
- Покажите ход процесса оформления заказа в виде четких шагов и четких призывов к действию.
- Ограничьте потенциальные точки выхода из кассы , удалив беспорядок и отвлекающие факторы.
- Покажите полную информацию о заказе при оформлении заказа и упростите корректировку заказа.
- Не запрашивайте данные, которые вам не нужны .
- Запрашивайте имена одним вводом, если у вас нет веских причин не делать этого.
- Не используйте только латинские символы для имен и имен пользователей.
- Разрешить использование различных форматов адресов .
- Рассмотрите возможность использования одной textarea для адреса .
- Используйте автозаполнение платежного адреса .
- Интернационализация и локализация там, где это необходимо.
- Подумайте о том, чтобы избежать поиска почтового адреса .
- Используйте соответствующие значения автозаполнения платежной карты .
- Используйте единый ввод для номеров платежных карт .
- Избегайте использования пользовательских элементов , если они нарушают работу автозаполнения.
- Тестируйте как в полевых условиях, так и в лаборатории : анализ страниц, анализ взаимодействия и измерение производительности реальных пользователей.
- Тестируйте на различных браузерах, устройствах и платформах .
Используйте осмысленный HTML
Используйте элементы и атрибуты, созданные для задания:
Они включают встроенные функции браузера, улучшают доступность и добавляют смысл в вашу разметку.
Используйте элементы HTML по назначению
Поместите свою форму в
У вас может возникнуть соблазн не заключать элементы в и обрабатывать отправку данных исключительно с помощью JavaScript.
HTML предоставляет вам доступ к мощному набору встроенных функций во всех современных браузерах и может помочь сделать ваш сайт доступным для программ чтения с экрана и других вспомогательных устройств. также упрощает создание базовых функций для старых браузеров с ограниченной поддержкой JavaScript и позволяет отправлять формы, даже если в вашем коде есть сбой, а также для небольшого числа пользователей, которые фактически отключают JavaScript.
Если у вас есть более одного компонента страницы для пользовательского ввода, обязательно поместите каждый из них в отдельный элемент . Например, если у вас есть поиск и регистрация на одной странице, поместите каждое из них в отдельный .
Используйте для маркировки элементов.
Чтобы пометить , или , используйте .
Свяжите метку с входными данными, задав атрибуту метки for то же значение, что и id входных данных.
Используйте одну метку для одного входа: не пытайтесь пометить несколько входов одной меткой. Это лучше всего работает для браузеров и лучше всего для программ чтения с экрана. Касание или щелчок по метке перемещает фокус на ввод, с которым она связана, а средства чтения с экрана объявляют текст метки, когда метка или ввод метки получают фокус.
Внимание: не используйте заполнители вместо меток. Как только вы начинаете вводить текст во входные данные, заполнитель скрывается, поэтому можно легко забыть, для чего предназначен этот ввод. То же самое верно, если вы используете заполнитель для отображения правильного формата таких значений, как даты. Это может быть особенно проблематично для пользователей телефонов, особенно если они отвлекаются или испытывают стресс!
Сделайте кнопки полезными
Присвойте каждой кнопке отправки формы значение, указывающее, что она делает. Для каждого шага к оформлению заказа используйте описательный призыв к действию, который показывает прогресс и делает следующий шаг очевидным. Например, пометьте кнопку «Отправить» в форме адреса доставки «Перейти к оплате» , а не «Продолжить » или «Сохранить» .
Рассмотрите возможность отключения кнопки отправки после того, как пользователь нажал или щелкнул ее, особенно когда пользователь совершает платеж или размещает заказ. Многие пользователи нажимают кнопки несколько раз, даже если они работают нормально. Это может испортить оформление заказа и увеличить нагрузку на сервер.
С другой стороны, не отключайте кнопку отправки, ожидающую полного и действительного ввода пользователя. Например, не оставляйте кнопку «Сохранить адрес» отключенной, потому что что-то отсутствует или недействительно. Это не помогает пользователю — он может продолжать нажимать или щелкать кнопку и считать, что она сломана. Вместо этого, если пользователи попытаются отправить форму с неверными данными, объясните им, что пошло не так и что нужно сделать, чтобы это исправить. Это особенно важно на мобильных устройствах, где ввод данных затруднен, а отсутствующие или недействительные данные формы могут быть не видны на экране пользователя к моменту попытки отправить форму.
Внимание: тип кнопки по умолчанию в форме — submit . Если вы хотите добавить в форму еще одну кнопку (например, для «Показать пароль »), добавьте type=»button» . В противном случае нажатие или нажатие кнопки приведет к отправке формы. Нажатие клавиши Enter , когда любое поле формы находится в фокусе, имитирует нажатие первой кнопки submit в форме. Если вы добавите кнопку в форму перед кнопкой «Отправить» и не укажете тип, эта кнопка будет иметь тип по умолчанию для кнопок в форме ( submit ) и получит событие нажатия перед отправкой формы. Пример этого см. в нашей демонстрации : заполните форму, затем нажмите Enter .
Максимально используйте атрибуты HTML
Упростите пользователям ввод данных
Используйте соответствующий атрибут type ввода, чтобы обеспечить правильную клавиатуру на мобильном устройстве и включить базовую встроенную проверку в браузере.
Например, используйте type=»email» для адресов электронной почты и type=»tel» для номеров телефонов.
Предупреждение. Использование type=»number» добавляет стрелку вверх/вниз для увеличения чисел, что не имеет смысла для таких данных, как телефон, платежная карта или номера счетов. Для таких чисел установите type=»text» (или оставьте атрибут, поскольку text используется по умолчанию). Для телефонных номеров используйте type=»tel» чтобы получить соответствующую клавиатуру на мобильном телефоне. Для других чисел используйте inputmode=»numeric» , чтобы получить цифровую клавиатуру на мобильном телефоне. Некоторые сайты до сих пор используют type=»tel» для номеров платежных карт, чтобы гарантировать, что мобильные пользователи получат правильную клавиатуру. Однако сейчас inputmode очень широко поддерживается, поэтому вам не обязательно этого делать, но обязательно проверяйте браузеры своих пользователей.
Что касается дат, старайтесь избегать использования пользовательских элементов select . Если они не реализованы должным образом, они нарушают работу автозаполнения и не работают в старых браузерах. Для таких чисел, как год рождения, рассмотрите возможность использования элемента input , а не select , поскольку ввод цифр вручную может быть проще и менее подвержен ошибкам, чем выбор из длинного раскрывающегося списка, особенно на мобильных устройствах. Используйте inputmode=»numeric» , чтобы обеспечить правильную клавиатуру на мобильном устройстве, и добавьте подсказки по проверке и форматированию с текстом или заполнителем, чтобы убедиться, что пользователь вводит данные в соответствующем формате.
Примечание. Элемент datalist позволяет пользователю выбирать из списка доступных вариантов и предоставляет соответствующие предложения по мере ввода пользователем текста. Попробуйте datalist для ввода text , range и color на simpl.info/datalist . Для ввода года рождения вы можете сравнить select с input и datalist на datalist-select.glitch.me .
Используйте автозаполнение, чтобы улучшить доступность и помочь пользователям избежать повторного ввода данных.
Использование соответствующих значений autocomplete позволяет браузерам помогать пользователям, безопасно сохраняя данные и автоматически заполняя input , select и textarea . Это особенно важно для мобильных устройств и имеет решающее значение для предотвращения высокого уровня отказов от форм . Автозаполнение также обеспечивает множество преимуществ специальных возможностей .
Если для поля формы доступно подходящее значение автозаполнения, вам следует использовать его. Веб-документы MDN содержат полный список значений и объяснения того, как их правильно использовать.
Стабильные ценности
Примечание. Помимо использования соответствующих значений автозаполнения, помогите браузерам автоматически заполнять формы, предоставив полям формы стабильные значения атрибутов name и id , которые не меняются между загрузкой страницы или развертыванием веб-сайта.
Адрес для выставления счета
По умолчанию установите адрес выставления счета таким же, как адрес доставки. Уменьшите визуальный беспорядок, предоставив ссылку для редактирования платежного адреса (или используйте элементы summary и details ) вместо отображения платежного адреса в форме.
Используйте соответствующие значения автозаполнения для адреса выставления счета, как и для адреса доставки, чтобы пользователю не приходилось вводить данные более одного раза. Добавьте префиксное слово к атрибутам автозаполнения, если у вас разные значения для входных данных с одинаковым именем в разных разделах.
Помогите пользователям ввести правильные данные
Постарайтесь не «ругать» клиентов за то, что они «сделали что-то не так». Вместо этого помогите пользователям быстрее и проще заполнять формы, помогая им устранять проблемы по мере их возникновения. В процессе оформления заказа клиенты пытаются дать вашей компании деньги за продукт или услугу — ваша задача — помочь им, а не наказать их!
Вы можете добавить атрибуты ограничений к элементам формы, чтобы указать приемлемые значения, включая min , max pattern . Состояние достоверности элемента устанавливается автоматически в зависимости от того, является ли значение элемента допустимым, как и псевдоклассы CSS :valid и :invalid , которые можно использовать для стилизации элементов с действительными или недопустимыми значениями.
Например, следующий HTML-код определяет ввод для года рождения между 1900 и 2020. Использование type=»number» ограничивает входные значения только числами в диапазоне, указанном min и max . Если вы попытаетесь ввести число за пределами диапазона, вход будет установлен в недопустимое состояние.
В следующем примере используется pattern=»[\d ]» для обеспечения допустимого номера платежной карты, при этом допускаются пробелы:
Современные браузеры также выполняют базовую проверку входных данных типа email или url .
Примечание. Добавьте атрибут multiple к входным данным с type=»email» , чтобы включить встроенную проверку нескольких адресов электронной почты, разделенных запятыми, в одном входном файле.
При отправке формы браузеры автоматически фокусируются на полях с проблемными или отсутствующими обязательными значениями. Никакого JavaScript не требуется!
Проверяйте встроенные данные и предоставляйте обратную связь пользователю при вводе данных, а не предоставляйте список ошибок при нажатии кнопки отправки. Если вам необходимо проверить данные на вашем сервере после отправки формы, перечислите все обнаруженные проблемы и четко выделите все поля формы с недопустимыми значениями, а также отобразите встроенное сообщение рядом с каждым проблемным полем, объясняющее, что необходимо исправить. Проверьте журналы сервера и аналитические данные на наличие распространенных ошибок — возможно, вам придется изменить дизайн формы.
Вам также следует использовать JavaScript для более надежной проверки при вводе пользователями данных и отправке формы. Используйте API проверки ограничений (который широко поддерживается ), чтобы добавить пользовательскую проверку с помощью встроенного пользовательского интерфейса браузера для установки фокуса и отображения подсказок.
Предупреждение. Даже при наличии ограничений на проверку и ввод данных на стороне клиента вы все равно должны убедиться, что ваш сервер безопасно обрабатывает ввод и вывод данных от пользователей. Никогда не доверяйте пользовательскому вводу: это может быть вредоносным. Дополнительную информацию см. в шпаргалке по проверке ввода OWASP .
Помогите пользователям не пропустить необходимые данные
Используйте required атрибут на входах для обязательных значений.
При отправке формы современные браузеры автоматически запрашивают и устанавливают фокус на required поля с отсутствующими данными, и вы можете использовать псевдокласс :required для выделения обязательных полей. Никакого JavaScript не требуется!
Добавьте звездочку к метке каждого обязательного поля и добавьте примечание в начале формы, объясняющее, что означает звездочка.
Упрощение оформления заказа
Помните о пробеле в мобильной коммерции!
Представьте, что у ваших пользователей есть бюджет усталости . Используйте его, и ваши пользователи уйдут.
Вам необходимо уменьшить трение и сохранять концентрацию, особенно на мобильных устройствах. Многие сайты получают больше трафика на мобильных устройствах, но больше конверсий на настольных компьютерах — явление, известное как разрыв в мобильной коммерции . Клиенты могут просто предпочесть совершить покупку на настольном компьютере, но более низкие показатели конверсии на мобильных устройствах также являются результатом плохого пользовательского опыта. Ваша задача — минимизировать потерянные конверсии на мобильных устройствах и максимизировать конверсии на настольных компьютерах. Исследования показали , что существует огромная возможность улучшить качество мобильных форм.
Прежде всего, пользователи чаще отказываются от форм, которые выглядят длинными, сложными и лишенными смысла. Это особенно актуально, когда пользователи используют экраны меньшего размера, отвлекаются или спешат. Запрашивайте как можно меньше данных.
Сделать гостевую оплату по умолчанию
Для интернет-магазина самый простой способ уменьшить трудности с формой — сделать гостевую кассу по умолчанию. Не заставляйте пользователей создавать учетную запись перед совершением покупки. Невозможность оформить заказ для гостей считается основной причиной отказа от корзины покупок.
Вы можете предложить регистрацию аккаунта после оформления заказа. На этом этапе у вас уже есть большая часть данных, необходимых для настройки учетной записи, поэтому создание учетной записи должно быть быстрым и простым для пользователя.
Если вы предлагаете регистрацию после оформления заказа, убедитесь, что покупка, которую только что совершил пользователь, связана с его вновь созданной учетной записью!
Показать ход оформления заказа
Вы можете сделать процесс оформления заказа менее сложным, показывая прогресс и поясняя, что нужно делать дальше. На видео ниже показано, как этого добивается британский ритейлер johnlewis.com .
Атрибут enterkeyhint поддерживается на Android и iOS . Подробную информацию вы можете узнать из объяснителя Enterkeyhint .
Предоставьте пользователям возможность легко перемещаться вперед и назад в процессе оформления заказа, чтобы они могли легко корректировать свой заказ, даже когда они находятся на последнем этапе оплаты. Покажите полную информацию о заказе, а не только краткое изложение. Предоставьте пользователям возможность легко регулировать количество товаров на странице оплаты. Ваша приоритетная задача при оформлении заказа — не прерывать процесс конверсии.
Устраните отвлекающие факторы
Ограничьте потенциальные точки выхода, удалив визуальный беспорядок и отвлекающие факторы, такие как реклама продукта. Многие успешные ритейлеры даже убирают навигацию и поиск с кассы.
Держите путешествие сосредоточенным. Сейчас не время соблазнять пользователей сделать что-то еще!
Для вернувшихся пользователей вы можете еще больше упростить процесс оформления заказа, скрывая данные, которые им не нужно видеть. Например: отображать адрес доставки в виде обычного текста (не в форме) и разрешать пользователям менять его по ссылке.
Упростите ввод имени и адреса
Запрашивайте только те данные, которые вам нужны
Прежде чем приступить к кодированию форм имени и адреса, убедитесь, что вы понимаете, какие данные требуются. Не запрашивайте данные, которые вам не нужны! Самый простой способ уменьшить сложность формы — удалить ненужные поля. Это также полезно для конфиденциальности клиентов и может снизить стоимость и ответственность за внутренние данные.
Используйте ввод одного имени
Разрешите пользователям вводить свое имя с помощью одного ввода, если только у вас нет веской причины для отдельного хранения имен, фамилий, почетных знаков или других частей имени. Использование одного ввода имени делает формы менее сложными, позволяет вырезать и вставлять, а также упрощает автозаполнение.
В частности, если у вас нет веских причин не делать этого, не пытайтесь добавлять отдельный ввод для префикса или титула (например, «Миссис», «Доктор» или «Лорд»). Пользователи могут ввести это вместе со своим именем, если захотят. Кроме того, автозаполнение honorific-prefix в настоящее время не работает в большинстве браузеров, поэтому добавление поля для префикса имени или заголовка нарушит работу автозаполнения формы адреса для большинства пользователей.
Включить автозаполнение имени
Используйте name для полного имени:
Если у вас действительно есть веская причина разделить части имени, обязательно используйте соответствующие значения автозаполнения:
- honorific-prefix
- given-name
- nickname
- additional-name-initial
- additional-name
- family-name
- honorific-suffix
Разрешить международные имена
Возможно, вы захотите проверить введенные вами имена или ограничить количество символов, разрешенных для данных имени. Однако вам нужно быть максимально неограниченными в отношении алфавитов. Невежливо, когда вам говорят, что ваше имя «недействительно»!
Для проверки избегайте использования регулярных выражений, соответствующих только латинским символам. Только латиница исключает пользователей, чьи имена или адреса содержат символы, которых нет в латинском алфавите. Вместо этого разрешите сопоставление букв Юникода и убедитесь, что ваша серверная часть надежно поддерживает Юникод как на входе, так и на выходе. Юникод в регулярных выражениях хорошо поддерживается современными браузерами.
Используйте один ввод для платежной карты и номеров телефонов.
Для номеров платежной карты и телефона используйте один ввод: не разбивайте номер на части. Это облегчает пользователям ввод данных, упрощает проверку и позволяет браузерам выполнять автозаполнение. Рассмотрите возможность сделать то же самое для других числовых данных, таких как PIN-код и банковские коды.
Тщательно проверьте
Вам следует проверять ввод данных как в реальном времени, так и перед отправкой формы. Один из способов сделать это — добавить атрибут pattern во входные данные платежной карты. Если пользователь пытается отправить форму оплаты с недопустимым значением, браузер отображает предупреждающее сообщение и переключает фокус на ввод. Никакого JavaScript не требуется!
Однако регулярное выражение вашего pattern должно быть достаточно гибким, чтобы обрабатывать диапазон длин номеров платежных карт : от 14 цифр (или, возможно, меньше) до 20 (или более). Подробнее о структурировании номеров платежных карт можно узнать на LDAPwiki .
Разрешите пользователям добавлять пробелы при вводе нового номера платежной карты, поскольку именно так номера отображаются на физических картах. Это более дружелюбно для пользователя (вам не придется говорить им: «Они сделали что-то не так»), с меньшей вероятностью прерывает процесс преобразования, и проще удалять пробелы в числах перед обработкой.
Примечание. Возможно, вы захотите использовать одноразовый код доступа для проверки личности или платежа. Однако просить пользователей ввести код вручную или скопировать его из электронного письма или текста SMS-сообщения чревато ошибками и является источником разногласий. Узнайте о лучших способах включения одноразовых паролей в SMS OTP из рекомендаций .
Тестируйте на различных устройствах, платформах, браузерах и версиях.
Особенно важно тестировать адрес и формы оплаты на платформах, наиболее распространенных для ваших пользователей, поскольку функциональность и внешний вид элементов формы могут различаться, а различия в размерах области просмотра могут привести к проблемам с позиционированием. BrowserStack позволяет бесплатно тестировать проекты с открытым исходным кодом на различных устройствах и браузерах.
Внедрить аналитику и РУМ
Локальное тестирование удобства использования и производительности может быть полезным, но вам нужны реальные данные, чтобы правильно понять, как пользователи воспринимают ваши формы оплаты и адреса.
Для этого вам нужна аналитика и мониторинг реальных пользователей — данные об опыте реальных пользователей, например, сколько времени занимает загрузка страниц оформления заказа или сколько времени занимает завершение платежа:
- Аналитика страниц : просмотры страниц, показатели отказов и выходы для каждой страницы с формой.
- Аналитика взаимодействия : воронки целей и события показывают, где пользователи прекращают процесс оформления заказа и какие действия они предпринимают при взаимодействии с вашими формами.
- Производительность веб-сайта : показатели, ориентированные на пользователя, могут сказать вам, медленно ли загружаются ваши страницы оформления заказа, и если да, то в чем причина.
Анализ страниц, анализ взаимодействия и измерение реальной производительности пользователей становятся особенно ценными в сочетании с журналами сервера, данными о конверсиях и A/B-тестированием, что позволяет вам ответить на такие вопросы, как, например, увеличивают ли коды скидок доход или улучшается ли изменение макета формы. конверсии.
Это, в свою очередь, дает вам прочную основу для определения приоритетов усилий, внесения изменений и вознаграждения за успех.
Продолжай учиться
- Рекомендации по использованию формы входа
- Рекомендации по форме регистрации
- Подтвердите номера телефонов в Интернете с помощью WebOTP API
- Создавайте удивительные формы
- Лучшие практики дизайна мобильных форм
- Более функциональные элементы управления формой
- Создание доступных форм
- Оптимизация процесса регистрации с помощью API управления учетными данными
- «Компульсивное руководство Фрэнка по почтовым адресам» содержит полезные ссылки и подробные инструкции по форматам адресов в более чем 200 странах.
- В списках стран есть инструмент для загрузки кодов стран и названий на нескольких языках и в разных форматах.
Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons «С указанием авторства 4.0», а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.
Последнее обновление: 2020-12-09 UTC.
Формы в HTML
В процессе навигации по сайтам пользователь, в основном, только щёлкает по ссылкам чтобы перемещаться по веб-страницам.
Но понятно, что пользователю иногда требуется обеспечить собственные поля ввода. Эти виды взаимодействия включают в себя:
- регистрацию и вход на сайтах;
- ввод личной информации (имя, адрес, данные кредитной карты и др.);
- фильтрацию контента (с помощью выпадающих списков, флажков и др.);
- выполнение поиска;
- загрузку файлов.
Чтобы приспособиться к этим потребностям, HTML предлагает интерактивные элементы управления формы:
- текстовые поля (для одной или нескольких строк);
- переключатели;
- флажки;
- выпадающие списки;
- виджеты для загрузки;
- кнопки отправки.
Эти элементы управления задействуют разные теги HTML, но большинство из них использует тег . Поскольку это самозакрывающий элемент, тип поля определяется его атрибутом type :
Элемент
является блочным элементом, который определяет интерактивную часть веб-страницы. Как результат, все элементы управления (такие как , или ) должны находиться внутри элемента .
Два атрибута HTML необходимы:
- action содержит адрес, который определяет, куда будет отправлена информация формы;
- method может быть либо GET, либо POST и определяет, как будет отправлена информация формы.
Как правило, информация формы посылается на сервер. Как эти данные затем будут обработаны выходит за рамки данного руководства.
Подумайте о форме как о наборе элементов управления, которые работают вместе, чтобы выполнить одну операцию. Если вы написали форму входа на сайт, у вас могло быть три поля:
- поле для электронной почты
- поле для пароля
- кнопка отправки
Эти три элемента HTML будут заключены внутри одной формы .
Вы можете аналогично добавить форму регистрации на той же HTML-странице, в отдельном элементе .
Текстовые поля
Почти всем формам требуется текстовый ввод от пользователей, чтобы ввести своё имя, адрес электронной почты, пароль, адрес и др. Текстовые поля формы приходят в разных вариантах.
| Текст | Допускает любой тип символов | |
|---|---|---|
| Может показывать предупреждение, если введён неверный email | ||
| Пароль | Символы показываются как точки | |
| Число | Могут быть использованы клавиши вверх/вниз | |
| Телефон | Может сработать автозаполнение | |
| Многострочный текст | Может быть изменён размер поля |
Хотя эти поля очень похожи и позволяют пользователям вводить текст любого рода (даже неправильный), их тип обеспечивает специфическую семантику для ввода, определяя, какую информацию поле должно содержать.
Браузеры могут впоследствии немного изменить интерфейс элемента управления, чтобы повысить интерактивность или подсказать, какое содержимое ожидается.
К примеру, поле для пароля показывает точки вместо символов. А поле для чисел позволяет увеличивать/уменьшать значение с помощью клавиш вверх и вниз.
placeholder
Текстовые поля могут отображать подсказывающий текст, который исчезнет, как только будет введён некоторый текст.
Если вы начинаете набирать что-то, то увидите как текст «Введите своё имя» исчезнет.
Так как элементы формы сами по себе не очень описательны, им, как правило, предшествует текстовая метка.
В то время как placeholder уже обеспечивает некоторую подсказку о том, какое ожидается содержание, метки имеют преимущество оставаясь видимыми в любое время и могут использоваться наряду с другими типами элементов формы, таких как флажки или переключатели.
Хотя вы можете применять короткие абзацы для описания элементов формы, использование является семантически более правильным, потому что они существуют только в формах. также может быть связан с определённым элементом формы с помощью атрибута for , соответствующему значению id у поля.
При щелчке по метке фокус переходит к текстовому полю и помещает курсор внутрь него. Пока эта связка кажется бесполезной, но пригодится с флажками и переключателями.
Флажки
Флажки — это элементы формы, которые имеют только два состояния: включено или выключено. Они в основном позволяют пользователю сказать: «Да» или «Нет» для чего-то.
Запомнить меняПоскольку может оказаться сложно щёлкнуть по небольшому флажку, рекомендуется поместить флажок и его описание внутрь .
Вы можете щёлкнуть по тексту «Я согласен с условиями» чтобы переключить флажок.
По умолчанию флажок выключен. Вы можете пометить его включенным, просто используя атрибут checked .
Переключатели
Вы можете предоставить пользователю список вариантов на выбор с помощью переключателей.
Для работы этого элемента формы, ваш HTML-код должен сгруппировать список переключателей вместе. Это достигается с помощью одного и того же значения для атрибута name:
Поскольку все переключатели используют одинаковое значение атрибута name (в данном случае значение status ), выбор одного из вариантов отменит все остальные. Переключатели являются взаимоисключающими.
Разница между переключателями и флажками
Хотя флажок существует сам по себе, переключатели могут появляться только в виде списка (что означает, по меньшей мере два варианта).
Кроме того, щелчок по флажку является произвольным, в то время как выбор одного из переключателей является обязательным. Вот почему невозможно выключить переключатель, если выбрать ближайший вариант. В конце концов, всегда выбирается один из переключателей.
Выпадающие меню
Если количество вариантов для выбора занимает слишком много места, вы можете воспользоваться выпадающими меню .
Они работают подобно переключателям, отличается только компоновка.
Множественный выбор из выпадающего меню
Если добавить атрибут multiple , вы можете предоставить возможность выбрать несколько вариантов.
Выберите несколько вариантов посредством удержания Ctrl (или ⌘) и щелчка. Это может быть хорошей альтернативой применению несколько флажков в строке.
Пример: полная форма регистрации
Также доступны и другие элементы форм, но мы рассмотрели наиболее используемые.
Что такое веб-форма. Из чего она состоит и для чего нужна. Как и где её можно использовать
По своей сути веб-форма является специально ограниченной областью на странице сайта. В эти области посетитель сайта может внести ту или иную информацию, а также выбрать конкретные действия из предложенных.
Веб-форма на сайте – это аналог бумажной формы, анкеты, бланка и опросного листа.
В формах имеются поля, предназначенные для заполнения, а также списки и переключатели, которые позволяют пользователю выбрать один или несколько элементов.
Форму можно использовать для того чтобы получать сведения от посетителей сайта. К примеру, с помощью web-формы можно осуществлять сбор персональных данных, сведения о заказах, сведения, которые необходимы для выставления счета, способах доставки и так далее. От посетителей требуется внести различного рода информацию в поле формы.
Читайте также: Форма обратной связи для сайта. Что это такое, для чего она нужна и как ее создать?
Вышеуказанные сведения можно задать путём настройки переключателей, флажков и раскрывающихся списков и ввода информации в текстовые поля.
Существует также возможность задавать способ сбора информации, которую вводят посетители сайта, а также задавать способ отображения данных результатов на странице подтверждения, которую просматривает пользователь.
Форма может осуществлять свою работу только в том случае, если она поддерживается веб-сервером.
Элементы формы, в которые можно ввести текст, называются полями формы. Поля формы могут уже содержать своё название («Обзор», «Сброс», «Отправить» и т.д.) или позволяют вводить текст.
К примерам наиболее часто используемых html-форм можно отнести:
- Форма обратной связи
- Форма заявок
- Форма оформления заказа
- Форма голосования
- Форма тестирования
- Форма подписки
Поля формы по своей сути являются текстовыми полями, переключателями, кнопками другими элементами. На выбор тех или иных элементов влияет информация, которую необходимо получить от посетителя.
Текстовое поле применяется для того чтобы вводить текстовые строки. Максимальное число символов, которые возможно ввести в это поле, не зависит от его ширины.
Флажки (checkbox) применяются для того, чтобы выбрать дополнительные элементы или услуги. Посетитель может самостоятельно снять флажок или установить его. С помощью флажков можно задавать возможность выбора сразу нескольких элементов. Стоит отметить, что флажки обладают только двумя значениями: «установлено» или же «сброшено».
Что касается переключателей (radio), то их применяют вместо флажков в той ситуации, когда пользователь сайта должен выбрать какое-то одно значение из нескольких предложенных. Один из таких переключателей, как правило, действует по умолчанию. Выбор второго переключателя сбрасывает предыдущее значение.
Текстовая область (textarea) применяется для того чтобы ввести одну или несколько строк текста. Данное поле прокручивается, что дает возможность ввода в него текстов различного объема.
Текстовые области имеют широкие возможности применения (к примеру, с помощью них можно создавать гостевые книги).
Раскрывающийся список (select) используется в том случае, если необходимо представить пользователю список различных вариантов. Функции этих списков схожи с функциями переключателей, однако списки занимают не так много места в формах.
Раскрывающийся список можно настроить таким образом, чтобы допустить выбор одного значения или же нескольких. Очень часто такой список используется как выпадающее меню в навигации интернет-ресурса.
Кнопка применяется для отправки заполненной формы, при очистке полей или же осуществления других действий. Посетителю нужно лишь нажать на ту или иную кнопку.
Кроме того, в форме может присутствовать рисунок, который можно использовать в качестве кнопки. После того, как посетитель заполнит форму, ему необходимо щелкнуть на этот рисунок, и вся информация из формы отправится скрипту, который занимается обработкой форм (этот скрипт находится на сервере).
При помощи кнопки можно изменить те или иные настройки. При этом возможно использование шрифтов, цветов и таблиц.
С помощью окна группы можно обособить группу элементов или текст от другой информации, которая имеется на странице.
У посетителей сайта может быть возможность отправки каких-либо файлов на сайт. Если в форме имеется поле под названием «передача файлов», пользователь может нажать на кнопку, которая называется «Обзор», выбрать нужный файл и отправить его.
Читайте также: Эффективное проектирование веб-форм: структура, поля ввода, метки и действия
После того, как выбран тип полей, которые добавляются в форму, можно определить их внешний вид и назначение. Название поля и указания по их применению можно ввести в форму. Для каждого поля могут быть заданы свойства. Например, можно задать длину текстового поля, указать переключатель, устанавливаемый по умолчанию, и определить значения в раскрывающемся списке.
Далее необходимо задать правила валидации. Например: можно задать обязательные для заполнения поля формы или указать, что в определенные поля нужно вводить данные только определенного типа (например, только буквы или только цифры; ввод email-адреса; ввод url-адреса и т.д.).Правила валидации обеспечивают правильность заполнения формы посетителем сайта.
После того, как пользователь сайта заполнил форму и отправил данные, они попадают в специальный скрипт на сервере, который называется обработчик формы. В обработчике формы данные могут быть сохранены в базу данных либо же отправлены по электронной почте.
Если пользователь заполнил веб-форму правильно, без ошибок, то после отправки данных на сервер, пользователю отображается страница успешного заполнения формы либо же происходит переадресация на заранее заданную страницу. Если же пользователь заполняет форму для опроса или голосования, то после успешного заполнения формы ему сразу же отображаются страница с общими результатами голосования.
Читайте также: Создаем форму захвата на сайт за 3 минуты
Подводя итоги можно сказать, что использование форм на сайте, как правило, предусматривает использование на сайте баз данных, их постоянной поддержке профессиональными программистами. Что в свою очередь увеличивает стоимость обслуживания сайта, а также накладывает ряд ограничений на выбор хостинг провайдера.
Используя онлайн конструктор веб-форм FormDesigner.ru Вы можете за считанные минуты создать нужную вам веб-форму с любым количеством элементов, начиная от простого текстового поля и заканчиваю полем для загрузки файлов, полем для ввода даты или телефона. Для каждого элемента формы Вы можете настроить основные параметры, а также правила валидации. Кроме этого, использую интуитивно понятный дизайнер форм, Вы без проблем сможете настроить нужный вам внешний вид формы.
- Импорт форм из Marquiz в FormDesigner
- Импорт форм из 123FormBuilder в FormDesigner
- Импорт форм из JotForm в FormDesigner
- Импорт форм из Google форм и TypeForm
Формы HTML5
HTML-формы — это простые элементы управления HTML, которые применяются для сбора информации от посетителей веб-сайта. К ним относятся текстовые поля для ввода данных с клавиатуры, списки для выбора предопределенных данных, флажки для установки параметров и т. п. Существует бесчисленное количество способов использования HTML-форм, и если вы побродили по просторам Интернета всего лишь несколько дней, то, несомненно, использовали их для разных целей — от регистрации на каком-либо форуме или получения почтового ящика до просмотра биржевого курса или покупки товара в интернет-магазине.
HTML-формы существовали с самых ранних времен языка HTML, и с тех пор они нисколько не изменились, несмотря на определенные серьезные усилия. Разработчики веб-стандартов несколько лет колдовали над стандартом XForms, который должен был заменить HTML-формы, но его постиг такой же провал, как и стандарт XHTML 2.
Хотя стандарт XForms позволял легко и элегантно решать некоторые задачи, он также имел и значительные недостатки. Например, код XForms был очень объемистый, и для работы с ним нужно хорошее знание стандарта XML. Но самое большое препятствие состояло в том, что стандарт XForms не был совместим с HTML-формами ни в каких отношениях. Это означало, что разработчикам нужно было бы бросаться в неизведанные воды новой модели без вспомогательных плавсредств, а лишь со слепой верой и огромным мужеством.
Но так как разработчики основных браузеров никогда не заморачивались с реализацией XForms в своих продуктах по причине его слишком большой сложности и небольшого использования, сообщество веб-разработчиков так никогда и не сделало этот прыжок.
Стандарт HTML5 предлагает другой подход. Вместо того чтобы начинать с нуля, как в XForms, он совершенствует уже существующую модель HTML-форм. Это означает, что HTML5-формы могут работать и на старых браузерах, лишь без новых примочек и наворотов. HTML5-формы также позволяют применять новые возможности, которые уже используются разработчиками в настоящее время. Эти возможности более доступны, не требуют написания страниц сценариев JavaScript или применения инструментариев JavaScript сторонних разработчиков.
Что такое форма?
Скорее всего, вам приходилось работать с формами раньше. Но если нет или вы порядочно подзабыли эту тему, следующий материал позволит вам получить необходимые сведения для более углубленного изучения этой области веб-дизайна.
— это набор текстовых полей, списков, кнопок и других активизируемых щелчком мыши элементов управления, посредством которых посетитель страницы может предоставить ей тот или иной вид информации. Формы в Интернете повсюду — благодаря формам мы можем создавать учетные записи электронной почты, просматривать и покупать товары в интернет-магазинах, осуществлять финансовые транзакции и многое другое. Самая простая форма — это одинокое текстовое поле поисковых систем, таких как Google:
Все основные веб-формы работают одинаково. Пользователь вводит определенную информацию, а потом нажимает кнопку, чтобы отправить введенную информацию на веб-сервер. По прибытию на веб-сервер эта информация обрабатывается каким-либо приложением, которое потом предпринимает соответствующий очередной шаг. Перед тем как отослать новую страницу назад браузеру, серверная программа может обратиться к базе данных, чтобы извлечь или сохранить информацию.
Сложность этого процесса состоит в том, что существуют сотни разных способов реализации серверного приложения, которое обрабатывает поступившие из формы данные. Некоторым разработчикам может быть достаточно элементарных сценариев для манипулирования полученными данными, в то время как другие могут использовать средства высшего уровня, которые упаковывают данные из формы в аккуратные программные объекты. Но в любом случае, задача перед этими приложениями стоит, по большому счету, одинаковая — исследовать данные из формы, выполнить какие-либо действия с ними, а потом на основе полученных результатов отправить браузеру новую страницу.
Модернизация традиционной HTML-формы
Лучший способ обучения работе с формами HTML5 — это взять типичную современную форму и усовершенствовать ее. Ниже показана форма, на примере которой мы будем обучаться. Разметка такой формы до предела проста. Если вам раньше приходилось работать с формами, вы не увидите здесь ничего нового. Прежде всего, весь код формы заключается в элемент .
Элемент удерживает вместе все элементы управления формы, которые также называются полями. Кроме этого, он также указывает браузеру, куда отправить данные после нажатия пользователем кнопки отправки, предоставляя URL в атрибуте action. Но если вся работа будет выполняться на стороне клиента сценариям JavaScript, то для атрибута action можно просто указать значение #.
Хорошо спроектированная форма разделяется на логические фрагменты с помощью элемента . Каждому разделу можно присвоить название, для чего используется элемент . В следующем листинге приводится разметка формы:
Пожалуйста, заполните форму. Обязательные поля помечены *
Добавьте немного стилей CSS:
body < font-family: 'Palatino Linotype', serif; max-width: 600px; padding: 0px 30px; >h1 < margin-bottom: 0px; >p < margin-top: 0px; >fieldset < margin-bottom: 15px; padding: 10px; >legend < padding: 0px 3px; font-weight: bold; font-variant: small-caps; >label < width: 110px; display: inline-block; vertical-align: top; margin: 6px; >em < font-weight: bold; font-style: normal; color: #f00; >input:focus < background: #eaeaea; >input, textarea < width: 249px; >textarea < height: 100px; >select < width: 254px; >input[type=checkbox] < width: 10px; >input[type=submit]
И вот результат:
Как и во всех формах, большая часть работы в нашем примере выполняете универсальным элементом , который собирает данные и создает флажки, переключатели и списки. Для ввода одной строки текста применяется элемент , а для нескольких — элемент ; элемент создает выпадающий список. Краткое обозрение этих и других элементов управления форм приведено в таблице:
| Элемент управления | HTML-элемент | Описание |
|---|---|---|
| Однострочное текстовое поле | Выводит однострочное текстовое поле для ввода текста. Если для атрибута type указано значение password, вводимые пользователем символы отображаются в виде звездочек (*) или маркеров-точек (•) | |
| Многострочное текстовое поле | Текстовое поле, в которое можно ввести несколько строчек текста | |
| Флажок | Выводит поле флажка, который можно установить или очистить | |
| Переключатель | Выводит переключатель — элемент управления в виде небольшого кружка, который можно включить или выключить. Обычно создается группа переключателей с одинаковым значением атрибута name, вследствие чего можно выбрать только один из них | |
| Кнопка | Выводит стандартную кнопку, активизируемую щелчком мыши. Кнопка типа submit всегда собирает информацию с формы и отправляет ее для обработки. Кнопка типа image делает то же самое, но позволяет вместо текста на кнопке вставить изображение. Кнопка типа reset очищает поля формы от введенных пользователем данных. А кнопка типа button сама по себе не делает ничего. Чтобы ее нажатие выполняло какое-либо действие, для нее нужно добавить сценарий JavaScript | |
| Список | Выводит список, из которого пользователь может выбирать значения. Для каждого значения списка добавляем элемент |
Одним из ограничений HTML-форм является то, что разработчик не может контролировать каким способом браузер отображает элементы управления формы. Например, если вы хотите заменить унылое серое поле флажка большим черно-белым полем с жирной красной галочкой, вам этого не удастся. (Одно из решений этой проблемы — создать с помощью JavaScript элемент с поведением, подобным флажку, иными словами, элемент меняет свой внешний вид, когда на нем щелкают.)
Это ограничение сохранилось и в HTML5 и распространяется на все новые элементы управления, которые мы рассмотрим. Это означает, что формы не подойдут для разработчиков, которым нужен полный контроль над внешним видом своих страниц в общем и требуются элементы управления с особым внешним видом в частности.
Теперь, когда у нас есть форма, с которой можно работать, настало время улучшить ее с помощью HTML5. Начнем мы это в следующих разделах с добавления подстановочного текста подсказок и поля с автоматическим фокусом.
Добавление подсказок
Обычно поля новой формы не содержат никаких данных. Для некоторых пользователей такая форма может быть не совсем понятной, в частности, какую именно информацию нужно вводить в конкретное поле. Поэтому часто поля формы содержат пример данных, которые нужно ввести в них. Этот подстановочный текст также называется «водяным знаком», так как он часто отображается шрифтом светло-серого цвета, чтобы отличить его от настоящего, введенного содержимого. Пример такого подстановочного текста показан на рисунке:
Вверху, когда поле пустое, в нем отображается подстановочный текст. Внизу, когда пользователь щелкает мышью в поле (устанавливая в нем фокус), подстановочный текст исчезает. Если пользователь переходит в другое поле, не введя ничего в первое, то поле снова заполняется подстановочным текстом.
Подстановочный текст для поля создается с помощью атрибута placeholder:
Браузеры, не поддерживающие подстановочный текст, просто не обращают внимания на атрибут placeholder; особенно грешит этим Internet Explorer. К счастью, это не такая уж и большая проблема, т.к. подстановочный текст — всего лишь приятная примочка, не обязательная для функционирования формы.
В настоящее время не существует стандартного, единообразного способа изменить внешний вид подстановочного текста, например, выделить его курсивом или шрифтом определенного цвета. Со временем разработчики браузеров создадут требуемые для этого обработчики. Но пока либо нужно применять специфические для браузера CSS-псевдоклассы (а именно -webkit-input-placeholder и -moz-placeholder), либо смириться с таким порядком вещей.
А вот псевдокласс focus обеспечивается лучшей поддержкой, и его можно использовать, чтобы изменять внешний вид текстового поля при получении фокуса. Например, сделать фон поля более темным, чтобы оно выделялось среди остальных, можно следующим образом:
input:focus
Фокус
Так как форма предназначена для ввода информации, первым делом после ее загрузки пользователи захотят вводить эту информацию. К сожалению, делать это они не смогут до тех пор, пока не щелкнут мышью по первому полю или выделят его с помощью клавиши , установив, таким образом, фокус на этом поле.
Пользователю можно помочь в этом, установив фокус на нужном начальном поле автоматически. Это можно сделать с помощью JavaScript, вызывая метод focus() требуемого элемента . Но этот подход требует лишней строки кода и иногда может вызывать раздражающие неувязки.
Например, особо проворные пользователи могут опередить вызов метода focus(), щелкнуть в каком-либо другом поле и начать вводить в нем, а когда метод, наконец, вызовется, пользователь грубо выдвинется из выбранного им поля и переместится в поле, выбранное методом. Но если управлять фокусом может браузер, он может быть несколько более смышленым и перемещать фокус только в том случае, если пользователь еще не выбрал другое поле.
На этой идее основан новый HTML5-атрибут autofocus, который можно вставить в элемент или (но только в один элемент формы), как показано в следующем примере:
Уровень поддержки браузерами атрибута autofocus примерно такой же, как и атрибута placeholder, и означает, что практически все браузеры поддерживают его, за исключением Internet Explorer. Но опять же, эта проблема легко решается. Проверить поддержку атрибута autofocus конкретным браузером можно с помощью инструмента Modernizr (который мы обсуждали в статье «Поддержка браузерами HTML5») и, если необходимо, запускать собственный код для автоматического фокуса.