Переключатели

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

Атрибуты переключателей перечислены в табл. 1.

Табл. 1. Атрибуты переключателей

Атрибут	Описание
checked	Предварительное выделение переключателя. По определению, набор переключателей может иметь только один выделенный пункт, поэтому добавление checked сразу к нескольким полям не даст особого результата. В любом случае, будет отмечен элемент, находящийся в коде HTML последним.
name	Имя группы переключателей для идентификации поля. Поскольку переключатели являются групповыми элементами, то имя у всех элементов группы должно быть одинаковым.
value	Задаёт, какое значение будет отправлено на сервер. Здесь уже каждый элемент должен иметь свое уникальное значение, чтобы можно было идентифицировать, какой пункт был выбран пользователем.

Создание группы переключателей показано в примере 1.

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

HTML5 IE Cr Op Sa Fx

В результате получим следующее (рис. 1).

Рис. 1. Вид переключателей в браузере

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

Переключатели

Тэг <INPUT> позволяет вывести на страницу не только поле ввода, но и другие элементы. Например, если использовать атрибут TYPE= "RADIO" , то можно создать набор переключателей (radio-button) — кружков, щелчок на одном из которых делает его отмеченным (выбранным), а все остальные — неотмеченными. Чтобы набор переключателей воспринимался как целое, его необходимо поместить внутри тега списка <UL> и в каждом теге <INPUT> использовать одно и то же имя (значение атрибута NAME).

Чтобы выделить переключатель, применяется атрибут CHECKED. После тега <INPUT> помещается текст, который мы хотим видеть рядом с переключателем. Атрибут VALUE используется для того, чтобы мы смогли узнать, какой переключатель выбрал пользователь, и обработать выбор в программе-сценарии. Радиокнопки называют еще селекторными переключателями в отличие от просто переключателей, под которыми имеют в виду флажки (см. ниже)

В следующем примере создается набор из трех переключателей:

Рис. 675. Набор переключателей, оформленный в виде списка. В наборе можно установить только один переключатель.

Элементы списка (в рассматриваемом примере — переключатели) располагаются по умолчанию в столбце, т. е. вертикально. А как расположить их горизонтально, т. е. в одну строку? Горизонтальное расположение элементов списка довольно часто встречается на страницах, поскольку это позволяет экономить место. Один из возможных и часто используемых способов заключается в применении тега таблицы как метода позиционирования. Ниже приводится вариант соответствующей программы и результат ее работы:

Рис. 676. Переключатели расположены горизонтально с помощью таблицы с невидимыми рамками.

Выключатели и переключатели в HTML-формах.

В этой главе мы познакомимся с выключателями и переключателями в HTML-формах.

Выключатели(кнопки) служат для подтверждения выбора. и вставляются в форму при помощи того-же тега input и атрибута type, но с значением checkbox,
<input type=»checkbox» name=»vybor» value=»TRUE» >
Результат: как видите, можно включить а можно выключить.
Все атрибуты вам знакомы, но немного поговорим об атрибуте value, в этом теге он обязателен. Пару слов об значениях, дело все в том, что все данные делятся на 8 видов (строковые, цифровые, булевы и т.д.), забивать этим бредом я вам голову не буду, как специалисту по HTML вам это не к чему, но вы должны знать, что значение:
Если поставить эти значения «TRUE», «YES», «1» или больше, «любой текст»,то эти значения правдивые и сценарий который получит эти данные(пару checkbox=TRUE)определит что вы сделали выбор.
А если поставить значение атрибута value «No», «NOW», «FALSE», «0»(ноль) «-1» или другое отрицательное число, то скрипт поймет что эти данные фальшивые или проще говоря как будто выбор не сделан. Хотя бывают ситуации когда нужно отправлять фальшивое значение, с этим вы познакомитесь в скриптовых языках если будет в этом необходимость.

Можно использовать сразу несколько выключателей, например если это сайт «секс шоп» детям там не место, значит перед тем как в сам посетитель перейдет к каталогу товаров, он должен подтвердить что ему больше 18 лет и он согласен с правилами магазина, конечно вы можете придумать что-то свое.
<input type=»checkbox» name=»vozrast» value=»TRUE» >
<input type=»checkbox» name=»soglasie» value=»TRUE» > Обратите внимание, что значения атрибутов value у всех одинаковое, а вот name разное.

Переключатели, это так-же кнопки, но с возможностью выбора, вводятся в форму также тегом input и атрибута type, но с значением radio.
<input type=»radio» name=»vozrast» value=»1″ >меньше 18
<input type=»radio» name=»vozrast» value=»2″ > 18-35
<input type=»radio» name=»vozrast» value=»3″ >больше 35

Ваш возраст: меньше 18 18-35 больше 35
Обратите внимание, что значения атрибута name одинаковые, а value разные, это не ошибка. Требования к заначениям как и к выключателям.

Бывают ситуации когда нужно определить возраст и пол.

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

Как сделать — настраиваемые флажки и переключатели

Узнайте, как создавать настраиваемые флажки и переключатели с помощью CSS.

По умолчанию:

Настраиваемый флажок:

One Two Three Four

Пользовательские переключатель:

One Two Three Four

Создание настраиваемого флажка

Шаг 1) добавить HTML:

Пример

Шаг 2) добавить CSS:

Пример

/* Customize the label (the container) */
.container <
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
>

/* Hide the browser’s default checkbox */
.container input <
position: absolute;
opacity: 0;
cursor: pointer;
>

/* Create a custom checkbox */
.checkmark <
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
>

/* On mouse-over, add a grey background color */
.container:hover input

.checkmark <
background-color: #ccc;
>

/* When the checkbox is checked, add a blue background */
.container input:checked

.checkmark <
background-color: #2196F3;
>

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after <
content: "";
position: absolute;
display: none;
>

/* Show the checkmark when checked */
.container input:checked

.checkmark:after <
display: block;
>

/* Style the checkmark/indicator */
.container .checkmark:after <
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
>

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

Пример

/* Customize the label (the container) */
.container <
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
>

/* Hide the browser’s default radio button */
.container input <
position: absolute;
opacity: 0;
>

/* Create a custom radio button */
.checkmark <
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
>

/* On mouse-over, add a grey background color */
.container:hover input

.checkmark <
background-color: #ccc;
>

/* When the radio button is checked, add a blue background */
.container input:checked

.checkmark <
background-color: #2196F3;
>

/* Create the indicator (the dot/circle — hidden when not checked) */
.checkmark:after <
content: "";
position: absolute;
display: none;
>

/* Show the indicator (dot/circle) when checked */
.container input:checked

.checkmark:after <
display: block;
>

/* Style the indicator (dot/circle) */
.container .checkmark:after <
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
>