Атрибут checked | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+4.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

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

Синтаксис

HTML
<input type="radio" checked>
<input type="checkbox" checked>
XHTML
<input type="radio" checked="checked" />
<input type="checkbox" checked="checked" />

Значения

Нет.

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

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

Пример

HTML5IECrOpSaFx

<!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. Помеченный флажок в форме

Атрибут checked тега | HTML справочник

HTML тег <input>

Значение и применение

Атрибут checked (HTML тега <input>) является логическим атрибутом и указывает, что элемент должен быть предварительно выбран при загрузке страницы (применяется только для <input type = «checkbox»> и <input type = «radio»>, в противном случае он игнорируется).

Поддержка браузерами

Синтаксис:

<input checked>

Значения атрибута

ЗначениеОписание
checkedЗначение атрибута требуется только в XHTML (<input checked = «checked»/>).

Отличия HTML 4.01 от HTML 5

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример использования атрибута checked HTML тега <input></title>
<style>
input:checked { /* псевдокласс :checked выбирает элементы input с атрибутом checked*/
width: 25px; /* устанавливает ширину если элемент выбран */
height: 25px; /* устанавливает высоту если элемент выбран */
transition: .5s; /* устанавливаем эффект перехода (высота и ширина элемента будет изменяться пол секунды) */
}

 
input:not(:checked) { /* псевдокласс отрицания :not  выбирает все элементы input без атрибута checked (которые не выбрал псевдокласс :checked) */
transition: .5s; /* устанавливаем эффект перехода (высота и ширина элемента будет изменяться пол секунды) */
}
</style>
</head>
<body>
	<form>
		<input type = "radio"  name = "first" checked>Мужчина<br> /* элемент предопределен */
		<input type = "radio"  name = "first">Женщина<br>
		<input type = "radio"  name = "first" disabled>Собака<br> /* элемент должен быть отключен */
		<input type = "checkbox">Старше 16
		<input type = "checkbox" checked>Младше 16 /* элемент предопределен */
	</form>
</body>
</html>

В данном примере мы указали для элемента <input> с типом радио-кнопка (type = «radio») и флажок (type = «checkbox») атрибут checked. Для одного элемента мы указали атрибут disabled, который не дает нам сделать выбор (элемент отключен).

Кроме того мы создали стиль для элементов, которые выбраны (checked), используя псевдокласс :checked и для элементов, которые не выбраны, используя псевдокласс отрицания :not и псевдокласс :checked в качестве селектора.

Пример использования атрибута checked HTML тега <input> (предварительный выбор элемента). HTML тег <input>

Поговорим про :checked / Хабр

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

Но обо всём по порядку.
:checked или немного теории

Итак, в CSS3 (В модуле css3-selectors) появился новый псевдокласс :checked.
Вкратце, этот псевдокласс применяется к тем input’ам (checkbox или radiobutton), которые выставлены пользователем в состояние выбора (checked).
Табы, табы, табы

Довольно много реализаций табов было описано (Например, вот тут сделано через поле input type=«text» выставленное в readonly), но в большинстве своём они опирались на псевдокласс :target, чьё использование немного неоправданно из-за «прыгающего» контента.

Из-за чего была придумана сверхпростая реализация вкладок при помощи :checked и радиобаттонов.

Дабы не перегружать читателя кодом, я урезал пример с 4 вкладок до 2, полный пример доступен тут

HTML:

<section>
<input type="radio" name="radiobutton" checked="checked"/>
<label for="tab1">qutIM 0.1</label>
<input type="radio" name="radiobutton"/>
<label for="tab2">qutIM 0.2</label>
<article>
qutIM 0.1 — Однопротокольный клиент, вышедший в 2008 году.
</article>
<article>
qutIM 0.2 — Многопротокольный клиент, вышедший в 2010 году.
</article>
</section>

CSS:

input { 
	display: none;
}
			
input:checked + label {
	background: #CCC;
}
			
input:checked + label + input + label + article { /* Страшно? */
	display: block;
}
			
input:checked + label + article + article {
	display: block;
}

			
article {
	display: none;
}

Сей код лишён всех лишних стилей, дабы не мешать пониманию.
Отдельно хочу сказать, что это лишь пример, что можно сделать при помощи CSS и HTML, ибо использование сего в реальных сайтах затруднительно и вот почему:
Сей код корректно работает в Firefox, Opera, IE9+,

но не работает в Webkit-браузерах. а вот тут я немного поспешил.
WebKit не обновляет значение до изменения кода, но его можно принудительно заставить это делать, добавив весьма грязный хак:

section {
	-webkit-animation: 0.1s hack infinite;
}
			
@-webkit-keyframes hack {
	from {margin: 0; padding: 0;}
	to {margin: 0; padding: 0;}
}

Анимация, которая ничего не делает. Вебкит не перестаёт удивлять.

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

Немного бреда

А что, если использовать чекбоксы для ввода двоичных чисел?

Берём два чекбокса, располагаем последовательно и делаем что-то вроде:

input + div::after {
content: "0";
}

input:checked + div::after {
content: "1";
}

input:checked + input + div::after {
content: "2";
}

input:checked + input:checked + div::after {
content: "3";
}

Бред? Сумасшествие? Троллейбус.jpg? На самом деле, всего-лишь демонстрация и немного свободного времени.
К слову, за полчаса был написан вот такой небольшой скриптик, генерирующий стиль (Аналогичный вышенаписанному) и строчку из чекбоксов для перевода из двоичной системы в десятеричную 🙂

Немного погодя был написан аналогичный скрипт, генерирующий аналогичный стиль, но для перевода из троичных чисел в десятеричные.
В HTML существуют tri-state чекбоксы, но для их создания требуется javascript (для выставления элементу indeterminate = true), а так же есть псевдокласс :indeterminate по аналогии с :checked.

Разумеется, и речи не идёт где-то это применять вот таким методом. Всё это приводится как информация к размышлению.

А ещё?

Вот здесь можно почитать заметку за авторством kizu про выпадающие менюшки, основанные на том же принципе.

Псевдокласс :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

html — флажок ввода установлен по умолчанию

Переполнение стека
  1. Товары
  2. Клиенты
  3. Случаи использования
  1. Переполнение стека Публичные вопросы и ответы
  2. Команды Частные вопросы и ответы для вашей команды
  3. предприятие Частные вопросы и ответы для вашего предприятия
  4. работы Программирование и связанные с ним технические возможности карьерного роста
  5. Талант Нанимать технический талант
  6. реклама Связаться с разработчиками по всему миру
.
javascript — проверить, проверяется ли ввод с помощью jquery Переполнение стека
  1. Товары
  2. Клиенты
  3. Случаи использования
  1. Переполнение стека Публичные вопросы и ответы
  2. Команды Частные вопросы и ответы для вашей команды
  3. предприятие Частные вопросы и ответы для вашего предприятия
  4. работы Программирование и связанные с ним технические возможности карьерного роста
  5. Талант Нанимать технический талант
  6. реклама Связаться с разработчиками по всему миру

Загрузка…

,
Изменить родительский div на входе [type = checkbox]: проверено css Переполнение стека
  1. Товары
  2. Клиенты
  3. Случаи использования
  1. Переполнение стека Публичные вопросы и ответы
  2. Команды Частные вопросы и ответы для вашей команды
  3. предприятие Частные вопросы и ответы для вашего предприятия
  4. работы Программирование и связанные с ним технические возможности карьерного роста
  5. Талант Нанимать технический талант
  6. реклама Связаться с разработчиками по всему миру
,

форм — флажки POST без проверки HTML

Переполнение стека
  1. Товары
  2. Клиенты
  3. Случаи использования
  1. Переполнение стека Публичные вопросы и ответы
  2. Команды Частные вопросы и ответы для вашей команды
  3. предприятие Частные вопросы и ответы для вашего предприятия
  4. работы Программирование и связанные с ним технические возможности карьерного роста
  5. Талант Нанимать технический талант
  6. реклама Связаться с разработчиками по всему миру

Загрузка…

    No related posts.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *