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

В этой заметке я расскажу, как можно значительно увеличить этот показатель для формы с радио кнопками (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 и более ранних.

Если есть замечания, буду рад обсудить.