Помимо пассивного просмотра контента сайта, пользователи часто активно взаимодействую с различными интерактивными элементами. Формы и их поля - одни из них. В этой лекции можно почерпнуть информацию о том, как проектировать формы, и какие поля стоит выбрать для тех или иных типов информации, ввводимых пользователями.
Перед прочтением стоит вспомнить основы того, как позиционировать элементы на странице. Это может быть полезным для нетипичного размещения полей форм.
Первый параграф в данной лекции предоставит вам первый опыт создания веб-форм, в том числе проектирование простой формы, её реализацию с использованием HTML-элементов управления формой и других HTML-элементов, добавление стилей через CSS и описание того, как данные из формы отсылаются на сервер. Мы более подробно остановимся на каждой из этих подтем далее в параграфе.
Веб-формы (или HTML-формы) являются одним из основных элементов взаимодействия между пользователем и сайтом или приложением. Формы позволяют пользователю ввести данные, которые затем отправляются на сервер для их дальнейшей обработки и хранения или используются на стороне клиента для обновления интерфейса (например, добавление нового элемента в список или открытие и закрытие элемента интерфейса).
HTML-формы состоят из одного или нескольких элементов управления форм (иногда их также называют виджетами) и некоторых дополнительных элементов для структурирования формы. Элементами управления могут быть однострочные или многострочные текстовые поля, выпадающие списки, кнопки, чекбоксы, радиокнопки, большинство из которых создаются через html-элемент <input>, однако есть и другие элементы, о которых тоже стоит узнать.
В элементах управления форм можно задать правила, указывающие на определённый формат данных или значений, которые могут быть введены (валидация форм), а также к ним могут быть добавлены текстовые строки, описывающие эти элементы для зрячих и незрячих пользователей.
Перед тем, как начать программировать, всегда лучше остановиться и подумать о вашей форме. Создание быстрого наброска поможет определить верный набор данных, которые вы хотите получить от пользователя. С точки зрения UX, удобства использования интерфейса, важно помнить о том, что чем длиннее ваша форма, тем больше риск потерять пользователей. Сделайте форму краткой и лаконичной: спрашивайте только о той информации, которая вам действительно необходима.
Проектирование форм является важным этапом при создании сайта или приложения. Удобство использования форм (UX) выходит за рамки данной лецкции, однако если вы хотите углубиться в эту тему, то вам следует прочитать следующие статьи:
Если хотите, чтобы формы на странице выглядели нативно для какой-либо платформы, можно посмотреть на UI Kit для соотетствующего устройства.
Android Material Design kit
iOS UI kit