Переключатель в форме HTML: radio

Поле-переключатель в форме HTML

Тег <input> с типом radio представляет собой поле-переключатель.

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

Иными словами, для переключателей атрибут value - обязательный. Когда происходит выбор какого-то переключателя, браузер отправляет на сервер именно значение, прописанное в value.

Если вы хотите, чтобы какой-то из созданных вариантов выбирался по умолчанию, то вам следует поставить у тега <input>, который задает этот переключатель, атрибут checked. По аналогии с полем-галочкой.

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

Давайте создадим переключатель, изображённый в начале этого урока:

<form action="/order">
    Выберите цвет футболки:
    <br>
    <label>
        <input type="radio" name="color" value="red">
        Красная
    </label>
    <br>
    <label>
        <input type="radio" name="color" value="blue" checked>
        Синяя
    </label>
    <br>
    <label>
        <input type="radio" name="color" value="green">
        Зелёная
    </label>
</form>

Результат:

Радиобаттон

Это всё о радиобаттоне. В следующем уроке поговорим о раскрывающемся списке для формы.

Присоединяйтесь к нам в Twitter, ВКонтакте, Facebook и Google+, а также вступайте в наш чат в Telegram, чтобы не пропустить новые уроки и быть в курсе последних новостей из мира веб-разработки.
Домашнее задание

  • создайте форму, в которой с помощью радибаттона будет выбираться способ доставки товара (например: долго, быстрее, супер-быстро, сейчас!)