Формы
Виджет Форма (Form) используется для создания форм, являющихся важной частью многих сайтов. Это могут быть формы регистрации пользователей, формы обратной связи, формы заказа и т.п.
Форма структурно состоит из трех дочерних элементов:
- Состояние По умолчанию (Default State) – содержит все элементы формы
- Состояние Успешной отправки (Success State) – содержит сообщение, возвращаемое после успешной отправки формы
- Состояние Ошибки (Error State) – содержит сообщение, которое выводится в случае ошибки при отправке формы
Эти элементы отображают три возможных состояния Формы. При создании Формы она находится в состоянии По умолчанию. В этом состоянии происходит основная работа над Формой - добавление и удаление элементов и настройка их стилей.
Для управления Формой в состояниях Успешной отправки и Ошибки нужно переключить состояние Формы в Настройках. Подробнее - Состояния Формы и ее полей.
При создании Форма содержит следующие элементы:
- Заголовок формы (текстовый элемент)
- Поле ввода имени
- Поле ввода электронной почты
- Кнопку Отправить
В панели Элементов (Elements) кроме самого виджета Формы находятся отдельные ее элементы, которые можно добавить в Форму.
Используется для сбора однострочных данных.
Поле ввода может использоваться для ввода данных нескольких типов:
- Обычный текст (Plain)
- Электронная почта (E-mail)
- Телефон (Phone)
- Число (Number)
- Дата (Date)
Выбрать нужный тип данных можно в Настройках на правой панели в поле Тип (Type).
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/XsIVmlQC6c28nE9PQqbiC_izobrazhenie.png?format=webp)
Для типа данных Телефон существует дополнительная настройка - Маска поля (Field mask), которая позволяет выбрать шаблон ввода номера телефона для разных стран.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/9YQ02EdouVaxdRLpOC1J4_izobrazhenie.png?format=webp)
После выбора страны в поле появляется соответствующий шаблон.
Установка типа данных для Поля ввода позволяет пользователям вводить данные только выбранного типа. При вводе некорректных данных выведется ошибка.
![Пример Поля ввода с типом данных Телефон Пример Поля ввода с типом данных Телефон](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/-VhZbAVqfOIhftJ88IriA_izobrazhenie.png?format=webp)
Чтобы данные из форм передавались корректно, укажите название поля на вкладке «Настройки» на панели стилей. Например, для поля сбора имён — «Имя».
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/UsUZQxMmC85R8s_g8bxo0_image.png?format=webp)
Позволяет посетителям вводить многострочные данные, например, длинное сообщение. Обычно его используют для ввода комментариев, отзывов и другого длинного текста.
![Пример Текстовой области Пример Текстовой области](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/f8dVMs1P8b_Zax6VL02AD_izobrazhenie.png?format=webp)
Элемент для ответа на вопрос по типу “да” или “нет”. Его лучше всего использовать для данных, когда пользователь может согласиться или нет с какими-то условиями.
Чекбокс позволяет сделать выбор для одного варианта (вопроса) или же добавить несколько вариантов для множественного выбора. Добавить варианты можно в Настройках, нажав на кнопку + в разделе Элементы списка (List Items).
Вы можете также удалить вариант, нажав на кнопку -, или поменять варианты местами, перетащив за иконку слева от названия.
Для изменения названия варианта кликните на нужное название и введите новое.
![Пример Чекбокса Пример Чекбокса](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/anbDHbGhJHPhoXDtTdHa-_izobrazhenie.png?format=webp)
Позволяют пользователю выбрать один вариант из нескольких.
Так же, как для Чекбоксов, для Радио-кнопок можно добавить варианты в Настройках.
![Пример Радио-кнопок Пример Радио-кнопок](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/SQQqlGfxmEDIP4vpP7WCg_izobrazhenie.png?format=webp)
Раскрывающийся список с возможностью выбора одного или нескольких элементов списка.
По умолчанию в списке выбора три опции. Вы можете редактировать опции в Настройках, добавляя, удаляя, меняя местами и переименовывая их.
По умолчанию для пользователя возможен выбор только одного элемента из списка. Чтобы сделать возможным выбор одновременно нескольких элементов, нужно включить опцию - Разрешить множественный выбор. В этом случае пользователь сможет выбрать несколько вариантов из списка с помощью клавиш Shift или Ctrl.
![Пример Поля выбора с возможностью выбора одного элемента Пример Поля выбора с возможностью выбора одного элемента](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/aivCk_URgX0TRQM6aiIee_izobrazhenie.png?format=webp)
![Пример Поля выбора с множественным выбором Пример Поля выбора с множественным выбором](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/1M0BuEIc5P97fyX-zeQLi_izobrazhenie.png?format=webp)
Кнопка отправки формы, при нажатии на которую данные, внесенные пользователем в форму, отправляются владельцу сайта.
Кнопка Отправить есть у каждой созданной формы по умолчанию.
Вы можете добавить в Форму любой элемент Формы, например Поле ввода (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) или удалить элемент метки с Холста.
![Элемент метки Поля ввода Элемент метки Поля ввода](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/YoYZl7NT1BB4rkXLLzUmP_izobrazhenie.png?format=webp)
- В Настройках Поля ввода задать Фоновый текст.
![Фоновый текст в Настройках Поля ввода Фоновый текст в Настройках Поля ввода](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/i8L_Adl7HCK7gMEPw__A8_izobrazhenie.png?format=webp)
![Поле ввода с Фоновым текстом Поле ввода с Фоновым текстом](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/n-CfpdpydmxI-V8QxbXDA_izobrazhenie.png?format=webp)
По умолчанию Чекбоксы, Радио-кнопки и Поле выбора имеют пользовательские стили, т.е. можно задать стили для их элементов. В настройках Формы можно включить параметры дополнительных стилей - "Применить стандартные стили браузера к Чекбоксу и Радио-кнопкам" и "Применить стандартные стили браузера к Полю выбора". В этом случае эти поля будут в стилях браузера и настроить стили для их состояний будет невозможно.
Для стилизации Фонового текста:
- Выберите на Холсте элемент Формы (нужно выбрать непосредственно сам элемент, а не группу элементов).
- На вкладке Стилей в разделе Состояние (State) включите галочку “Фоновый текст” (¨Placeholder¨) и установите желаемые стили для Фонового текста.
Например, вы можете изменить размер шрифта и цвет Фонового текста.