Чат Telegram
Группа ВКонтакте
Переключатель в форме 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>

Результат:

Радиобаттон

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

Присоединяйтесь к нам в ВКонтакте и в Facebook, чтобы не пропустить новые уроки. А также вступайте в наш чат PHP-разработчиков в Telegram.
Домашнее задание
  • создайте форму, в которой с помощью радибаттона будет выбираться способ доставки товара (например: долго, быстрее, супер-быстро, сейчас!)
Комментарии (11)
loader
loader
Логические задачи с собеседований