18.03.2017   4150
Переключатель в форме 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>

Результат:

Радиобаттон

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

Домашнее задание
Для просмотра нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности

КОММЕНТАРИИ

 trialex3 2017-08-15 21:36:43
0

В процессе выполнения задания возник вопрос.
как можно перенести кнопку в красную зону?
скрин

Ответить
Чтобы написать комментарий нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности