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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что вы знаете о своем здоровье и теле?

Для размещения на интернет-ресурсах ЗОЖ, медицинских и оздоровительных центров, аптек, фитнес-залов, тематических СМИ, магазинов продуктов и т.д.
$5.00
Подробнее
Gold

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

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

Бетонные работы "Под Ключ" с использованием профессиональной опалубки

С помощью этого квиза пользователю предлагается ответить на несколько вопросов с помощью которых можно рассчитать примерную стоимость бетонных работ Подробнее
Gold

Оцените работу нашей автомойки

Оцените работу нашей автомойки, узнайте оценку автомойки и пожелания клиентов Подробнее

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

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