Флажки | WebReference

Флажки (жарг. чекбоксы) используют, когда необходимо выбрать любое количество вариантов из предложенного списка. Если требуется выбор лишь одного варианта, то для этого следует предпочесть переключатели (radiobutton). Флажок создаётся следующим образом. 

<input type="checkbox" атрибуты>

Атрибуты флажков перечислены в табл. 1.

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

Использование флажков показано в примере 1.

Пример 1. Создание флажков

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Флажки</title>
 </head>
 <body>
  <form action="handler.php">
   <p>В каких годах произошли самые известные извержения вулкана Кракатау?</p>
   <p><input type="checkbox" name="a" value="1417"> 1417</p>
   <p><input type="checkbox" name="a" value="1680" checked> 1680</p>
   <p><input type="checkbox" name="a" value="1883" checked> 1883</p>
   <p><input type="checkbox" name="a" value="1934"> 1934</p>
   <p><input type="checkbox" name="a" value="2010"> 2010</p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

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

Вид флажков

Рис. 1. Вид флажков

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 05.09.2017

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

webref.ru

Псевдокласс :checked | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
9.0+1.0+9.0+3.1+1.0+1.0+2.0+

Краткая информация

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Псевдокласс :checked применяется к элементам интерфейса, таким как переключатели (checkbox) и флажки (radio), когда они находятся в положение «включено». Переключение элементов в такое состояние происходит с помощью атрибута checked тега <input> или пользователем.

Синтаксис

элемент:checked { … }

Значения

Нет.

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <title>checked</title>
  <style>
   input:checked + span {
    background: #fc0;
   }
  </style>
 </head>
 <body>
  <p><strong>С какими операционными системамы вы знакомы?</strong></p>
  <p><input type="checkbox" name="a1"><span>Windows 7</span><br>
  <input type="checkbox" name="a2"><span>Windows Vista</span><br>
  <input type="checkbox" name="a3"><span>Windows XP</span><br>
  <input type="checkbox" name="a4"><span>System X</span><br> 
  <input type="checkbox" name="a5"><span>Linux</span><br> 
  <input type="checkbox" name="a6"><span>Mac OS</span></p>
  <p><input type="submit" value="Отправить"></p>
 </body>
</html>

В данном примере текст возле отмеченных флажков выделяется фоновым цветом. Результат примера показан на рис. 1.

Рис. 1. Результат использования псевдокласса :checked

htmlbook.ru

Атрибут checked | HTML | WebReference

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

Синтаксис

<input type="radio" checked>
<input type="checkbox" checked>

Значение по умолчанию

По умолчанию этот атрибут выключен.

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>INPUT, атрибут checked</title>
 </head>
 <body>
  <form method="post" action="input5.php">
   <p><b>С какими операционными системами вы знакомы?</b></p>
   <p><input type="checkbox" name="option1" value="a1" checked>Windows 95/98<Br>
   <input type="checkbox" name="option2" value="a2">Windows 2000<Br>
   <input type="checkbox" name="option3" value="a3">System X<Br> 
   <input type="checkbox" name="option4" value="a4">Linux<Br> 
   <input type="checkbox" name="option5" value="a5">X3-DOS</p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Результат данного примера показан на рис. 1.

Помеченный флажок в форме

Рис. 1. Помеченный флажок в форме

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 08.11.2016

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

webref.ru

No related posts.