Плавающие заголовки для текстовых полей формы
Здравствуйте.
Сегодня хотим рассказать о новой возможности, которая появилась у нас в конструкторе веб-форм. Речь идет о «плавающих» заголовках для текстовых полей формы.
Есть несколько вариантов размещения заголовков (label-ов) полей в форме:
- Заголовок над полем ввода
- Заголовок слева от поля ввода
- Заголовок внутри поля
Мы об этом рассказывали в статье «Эффективное проектирование веб-форм: структура, поля ввода, метки и действия».
У каждого способа есть свои плюсы и минусы. Но сегодня мы бы хотели подробнее поговорить о последнем способе размещения заголовка.
Чтобы разместить заголовок внутри текстового поля в нашем конструкторе необходимо использовать параметр «Значение по умолчанию»:
Прописав здесь нужный текст он будет выводиться в форме внутри текстового поля:
Для вывода данного текста используется так называемый атрибут поля «placeholder». О том, как эффективно использовать этот атрибут можно узнать из статьи «Альтернатива атрибуту «placeholder».
Обычно значение поля по умолчанию используют в качестве подсказки, но иногда в целях уменьшения размеров формы или устранения визуального «шума», его используют в качестве заголовка. Для этого сам заголовок в форме скрывают, установив в настройках соответствующий чекбокс:
Тогда форма принимает вот такой вид:
Форма становится компактной, нет лишних элементов. Вроде бы все хорошо, но у этой формы есть один недостаток - она нагружает кратковременную память. Стоит лишь пользователю поставить курсор в поле и/или начать набор, как placeholder пропадает, и для того, чтобы его увидеть, нужно удалить уже набранное содержимое. Другая же проблема – возможность того, что пользователь спутает заголовк с обычным текстом и проигнорирует необходимость заполнить поле.
Поэтому это удобно лишь для самых простых форм, в то время как в более длинных формах от заголовков требуется большая информативность для получения информации от пользователя.
Хорошей заменой placeholder-у служит так называемый «floating label». Давайте активируем плавающий заголовок для элементов нашей формы. Для этого перейдите к редактированию нужного элемента и отметьте чекбокс, который изображен ниже:
Активировав плавающий заголовок для всех полей, форма будет иметь такой же вид, как и в предыдущем примере, но поведение будет совершенно другим:
Как видно на примере, как только мы ставим курсор в текстовое поле, заголовок формы автоматически поднимается вверх. Таким образом при вводе текста он не исчезает и всегда остается на виду.
Пользователям не всегда нравится заполнять формы – поэтому сделайте этот процесс наиболее легким. Это повысит ваши шансы на получение информации и превращение посетителя сайта в постоянного клиента.
На сегодня это все. Удачного дня!
