Верстка html форм. Тэг label. Улучшаем usability

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

Да, не каждый посетитель знает, какой именно вот этому элементу для быстрого доступа применить access key, или hot key c клавиатуры. Не каждый воспользуется tab (и tabindex) соответственно для быстрого перехода между полями формы.

Но, де факто, каждый из посетителей давно уже привык к следующему поведению: если рядом с полем есть его заголовок, то, щелкнув по заголовку левой кнопкой мыши, можно быстро активировать поле целиком. Все это и checkbox – флажков множественного выбора, и radio button – элементов точного выбора, и текстовых полей, и многострочных текстовых полей.

За такое поведение отвечает тег label, которым многие верстальщики пренебрегают. А зря, ведь те же элементы множественного выбора, такие как input type=» radio» или input type=» checkbox», требуют из-за своих размеров чуть ли не ювелирного попадания курсором мыши по их области, чтобы сделать свой выбор.

Да и стилизации поддаются через пень-колоду даже в самых современных браузерах (многие web мастера выкручивается, как могут, и при верстке сайтов используют даже самописные javascript элементы, реализующие сходное поведение). А когда таких элементов много на странице?

У посетителя просто сдадут нервы, выделяя 10-й по счету checkbox, или просто от нетерпения посетитель проигнорирует необязательные из них, а может и закрыть страницу и никогда больше не вернуться на подобный сайт.

А ведь все просто: достаточно заключить текстовое пояснение рядом с элементом для активации самого поля в тег label, которому в атрибуте for передать id связанного элемента, и тогда посетитель, кликнув по текстовому пояснению, сможет с легкостью сделать свой выбор:

Пару примеров в html:

 
<div class="row"> 
     <label for="user_password">Введите Ваш пароль</label> 
     <input id="user_password" name="password" value="" /> 
</div> 
<div class="row"> 
    <input type="checkbox" id="remember-me" />
    <label for="remember-me">Запомнить меня?</label> 
</div>

Как видите, посетителю достаточно лишь щелкнуть по текстовому пояснению «Введите ваш пароль», обрамленному в тег label, связанный при помощи атрибута for с текстовым полем пароля label for=» user_ password». И текстовое input id=» user_ password» поле заполнения пароля сразу станет активным, а в случае с флажком «Запомнить меня?».

Достаточно щелкнуть по самой надписи «Запомнить меня?» для снятия, установки флажка, и нет необходимости «прицеливаться» по элементу checkbox раз за разом, делая выбор. Запомните, данная мелочь делает работу с формами гораздо удобнее для пользователей создаваемого Вами интернет сайта.