Формы
Виджет Форма (Form) используется для создания форм, являющихся важной частью многих сайтов. Это могут быть формы регистрации пользователей, формы обратной связи, формы заказа и т.п.
Форма структурно состоит из трех дочерних элементов:
- Состояние По умолчанию (Default State) – содержит все элементы формы
- Состояние Успешной отправки (Success State) – содержит сообщение, возвращаемое после успешной отправки формы
- Состояние Ошибки (Error State) – содержит сообщение, которое выводится в случае ошибки при отправке формы
Эти элементы отображают три возможных состояния Формы. При создании Формы она находится в состоянии По умолчанию. В этом состоянии происходит основная работа над Формой - добавление и удаление элементов и настройка их стилей.
Для управления Формой в состояниях Успешной отправки и Ошибки нужно переключить состояние Формы в Настройках. Подробнее - Состояния Формы и ее полей.
При создании Форма содержит следующие элементы:
- Заголовок формы (текстовый элемент)
- Поле ввода имени
- Поле ввода электронной почты
- Кнопку Отправить
В панели Элементов (Elements) кроме самого виджета Формы находятся отдельные ее элементы, которые можно добавить в Форму.
Используется для сбора однострочных данных.
Поле ввода может использоваться для ввода данных нескольких типов:
- Обычный текст (Plain)
- Электронная почта (E-mail)
- Телефон (Phone)
- Число (Number)
- Дата (Date)
Выбрать нужный тип данных можно в Настройках на правой панели в поле Тип (Type).
Для типа данных Телефон существует дополнительная настройка - Маска поля (Field mask), которая позволяет выбрать шаблон ввода номера телефона для разных стран.
После выбора страны в поле появляется соответствующий шаблон.
Установка типа данных для Поля ввода позволяет пользователям вводить данные только выбранного типа. При вводе некорректных данных выведется ошибка.
Чтобы данные из форм передавались корректно, укажите название поля на вкладке «Настройки» на панели стилей. Например, для поля сбора имён — «Имя».
Позволяет посетителям вводить многострочные данные, например, длинное сообщение. Обычно его используют для ввода комментариев, отзывов и другого длинного текста.
Элемент для ответа на вопрос по типу “да” или “нет”. Его лучше всего использовать для данных, когда пользователь может согласиться или нет с какими-то условиями.
Чекбокс позволяет сделать выбор для одного варианта (вопроса) или же добавить несколько вариантов для множественного выбора. Добавить варианты можно в Настройках, нажав на кнопку + в разделе Элементы списка (List Items).
Вы можете также удалить вариант, нажав на кнопку -, или поменять варианты местами, перетащив за иконку слева от названия.
Для изменения названия варианта кликните на нужное название и введите новое.
Позволяют пользователю выбрать один вариант из нескольких.
Так же, как для Чекбоксов, для Радио-кнопок можно добавить варианты в Настройках.
Раскрывающийся список с возможностью выбора одного или нескольких элементов списка.
По умолчанию в списке выбора три опции. Вы можете редактировать опции в Настройках, добавляя, удаляя, меняя местами и переименовывая их.
По умолчанию для пользователя возможен выбор только одного элемента из списка. Чтобы сделать возможным выбор одновременно нескольких элементов, нужно включить опцию - Разрешить множественный выбор. В этом случае пользователь сможет выбрать несколько вариантов из списка с помощью клавиш Shift или Ctrl.
Кнопка отправки формы, при нажатии на которую данные, внесенные пользователем в форму, отправляются владельцу сайта.
Кнопка Отправить есть у каждой созданной формы по умолчанию.
Вы можете добавить в Форму любой элемент Формы, например Поле ввода (Input) или Чекбокс (Checkbox), чтобы настроить нужный функционал.
Также в Форму при необходимости можно добавить обычные элементы или виджеты, например, Текст с описанием или Div-блок для группировки элементов Формы.
Обратите внимание, что все элементы Формы содержатся в блоке Состояние по умолчанию (Default State), поэтому новые элементы нужно добавлять именно в этот блок.
Для добавления элемента в Форму:
- или выберите Форму (блок Default State) на Холсте или вкладке Слоев и кликните на название нужного элемента в панели Элементов (Elements)
Элементы формы можно добавлять только в блок Формы и перетаскивать только внутри него.
Каждый элемент формы (кроме кнопки Отправить) представляет собой группу элементов, имеющих следующую структуру:
- Метка поля (Field Label) - текстовый элемент с названием поля, которое отображается на странице. Текст Метки поля можно отредактировать, можно также удалить Метку со страницы.
- Поле (название в зависимости от элемента) - непосредственно элемент Формы, с которым взаимодействует пользователь.
- Сообщение об ошибке (Error Message) - сообщение, которое выводится при ошибке в поле (например, если обязательное поле не заполнено). Редактировать Сообщение об ошибке можно только переключив состояние Формы. Подробнее - Состояние полей Формы.
Например, структура группы Поля ввода (Input Group) выглядит следующим образом:
На вкладке Настройки правой панели можно посмотреть параметры для каждого элемента Формы. Эти параметры будут различаться в зависимости от типа элемента. Например, для Поля ввода существует параметр Тип, а для Чекбокса, Радио-кнопок и Поля выбора - Элементы списка.
У всех полей Формы (кроме кнопки Отправить) обязательно есть два параметра:
- Название поля (Field name) - заголовок, передающийся в данные с результатами отправки формы.
- Обязательное поле (Required field) - если параметр установлен, пользователь не сможет отправить форму, не заполнив это поле.
Элементы Поле ввода и Текстовая область дополнительно имеют настройку Фоновый текст (Placeholder). В этой настройке хранится текст, который отображается в поле до ввода в него текста и пропадает в тот момент, когда пользователь начинает вводить текст в поле. Это может быть название поля или образец текста.
Не следует использовать фоновый текст в качестве замены для метки поля ввода или текста справки (например, “Пароль должен содержать не менее 8 символов”). Фоновый текст не будет переведен для посетителей сайта с помощью инструментов перевода и будет недоступен для программ чтения с экрана. Кроме того, фоновый текст исчезает, когда пользователь начинает вводить текст в поле, что затруднит для него доступ к этой информации. Для этих целей лучше использовать отдельное текстовое поле.
В Настройках Формы вы можете переключать Состояния Формы (Form state) и Состояния полей Формы (Fields state):
Переключая Состояния Формы в Настройках, можно увидеть на Холсте, как выглядит Форма в этом состоянии:
- По умолчанию (Default State) - состояние по умолчанию до того, как пользователь начнет взаимодействие с Формой.
- Успешная отправка (Success State) - состояние Формы после ее успешной отправки. В этом состоянии пользователю выдается сообщение об успешной отправке, которое можно изменить и настроить по своему усмотрению.
- Ошибка (Error State) - состояние Формы при возникновении проблем с ее отправкой. В этом состоянии пользователю выдается сообщение об ошибке, которое можно изменить и настроить по своему усмотрению.
Для редактирования сообщения об успешной отправке Формы:
- выберите Форму (на Холсте или на вкладке Слоев)
- в Настройках в параметре Состояние Формы (Form State) выберите Успешная отправка (Success)
- отредактируйте текст сообщения об успешной отправке на Холсте
Для редактирования сообщения об ошибке:
- выберите Форму (на Холсте или на вкладке Слоев)
- в Настройках в параметре Состояние Формы (Form State) выберите Ошибка (Error)
- отредактируйте текст сообщения об ошибке на Холсте
У поля Формы может быть два состояния:
- По умолчанию (Default) - состояние поля по умолчанию до того, как пользователь начнет взаимодействие с Формой.
- Ошибка (Error) - состояние поля при возникновении в нем ошибок при отправке Формы. В этом состоянии пользователю выдается сообщение об ошибке, которое можно изменить и настроить по своему усмотрению.
Для редактирования сообщения об ошибке для поля:
- выберите Форму (на Холсте или на вкладке Слоев)
- в Настройках в параметре Состояние полей (Fields state) выберите Ошибка (Error).
- на Холсте отредактируйте сообщение об ошибке под нужным элементом формы
По умолчанию Форма наследует полную ширину своего родительского элемента. Вы можете настроить стили для Формы, включая размеры, отступы, расположение элементов и т.д. Для этого выберите Форму на Холсте или на вкладке Слоев и установите нужные стили на вкладке Стилей.
Например, можно расположить поля формы горизонтально. Для этого:
- Поместите поля Формы в новый Div-блок.
- Установите в стилях режим Flex и горизонтальное направление, а также параметры выравнивания
Вы можете также стилизовать отдельно все элементы Формы. Можно установить стили для всей группы элемента, например, задав ему отступы. Также можно стилизовать отдельно метку и само поле элемента.
Например, вы можете изменить шрифт заголовка Формы и меток полей, размер и фон полей ввода, цвет и размер кнопки и т.п.
У Полей ввода можно заменить Метки полей на Фоновый текст внутри поля. Для этого:
- Метки полей нужно скрыть (в настройках элемента метки в разделе Display) или удалить элемент метки с Холста.
- В Настройках Поля ввода задать Фоновый текст.
По умолчанию Чекбоксы, Радио-кнопки и Поле выбора имеют пользовательские стили, т.е. можно задать стили для их элементов. В настройках Формы можно включить параметры дополнительных стилей - "Применить стандартные стили браузера к Чекбоксу и Радио-кнопкам" и "Применить стандартные стили браузера к Полю выбора". В этом случае эти поля будут в стилях браузера и настроить стили для их состояний будет невозможно.
Для стилизации Фонового текста:
- Выберите на Холсте элемент Формы (нужно выбрать непосредственно сам элемент, а не группу элементов).
- На вкладке Стилей в разделе Состояние (State) включите галочку “Фоновый текст” (¨Placeholder¨) и установите желаемые стили для Фонового текста.
Например, вы можете изменить размер шрифта и цвет Фонового текста.
