Плавающие заголовки для текстовых полей формы

Здравствуйте.

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

Есть несколько вариантов размещения заголовков (label-ов) полей в форме:

  • Заголовок над полем ввода
  • Заголовок слева от поля ввода
  • Заголовок внутри поля

Мы об этом рассказывали в статье «Эффективное проектирование веб-форм: структура, поля ввода, метки и действия».

У каждого способа есть свои плюсы и минусы. Но сегодня мы бы хотели подробнее поговорить о последнем способе размещения заголовка.

Чтобы разместить заголовок внутри текстового поля в нашем конструкторе необходимо использовать параметр «Значение по умолчанию»:

Значение по умолчанию для текстового поля

Прописав здесь нужный текст он будет выводиться в форме внутри текстового поля:

Отображение значения по умолчанию в веб-форме

Для вывода данного текста используется так называемый атрибут поля «placeholder». О том, как эффективно использовать этот атрибут можно узнать из статьи «Альтернатива атрибуту «placeholder».

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

Отключение заголовка в веб-форме

Тогда форма принимает вот такой вид:

Пример веб-формы без заголовков с использованием placeholder-а

Форма становится компактной, нет лишних элементов. Вроде бы все хорошо, но у этой формы есть один недостаток - она нагружает кратковременную память. Стоит лишь пользователю поставить курсор в поле и/или начать набор, как placeholder пропадает, и для того, чтобы его увидеть, нужно удалить уже набранное содержимое. Другая же проблема – возможность того, что пользователь спутает заголовк с обычным текстом и проигнорирует необходимость заполнить поле.

Использование placeholder в веб-форме

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

Хорошей заменой placeholder-у служит так называемый «floating label». Давайте активируем плавающий заголовок для элементов нашей формы. Для этого перейдите к редактированию нужного элемента и отметьте чекбокс, который изображен ниже:

Плавающий заголовок для текстовых полей формы

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

Использование floating label в веб-форме

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

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

На сегодня это все. Удачного дня!

Комментарии
Готовые шаблоны веб-форм
Gold

Рассчитайте стоимость доставки грузов

Ответьте на несколько простых вопросов и получите примерный расчёт стоимости доставки вашего груза Подробнее
Gold

Шаблон квиза для оценки стоимости авто

Благодаря этому квизу, вы сможете узнать всё самое важное об автомобиле у собственника за несколько минут Подробнее
Gold

Куда отправиться в путешествие?

Для турфирм. Пройдите короткий тест, выберите страну для идеального отдыха и получите скидку 10% на любой тур из нашего каталога!
$6.00
Подробнее
Gold

Ремонт квартиры

Рассчитайте стоимость ремонта квартиры Подробнее

Закажите разработку формы под ключ

Нет времени разбираться со всеми настройками самому? Не проблема!
Закажите разработку веб-формы у нас