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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Тест для эрудитов: Что вы знаете о знаменитых часах?

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

Изготовление лестничной конструкции

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

Запись на приём к стоматологу

Оформите онлайн-запись к стоматологу Подробнее
Gold

Назовите родные континенты представленных животных

Сможете ли назвать континенты животных, которые представлены на фото? Подробнее

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

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