Урок 7.5: Создание Переключателей

Как видно из названия - переключатели от слова переключать. Это значит выбирать один вариант из нескольких.  В языке HTML что бы установить на форме такой переключатель используется тег <input /> с атрибутом type и параметром radio. Причем не один тег, а несколько, в зависимости от количества вариантов выбора.

Пример создания переключателя

<html>   <head>   <title>Создание переключателей</title>  </head> <body>   <form>    Ваш любимый цвет: <br />    <input type="radio" /> Красный<br />    <input type="radio" /> Синий<br />    <input type="radio" /> Зеленый  </form>  </body> </html>

Результат

Создание переключателей

В результате видно - все наши переключатели работают независимо друг от друга.

Несвязанные переключатели

Это произошло потому, что не был указан атрибут name. Этот атрибут связывает между собой все переключатели. Но параметр этого атрибута должен быть везде одинаковый.

Пример переключатели с атрибутом name

<html>   <head>   <title>Создание переключателей</title>  </head> <body>   <form>    Ваш любимый цвет: <br />    <input type="radio" name="color" /> Красный<br />    <input type="radio" name="color" /> Синий<br />    <input type="radio" name="color" /> Зеленый  </form>  </body> </html>

Результат

Связанные переключатели

Теперь переключатели работают как надо)))

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

Пример переключателя с атрибутом value

<html>   <head>   <title>Создание переключателей</title>  </head> <body>   <form>    Ваш любимый цвет: <br />    <input type="radio" name="color" value="red" /> Красный<br />    <input type="radio" name="color"  value="blue" /> Синий<br />    <input type="radio" name="color"  value="green" /> Зеленый  </form>  </body> </html>

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

Пример: Группа переключателей

<html>   <head>   <title>Создание переключателей</title>  </head> <body>   <form>    Ваш любимый цвет: <br />    <input type="radio" name="color" value="red" /> Красный<br />    <input type="radio" name="color"  value="blue" /> Синий<br />    <input type="radio" name="color"  value="green" /> Зеленый    <hr />    Ваш любимый размер<ик />    <input type="radio" name="size" value="Маленький" /> Маленький<br />    <input type="radio" name="size"  value="Большой" /> Большой<br />    <input type="radio" name="size"  value="Почти с меня" /> Почти с меня   </form>  </body> </html>

Результат

Группы переключателей

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

Список уроков