Создание переключателей и чекбоксов в HTML
3866 Посещений
Переключатели актуальны в тех случаях, когда речь идет о выборе одного варианта из предложенного перечня, тогда как чекбоксы (их также называют “флажки”) позволяют отметить несколько пунктов в списке.
Рассмотрим на примере, как создать переключатель на сайте:
|
<html>
<head>
<meta charset="utf-8">
<title>Переключатели</title>
</head>
<body>
<form action="handler.php">
<p><b>Переключатели или чекбоксы?</b></p>
<p><input name="vopros" type="radio" value="perekluchateli"> Переключатели</p>
<p><input name="vopros" type="radio" value="chekboxi"> Чекбоксы</p>
<p><input name="vopros" type="radio" value="drugoe">Другое</p>
<p><input type="submit" value="Выбрать"></p>
</form>
</body>
</html>
|
Как вы могли заметить, значение атрибута name для всех трех переключателей идентично. За счет этого “приема” браузер понимает, что переключатели взаимосвязаны, а значит нужно отмечать один единственный элемент. Что касается атрибута value, то здесь значения отличаются, поскольку именно так обработчик распознает выбранный вариант.
Переключатель в браузере:
Переходим к созданию чекбоксов:
|
<html>
<head>
<meta charset="utf-8">
<title>Чекбоксы</title>
</head>
<body>
<form action="handler.php">
<p>Чекбоксы или переключатели</p>
<p><input type="checkbox" name="a" value="chekboxi"> Чекбоксы </p>
<p><input type="checkbox" name="a" value="perekluchateli"> Переключатели </p>
<p><input type="submit" value="Выбрать"></p>
</form>
</body>
</html>
</body>
</html>
|
Чекбоксы в браузере:
