Делаем радио кнопки удобными

Владимир | | CSS, HTML, Web разработка.

radio_buttons_html_css

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

В этой заметке я расскажу, как можно значительно увеличить этот показатель для формы с радио кнопками (radio buttons) за счет правильной HTML разметки и нескольких CSS стилей.

Обратите внимание. Применение этих советов никоим образом не сказывается на работоспособности формы и не изменяет отправляемые данные.

Как говорится «Одна картинка стоит тысячи слов». Поэтому сразу даю ссылки на демонстрационную страничку и архив с файлами примера.

Source

Рассмотрим самый простой вариант разметки

<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 и более ранних.

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

  • спасибо отличный пример, хотел поинтересоваться а как делают нестандартные радиобаттоны? через js? с ползунками еще понятно, там чистый js…

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

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

        • Radio button нужно растягивать для того, чтобы при клике в любую область ползунков происходило переключение в первую очередь button, а уже затем изображения/класса ползунка. Получается так, что мы отслеживаем изменение лишь radio button, который в свою очередь невидим (opacity), имеет те же размеры, что и ползунки, и спозиционирован выше (z-index).

          (кстати, о каких ползунках речь?, а то, возможно, о разном говорим 🙂

        • Да, я поспешил. Ваш вариант наверное получится проще. Во всяком случае не нужно будет изменять состояния radio button при клике по div'у.

          >> Ползунки
          Я думал AngelOfFate имеет ввиду TrackBar (вроде этого).

        • Владимир, да именно такой тракбар я и имел ввиду =)

  • спасибо отличный пример, хотел поинтересоваться а как делают нестандартные радиобаттоны? через js? с ползунками еще понятно, там чистый js…

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

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

        • Radio button нужно растягивать для того, чтобы при клике в любую область ползунков происходило переключение в первую очередь button, а уже затем изображения/класса ползунка. Получается так, что мы отслеживаем изменение лишь radio button, который в свою очередь невидим (opacity), имеет те же размеры, что и ползунки, и спозиционирован выше (z-index).

          (кстати, о каких ползунках речь?, а то, возможно, о разном говорим 🙂

        • Да, я поспешил. Ваш вариант наверное получится проще. Во всяком случае не нужно будет изменять состояния radio button при клике по div'у.

          >> Ползунки
          Я думал AngelOfFate имеет ввиду TrackBar (вроде этого).

        • Владимир, да именно такой тракбар я и имел ввиду =)

  • Приветствую.Красиво!Скажите пожалуйста,а как обработать форму с радио-кнопками для калькулятора?Скажем 4 действия.У меня постоянно деление идет.

    • Для каждой радиокнопки указывается значение value, которое php скрипт получит в массиве $_POST (или $_GET, в зависимости от метода отправки).
      Допустим,
      1 — умножение,
      2 — сложение,
      3 — деление,
      4 — вычитание.
      Вам нужно прочитать это значение и выполнить соответствующую операцию.

  • Приветствую.Красиво!Скажите пожалуйста,а как обработать форму с радио-кнопками для калькулятора?Скажем 4 действия.У меня постоянно деление идет.

    • Для каждой радиокнопки указывается значение value, которое php скрипт получит в массиве $_POST (или $_GET, в зависимости от метода отправки).
      Допустим,
      1 — умножение,
      2 — сложение,
      3 — деление,
      4 — вычитание.
      Вам нужно прочитать это значение и выполнить соответствующую операцию.

  • sasha

    Выберите радиокнопкой ссылку нашего проекта
    rebeat podskajite kto znaet, eto vishlo pri peresylki saitov….

  • sasha

    Выберите радиокнопкой ссылку нашего проекта
    rebeat podskajite kto znaet, eto vishlo pri peresylki saitov….

  • Виктор

    На мой взгляд, так правильнее и гораздо проще 🙂


    #list {
    width: 300px;
    border: 1px solid #999;
    }
    #list label {
    display: block;
    }
    #list label:hover {
    background-color: #eee;
    }

    Раз
    Два
    Три

  • Виктор

    На мой взгляд, так правильнее и гораздо проще 🙂


    #list {
    width: 300px;
    border: 1px solid #999;
    }
    #list label {
    display: block;
    }
    #list label:hover {
    background-color: #eee;
    }

    Раз
    Два
    Три

  • Виктор

    <style>
    #list {
    width: 300px;
    border: 1px solid #999;
    }
    #list label {
    display: block;
    }
    #list label:hover {
    background-color: #eee;
    }
    </style>

    <p id="list">
    <label><input type="radio" name="simple" value="1"/> Раз</label>
    <label><input type="radio" name="simple" value="2"/> Два</label>
    <label><input type="radio" name="simple" value="3"/> Три</label>
    </p>

    • Спасибо, очень хороший вариант.
      Я раньше как-то не обращал внимания на то, что атрибут for не обязательный.

  • Виктор

    <style>
    #list {
    width: 300px;
    border: 1px solid #999;
    }
    #list label {
    display: block;
    }
    #list label:hover {
    background-color: #eee;
    }
    </style>

    <p id="list">
    <label><input type="radio" name="simple" value="1"/> Раз</label>
    <label><input type="radio" name="simple" value="2"/> Два</label>
    <label><input type="radio" name="simple" value="3"/> Три</label>
    </p>

    • Спасибо, очень хороший вариант.
      Я раньше как-то не обращал внимания на то, что атрибут for не обязательный.

  • Игорь

    Привет помогите мне сделать своё радио в интернеое не как не могу сделать пишитн мне на почту 256700@mail.ru за ранее спосибо

    • Я, честно говоря, не понял, какое отношение имеют радио кнопки к интернет-радио?

  • Игорь

    Привет помогите мне сделать своё радио в интернеое не как не могу сделать пишитн мне на почту 256700@mail.ru за ранее спосибо

    • Я, честно говоря, не понял, какое отношение имеют радио кнопки к интернет-радио?

  • Большое спасибо за статейку, сегодня воспользуюсь третьим вариантом кнопочек.

  • Большое спасибо за статейку, сегодня воспользуюсь третьим вариантом кнопочек.

  • Djkeylogger

    скажите, а как блокировать radio button (чтобы не дать пользователю выбрать ее)

    • Лучший способ — убрать вообще не нужную кнопку (с помощью JS).
      Чтобы сделать ее неактивной, добавьте атрибут disabled.

  • TerribleZ

    Есть такая задача чтоб когда мы выбрали определённую радио кнопку подсвечивание label оставалось?
    Поможете?

    • С помощью JS решается так.

      1) Добавляем стиль.
      .highlighted {
      background-color: #efefef;
      }

      2) Подключаем jquery (можно и без нее, но код будет длиннее).

      3) Добавляем js код
      $(document).ready(function(){
      $('input[type=radio]').change(function() {
      $('p.highlighted').removeClass('highlighted');
      $(this).parent().addClass('highlighted');
      });
      });

      Идея простая. При клике по радиокнопке, добавляем CSS класс для родительского элемента (параграф внутри которого находятся кнопка и label).

  • Secretdandy

    добрый день! подскажите пожалуйста как сделать радио баттон с вариантом ответа «Другое» с текстовым полем, чтобы пользователь мог в это поле забить свой вариант ответа?

    • Поставить текстовый input рядом с полем и при отправке формы подставлять значение из него в атрибут value радио кнопки.
      Т.е. такой вариант в обязательном порядке требует использования JS.

  • Gosha Egorian

    Здравствуйте. У меня достаточно глупый вопрос, но никак не могу найти простое решение.
    Допустим, у меня есть две кнопки (radiobutton). Если взять и начать просматривать их в разных браузерах, то все они разные как по форме, так и по размерам, что самое неудобное. Стоят они в шапке сайта, более того, во фрейме определённых размеров. Из-за этого невозможно отрегулировать положение других элементов и угодить дизайнеру. Так что нужно задать им какой-то внешний вид, который бы отражался везде (FireFox: 3.0, 3.6, 4.0; Opera: 9.6, 10; IE: 8, 9; Chrome: 3, 4, 5; Safari: 4, 5) одинаково… ну или хотя бы похоже… Подскажите пожалуйста, как это сделать с помощью html/css?

  • Nik

    А как быть с checkbox ?

  • Николай

    Искал стилизированные радиокнопки. В общем после длительных поисков нашёл. Вот ссылка, если кому интересно http://divhack.com/node/43

  • Иван

    Очень просто и полезно! Спасибо)

  • Александр

    Добрый день. Скажите, а можно сделать чтобы форма отправлялась по нажатию на одну из радиокнопок?

    • Это можно сделать с помощью JavaScript.
      Нужно установить обработчик события click (или другого) и в этом обработчике отправить форму.
      Т.е. код должен быть примерно такой http://codepen.io/vladimir-s/pen/arlBs

      • Александр

        Не совсем понятно. Я в js полный ноль, объясните пожалуйста, что куда кинуть, куда вставить js код?

        • Александр, я не показать куда именно вставлять код, пока не увижу разметку страницы.

  • Guest

    Спасибо большое за статью!!1