Сложно представить работу в интернете без использования форм. Но, к сожалению, очень часто удобство их использования оставляет желать лучшего.
В этой заметке я расскажу, как можно значительно увеличить этот показатель для формы с радио кнопками (radio buttons) за счет правильной HTML разметки и нескольких CSS стилей.
Обратите внимание. Применение этих советов никоим образом не сказывается на работоспособности формы и не изменяет отправляемые данные.
Как говорится «Одна картинка стоит тысячи слов». Поэтому сразу даю ссылки на демонстрационную страничку и архив с файлами примера.
Рассмотрим самый простой вариант разметки
<p><input type="radio" name="simple" value="1" /> Раз</p> <p><input type="radio" name="simple" value="2" /> Два</p> <p><input type="radio" name="simple" value="3" /> Три</p>
Такая HTML разметка создаст три вполне работоспособные радиокнопки, которые входят в одну группу (simple).
В принципе, на этом можно было бы остановиться, ведь кнопки уже работают. Но вот пользоваться ими совсем неудобно.
Посетитель должен точно попасть мышкой по кнопке, а она совсем небольшая. Промахнулся на пару миллиметров – кнопка не отмечена.
А если при этом форма содержит несколько групп таких кнопок, то раздражение гарантировано.
Изменяем HTML разметку
Попробуем исправить ситуацию. Добавим к названиям кнопок тег label.
<p><input type="radio" name="labeled" value="1" id="labeled_1" /><label for="labeled_1">Раз</label></p> <p><input type="radio" name="labeled" value="2" id="labeled_2" /><label for="labeled_2">Два</label></p> <p><input type="radio" name="labeled" value="3" id="labeled_3" /><label for="labeled_3">Три</label></p>
Теперь если кликнуть по описанию (слова «Раз», «Два», «Три») будет нажата соответствующая кнопка. Таким образом, мы увеличиваем площадь кнопки.
Примечание. Для связи кнопки с описанием используется атрибуты id и for. Их значения должны совпадать.
Кроме того, использование такой разметки значительно упростит работу для устройств чтения с экрана.
Пользоваться кнопками стало удобнее, но это не предел. Попробуем сделать подсветку и ещё больше увеличить площадь кнопки.
Добавляем CSS стили
Для начала сделаем подсветку. Для этого нам потребуется всего одного правило.
p:hover {
background-color: #efefef;
}
Теперь если мышка окажется над параграфом, в котором расположена кнопка, его фон станет светло-серым.
Тут нужно учесть один момент. Нельзя останавливаться на этом этапе. Сейчас подсвечивается весь параграф, но клик за пределами самой кнопки или текста с описанием ничего не даст. И у посетителя может сложиться впечатление, что форма вообще не работает.
Поэтому нужно сделать так, чтобы клик по всему параграфу включал кнопку.
Для этого нужно чтобы тег label полностью совпадал по площади с тегом p.
Для начала убираем отступы у параграфа.
p {
margin: 0;
padding: 0;
clear: both;
}
Делаем label блочным элементом
label {
display: block;
padding: 0.5em 0.5em 0.5em 2em;
}
После применения этих стилей label станет занимать всю строку. Но где при этом окажется сама кнопка? Она будет находиться за пределами label, точнее над ним, и не будет подсвечиваться.
Опускаем её на один уровень с надписью.
input {
float: left;
position: relative;
top: 0.5em;
left: 0.5em;
}
Здесь нужны некоторые пояснения.
Применение правила float: left поместит кнопку внутри блока label, но в верхнем левом его углу, т.е. немного выше текста.
С помощью position: relative; top: 0.5em и left: 0.5em мы смещаем кнопку вниз и вправо на 0.5em, т.е. на величину отступов, которые указаны в стилях для label. Кстати, правый отступ (2em) я выбрал таким, чтобы кнопка не накладывалась на текст.
Заключение
Как видите, с помощью не хитрых манипуляций можно сделать форму значительно удобнее. Да и у пользователя сложится впечатление, что сайт нормально реагирует на его действия.
Пример тестировался в FireFox 3.0.10, Opera 9.62, IE 7 и Safari 4 beta. Могут быть проблемы с :hover в IE 6 и более ранних.
Если есть замечания, буду рад обсудить.
