Формы в веб-сайтах

Введение

Да. Интернет объединил миллионы цифровых документов в цифровую сеть. Но что еще более важно, он объединил людей и дал им возможность загружать в интернет тексты, фотографии и видео. Он дал нам возможность общаться в цифровом измерении. Именно возможность общения, обмена мнениями, создания и распространения информации была одним из ключевых факторов роста популярности Всемирной паутины, когда она появилась.

И поэтому элементы, которые позволили сайтам обеспечить возможность общения, крайне важны в цикле материалов об анатомии веб-сайтов. Речь идет, конечно, о формах.

Формы и их составляющие

Что такое форма

В физическом мире, когда мы в контексте документа говорим слово «форма», то представляем что-то вроде такого:

Как правило, форма — это скучный, объемный, написанный формальным языком бюрократический инструмент интеллектуальных пыток. Но вместе с тем, это способ собирать типичную информацию в структурированным образом. Идея формы определенного стандарта заключается в том, что в ней будет определенное количество полей, все они будут всегда одинаковыми и расположены в установленном порядке. То есть, бумажная форма — это совокупность полей информации. Кстати, избирательный бюллетень — это тоже бумажная форма, но проще.

Стандартная структура форм позволяла впоследствии специалисту, к которому эти бумажные формы поступали, переносить их содержание в бумажный каталог, в котором информация, собранная из всех форм, сохранялась в виде таблицы. Впоследствии, с появлением компьютеров, бумажные таблицы превратились в цифровые, но суть процесса не изменилась — стандартная форма помогала собирать данные в таком виде, чтобы их было легко переносить в таблицу. Эти вот таблицы с данными еще называют базами данных.

Такие структурированные базы данных позволяли облегчить работу с большими массивами информации, упорядочить ее. И несмотря на бюрократизм процессов, сопровождавших заполнение форм, в случае обращения в справочную службу за информацией относительно адреса какого-то учреждения или о конкретном специалисте, можно было довольно быстро все выяснить.


Именно бумажные формы были предками форм цифровых.

Общая идея здесь сохранилась, форма — это совокупность стандартных полей информации. Но в цифровых формах в дополнение к процессу заполнения есть еще и отправка формы. Она происходит, когда вы нажимаете на связанную с формой кнопку.

То есть, если раньше какой-то специалист переносил заполненные формы в бумажную или цифровую таблицу вручную, то формы веб-сайтов с помощью средств программирования позволяли делать это автоматически.

Причем автоматизация этого процесса позволила существенно облегчить и ускорить не только процесс наполнения баз данных, но и процесс получения данных из этой базы.

То есть цифровые формы могут служить как для передачи какой-либо информации, так и для ее получения. Например, форма заказа на сайте интернет-магазина передает информацию о заказчике, товаре, который его интересует, адресе доставки товара и статуса оплаты. После отправки этой формы указанная информация сохранится в базе данных интернет-магазина.

Еще один пример формы — это поле ввода на сайте Google. В нем вы указываете любую информацию и получаете соответствующий запросу результат.

Если обобщить, можно сказать, что цифровые формы — это средство для передачи и получения информации. Собственно, общение с веб-сайтом или с другими интернет-пользователями.

В веб-сайтах все формы заворачиваются в тег <form>.

Теперь попробуем выяснить, из каких элементов состоят формы.

Средства ввода информации в формы

Поля ввода

Базовым средством ввода информации в форму является однострочное поле ввода. Ему отвечает тег <input>.

Как правило, в него вводится небольшой по объему текст — например, имя или фамилия. Основой такого поля является интерактивная область ввода информации — контейнер.

В дополнение к нему поле может содержать название (по-английски label), текст-заполнитель (на английском его называют placeholder), сопроводительный текст-объяснение (например, с подсказками о допустимом количестве символов для данного поля) и введенный текст (если поле уже заполнено).

Название поля — это интерактивный элемент. С ним может взаимодействовать и пользователь, и программа чтения с экрана. Так, если пользователь нажмет на название поля, оно станет активным. А если незрячий пользователь перейдет к названию поля курсором, программа чтения прочитает его название.

Чаще всего и название, и текст-заполнитель играют роль справочных элементов. Но при этом они не замещают, а дополняют друг друга. Часто название поля передает суть содержания, который надо в него ввести, а текст-заполнитель служит подсказкой.

Текст объяснения не всегда видим по умолчанию, а иногда всплывает в виде дополнительной сопутствующей подсказки, когда пользователь заполняет данное поле.

В некоторых случаях для большей наглядности (или с чисто декоративной целью) в полях ввода используют еще и иконки. Например, в полях с паролем, телефоном или электронным адресом.

При этом, как и у любого другого интерактивного элемента, у полей ввода существуют различные состояния, отличающиеся визуально:

  • Не выбрано (состояние по умолчанию). Соответствует полю, которое не выбрано пользователем сейчас.
  • Наведение. В этом состоянии рамка поля и его фон могут несколько изменять цвет.
  • Активное поле (состояние фокуса). Это состояние, при котором пользователь может вводить информацию в поле. Визуально в нем должны использоваться более насыщенные цвета.
  • Заблокированное поле. В некоторых случаях поле является (или становится) недоступным для заполнения. Например, потому, что заполнение формы было ограничено временем или другими условиями заполнения формы.

Также у поля могут быть состояния, связанные с результатами его заполнения:

  • Статус проверки поля. В современных состояниях есть возможность мгновенной проверки поля сразу после его заполнения. Как правило, проверка действительно мгновенная, и этот статус не видно. Но иногда из-за слабого интернет-соединения и при условии, что для проверки информации в данном поле направляется запрос к базе данных, может появиться это состояние. Как правило, тогда рядом с полем или внутри поля появляется характерная иконка подгрузки.
  • Поле заполнено корректно. В этом состоянии форма показывает, что поле заполнено в соответствии с требованием формы. Это состояние часто обозначается зеленой иконкой с «птичкой» или даже зеленой рамкой контейнера.
  • Поле заполнено с ошибкой. Если поле заполнено некорректно, может появиться контекстная иконка, цвет рамки или фона приобретает красный оттенок, а рядом с полем появляется подсказка, как исправить ошибку.

Дополнительные типы полей ввода

В дополнение к однострочному полю ввода информации существует еще ряд специальных полей, имеющих соответствующие функциональные особенности. Каждому из них соответствует определенный атрибут типа, который прописывается в тег (<input type = “АТРИБУТ”>).

К ним относятся:

  • Поле поиска (атрибут “search”)
  • Текстовая область (атрибут “textarea”)
  • Поле даты (атрибут “date”)
  • Поле пароля (атрибут “password”)
  • Поле количества (атрибут “range”)
  • Поле выбора цвета (атрибут “color”)

Среди часто используемые еще есть поля для ввода телефона (атрибут “tel”) и имейла (атрибут “email”), но они скорее имеют технические, чем визуальные отличия, поэтому в этом материале мы их подробно разбирать не будем.

Далее мы опишем функции и особенности оформления полей подробнее.

Поле поиска

По всем своим особенностям поле ввода пароля аналогично обычному полю ввода, но в этом поле появляется дополнительный функциональный элемент в виде крестика, который позволяет очистить данное поле одним нажатием.

Текстовая область

Этот тип поля используется, когда необходимо ввести большой объем информации. В частности, его нередко используют как поле для комментариев к заказу.

По умолчанию оно содержит несколько строк. Если введенный пользователем в это поле текст превышает его высоту, в нем появляется возможность прокрутки.

В правом нижнем углу этого поля есть специальный интерактивный элемент управления, который позволяет изменять размер поля. Это делается для того, чтобы пользователю было удобнее просматривать введенный им текст.

По состояниям наведения это поле аналогично стандартному полю ввода.

Поле даты

Поле даты позволяет вызвать нативный календарь и с его помощью ввести значение даты. При этом часто оформление поля в неактивном состоянии возможно сделать в стилистике сайта, а вот оформление нативного календаря — гораздо сложнее.

Поле пароля

По всем особенностям поле пароля аналогично обычному полю ввода, но в этом поле введенное содержание закрывается звездочками.

Поле диапазона

Поле диапазона выглядит как ползунок. Оно состоит из таких компонентов, как незаполненный участок, заполненный участок и ползунок, который их разделяет. Это поле удобно использовать, например, для регулирования уровня громкости, яркости и тому подобного.

Имеет неактивное состояние, состояние наведения и состояние нажатия.

Поле выбора цвета

Поле выбора цвета позволяет вызвать нативную палитру вашей операционной системы. Как и в случае с выбором даты, как правило при этом меняют оформление только самого поля выбора цвета.

Радиокнопки

Радиокнопки имеют круглую форму и используются, когда пользователю необходимо выбрать один вариант из множества. Например, для выбора пола или однозначного ответа на вопрос — да или нет.

Визуально радиокнопка часто состоит из названия радиокнопки (или связанного с ним варианта выбора) и непосредственно элемента управления. Имеет неактивное, активное состояние, а также состояние наведения и заблокированное состояние.

Радиокнопки хорошо работают для множеств до 5–6 элементов. Когда их становится больше — целесообразнее использовать поле выбора (его мы опишем далее в этом материале).

В HTML им соответствует атрибут «radiobutton», поэтому на жаргоне их часто называют «радиобаттон».

Флажки (чекбоксы)

Флажки используются тогда, когда пользователь может сделать множественный выбор вариантов. Например, выбрать несколько ингредиентов для пиццы. Еще один контекст использования флажков — наоборот, выбор из одного варианта (как правило «да») — тогда используется один флажок. Вы с подобным имеете дело каждый раз, когда заключаете договор пользования. С точки зрения оформления, флажки имеют квадратную форму. Часто их сопровождает название, нажатие на которое активирует связанный с ней флажок. С флажком может быть связан и иллюстративный элемент.

Флажки могут иметь неактивное и активное состояние, а также состояние наведения и заблокированное состояние.

В HTML им соответствует атрибут «checkbox», поэтому на жаргоне их часто называют «чекбоксами».

Поля выбора

Поле выбора используется, когда необходимо выбрать один или несколько вариантов из большого множества опций. И под большим мы имеем в виду диапазон от нескольких десятков до десятков тысяч вариантов.

Визуально поле выбора выглядит как контейнер, которому соответствует название и текст-наполнитель. С полем выбора может быть также связан дополнительный поясняющий текст. В контейнере, как правило, справа, располагают стрелку-индикатор. Иногда содержание поля могут дополнять иконкой.

Если нажать на поле выбора, раскрывается меню со списком элементов, соответствующих данному полю.

По умолчанию поле находится в неактивном состоянии. Активное состояние — это когда поле является открытым, и вы видите соответствующие ему опции в выпадающем элементе. У поля также есть состояние наведения и заблокированное состояние.

Этому полю ввода соответствует тег <select>, поэтому на жаргоне его также называют «селектбоксом».

В дополнение к стандартному, существуют дополнительные подтипы полей выбора.

Типы полей выбора

Поле ввода с автодополнением и автозаполнением

Поле ввода с автодополнением — это своеобразная комбинация поля ввода и поля выбора. Оно выглядит и имеет состояния, аналогичные полю ввода информации, но после того, как пользователь вводит первые символы запроса, всплывает элемент, предлагающий надписи, среди которых пользователь может выбрать подходящий вариант, не дописывая текст до конца.

При этом с появлением этого контекстного перечня поле ввода превращается в поле выбора.

По-английски этот принцип еще называют autosuggest (автоматическое предложение). В этом случае система предлагает несколько вариантов заполнения поля.

Есть еще одна подобная механика, она называется автозаполнение (autocomplete). Она построена на принципе, когда система предлагает варианты заполнения поля.

Эту механику вы знаете, ведь ее активно использует Google.

Поле выбора с группами

В некоторых полях выбора варианты во всплывающем элементе объединены в группы. Это оправдано, например, для группировки городов по областям и улиц по районам. Визуально это работает аналогично тому, как демонстрируется иерархия в многоуровневых списках.

Поле выбора с множественным выбором

В полях выбора можно настраивать множественный выбор вариантов. Это несколько меняет стандартную механику такого поля выбора, ведь по умолчанию, когда пользователь выбирает какой-то вариант из перечня во всплывающем элементе, этот элемент исчезает. При множественном выборе этого не происходит, нажатие выполняет роль выбора элемента из списка. Поэтому часто в подобных полях выбора еще есть кнопка, которая подтверждает выбор избранных вариантов.

Другие часто встречающиеся поля ввода

Кредитная карточка

Достаточно распространено использование полей, связанных с кредитной картой. Для их реализации приходится использовать дополнительные программные сценарии, которые позволяют разбивать номер кредитной карты на отдельные группы цифр и выбирать соответствующий логотип платежной системы в поле ввода.

Captcha и reCaptcha

Captcha и reCaptcha — это специальные дополнительные поля, призванные снизить количество автоматизированного спама, с которым часто приходится иметь дело всем, у кого на сайте есть формы. Дело в том, что большинство спам-роботов пока не умеет обходить использующиеся в этих полях алгоритмы идентификации спамеров. Вы с ними, вероятно, и сами имеете дело время от времени.

Вот несколько примеров таких полей:

Кнопки

В начале материала мы отмечали, что в отличие от бумажных форм, которые можно лишь заполнить, в цифровых формах есть еще отправка. В большинстве форм это действие выполняется с помощью кнопок. В языке гипертекстовой разметки им соответствует тег <button>.

На самом деле к кнопкам могут быть привязаны и другие действия: сохранение файла, печать документа, загрузка изображения, удаление объекта, переход к следующему элементу в списке и тому подобное. В принципе, выполнение любого действия в пределах сайта выполняется путем нажатия кнопки.

Кнопка может состоять из контейнера (то есть, области, на которую можно нажать), текста (поскольку кнопки связаны с действиями, лучше всего, чтобы текст содержал соответствующий глагол — «оформить заказ», «удалить», «напечатать» и так далее) и контекстной иконки.

Кнопка может находиться в нескольких состояниях:

  • Обычное состояние — означает, что кнопка доступна для нажатия. Это состояние по умолчанию.
  • Наведение — это состояние, при котором на кнопку наводится курсор. Часто сопровождается легким визуальным изменением кнопки, чтобы подчеркнуть ее интерактивность.
  • Нажатие — активное состояние, когда пользователь нажал на кнопку, но еще не отпустил ее. После того, как он отпускает палец или мышку, состояние возвращается к обычному.
  • Фокус — это состояние, при котором пользователь выделил этот элемент с помощью клавиатуры или другого средства ввода.
  • Обработка — это состояние, когда после нажатия формы началась ее обработка.
  • Заблокировано — это состояние, при котором на кнопку нельзя нажать. Часто такое состояние связано с тем, что одно или несколько необходимых полей в данной форме не были заполнены.

В заключение

В этом материале мы рассмотрели не все, а только типичные элементы форм. В пятой версии HTML появилось много различных подтипов полей ввода информации, описание которых могло бы занять целый модуль.

Впрочем, описанных элементов форм вполне достаточно, чтобы на их основе собирать все типовые формы, с которыми приходится иметь дело веб-дизайнерам: формы авторизации и регистрации, формы заказа, восстановления пароля и так далее.

В дальнейшем, за пределами курса «Основы веб-дизайна», мы будем подробнее разбирать типовые формы и особенности работы с ними, а также дополнительные интерактивные возможности форм.

·
500
·
goodsuper 8
Наступна стаття
Навигация на веб-сайтах
0
Головна