Переключатель в форме 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, чтобы не пропустить новые уроки и быть в курсе последних новостей из мира веб-разработки.
Домашнее задание
  • создайте форму, в которой с помощью радибаттона будет выбираться способ доставки товара (например: долго, быстрее, супер-быстро, сейчас!)
Читайте также
Комментарии


trialex3
trialex3

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

ivashkevich
ivashkevich

Скопируйте ваш код в сервис https://jsfiddle.net/ нажмите "Save" и скиньте сюда получившуюся ссылку.

alsvis2013
alsvis2013

Подскажите пожалуйста, может ли значением атрибута name быть какая-либо цифра или только текст, например name="1"?

ivashkevich
ivashkevich

Вы можете это проверить самостоятельно, но я бы не советовал так делать, потому что "1" ни о чем не говорит. Имена полей должны отражать то, для чего они.

alsvis2013
alsvis2013

Спасибо!