Как повысить эффективность html-форм: часть 1

Специалисты компании «ПРОФИ» специально для наших читателей разобрали несколько простых примеров, благодаря которым вы сможете создавать эффективно работающие HTML-формы.

HTML форма – раздел на сайте, который позволяет пользователям вводить информацию для ее последующей обработки системой. Примером HTML формы служат поля регистрации нового пользователя.

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

Полезные советы по составлению форм

При разработке форм важно позаботиться о том, чтобы их заполнение заняло минимум времени, а пользователь смог корректно заполнить все поля. Основные проблемы:

• не получается разобраться, какие данные необходимо разместить в поле;
• возникли проблемы с форматом ввода;
• трудно понять, какая информация обязательна к указанию.

Бесполезно писать к каждой форме развернутую инструкцию – ее читать все равно не будут. Намного эффективнее использовать специальные инструменты.

Label

Знакомьтесь, тег label. Он связывает текст с определенным элементом формы. Его используют для информирования пользователя о дальнейших действиях. Известны два метода объединения объекта с меткой:

• С неявной связью, выглядит это так:

<label><input type="radio" name="confirm" value="yes">Yes</label>

• С явной связью, для которой характерно использование атрибута и идентификатора (for и id, соответственно). Код в этом случае может быть таким:

<label for="name">Your Name</label>
<input id="name" ...>

Второй способ позволяет изменять стили переключателей (radio) и флажков (checkbox) вне зависимости от оформления остальных элементов ввода. При этом не возникает потребности в использовании селекторов атрибутов – она работают не во всех браузерах.

Применение тега label дает два преимущества:

• Автоматическое распознавание голосовыми браузерами.
• Возможность активизации ассоциированного элемента. Если объяснять по-простому, активным будет не только флажок или переключатель, но и текст, который к ним относится. Такие формы лучше воспринимаются пользователями.

Тег label в первую очередь нужен для того, чтобы сделать интерфейс более дружественным к посетителям сайта.

Placeholder

Этот атрибут служит для вывода текста внутри поля формы. Прежде подобная функция реализовывалась посредством скриптов, с появлением Placeholder все стало существенно проще:

<input type="text" placeholder="имя" ...>

Значение остается до тех пор, пока пользователь не начнет ввод данных. Благодаря атрибуту placeholder можно минимизировать ошибки пользователей при заполнении формы.

Ассоциированные подсказки

В некоторых случаях целесообразно размещение дополнительной подсказки рядом с полем формы. Ее воспринимает голосовой браузер. Образец кода:

<label for="date">date</label>
<input id="date" aria-describedby="date-note" ...>
<em id="date-note" class="note">Укажите, пожалуйста, дату Вашего рождения</em>

Сегодня мы рассказали лишь о некоторых инструментах. В следующей статье мы продолжим разговор о том, как повысить эффективность форм средствами HTML.