Чекбокс в html: Атрибут checked | htmlbook.ru

Содержание

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

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
3.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

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

HTML:

3.2

4.01

5.0

XHTML:

1.0

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

Чекбокс | HTML

В интернет-магазинах часто поиск реализуется с помощью указания категорий, в которых хотим искать товар, указания характеристик, которые нам подходят. Для реализации множественного выбора существуют чекбоксы (или как их ещё называют — флажки).

Чекбоксы позволяют выбирать множество элементов из представленных (например, в анкете):

Для создания чекбокса используются два тега:

<input> с указанием type="checkbox";
<label>, в котором будет текст, связанный с нужным нам чекбоксом.

Для создания связи <label> с <input> тоже существует два способа:

Связь по id. Для этого необходимо задать уникальный id для <input> и связать <label> с чекбоксом с помощью атрибута for.

<form>
    <input type="checkbox">
    <label for="html">Хочу изучать HTML</label>
</form>

Вложить <input> внутрь тега <label>. При этом указание уникального id не требуется.

<form>
    <label>
        <input type="checkbox">
        Хочу изучать HTML
    </label>
</form>

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

<form>
    <label>
        <input type="checkbox" name="languages" value="HTML">
        Хочу изучать HTML
    </label>
    <br>
    <label>
        <input type="checkbox" name="languages" value="CSS">
        Хочу изучать CSS
    </label>
    <br>
    <label>
        <input type="checkbox" name="languages" value="JS">
        Хочу изучать JS
    </label>
</form>

Задание

Создайте форму, у которой файл с обработчиком данных лежит по адресу /people. Внутри формы создайте 2 чекбокса. Свяжите их вложив <input> внутри <label>. Не забудьте добавить атрибуты name и value

Атрибут 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>

Радиокнопки и чекбоксы в HTML, их теги и атрибуты

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

К оглавлению ↑

Радиокнопки — тип radio

Давайте приступим к реализации радиокнопок. Перейдем в код и для радиокнопок выделим отдельный абзац. В нем и создадим нашу радиокнопку. Кнопка создается при помощи тега input.

Тип укажем radio. Зададим кнопке имя и укажем значение, т.е. какое значение будет отослано обработчику, если эта кнопка будет активна. Для этой кнопке мы укажем значение «yes», т.к. эта кнопка будет отвечать за положительный ответ.

<input type="radio" name="time" value="yes">

Давайте добавим метку label c ответом «Да» для того, чтобы человек кликнул по метке, и кнопка активировалась автоматически.

<label>Да<input type="radio" name="time" value="yes"></label>

Теперь создадим ей противоположную кнопку с ответом «Нет». Для этого скопируем label и вставим после первого label. Поменяем «Да» на «Нет» и меняем значение «yes» на «no». Обратите внимание, что имя мы должны оставить то же самое. Это скажет браузеру о том, что эти радиокнопки принадлежат к единой группе и что они взаимоисключающие друг друга. То есть, если активировать одну кнопку, то другая деактивируется. Если имена кнопкам дать разные, то можно одновременно активировать обе кнопки.

<label>Да<input type="radio" name="time" value="yes"></label>
<label>Нет<input type="radio" name="time" value="no"></label>

Вот таким образом можно передавать обработчику значение = выбор того или иного ответа.

Давайте добавим сам вопрос после открытия абзаца. Спросим человека, любит ли он экономить время?

<p>Любите ли Вы экономить время?</p>
<label>Да<input type="radio" name="time" value="yes"></label> 
<label>Нет<input type="radio" name="time" value="no"></label>

И еще один момент, который может вам пригодиться – это автоматическая активация кнопок изначально. Для этого есть специальный атрибут, который можно добавить к нужной кнопке. Эта кнопка будет активирована изначально. Атрибут называется checked — можно перевести как отмеченный. Этому атрибуту не нужно указывать никакого значения.

<p>Любите ли Вы экономить время?</p> 
<label>Да<input type="radio" name="time" value="yes" checked></label> 
<label>Нет<input type="radio" name="time" value="no"></label>

А вот и конечный результат.

К оглавлению ↑

Чекбоксы — тип checkbox

Альтернативой радиокнопкам в HTML являются чекбоксы, только в этом случае возможно выделять несколько элементов. Давайте для примера создадим новый абзац и спросим, какими инструментами для экономии времени вы любите пользоваться?
После вопроса укажем новый абзац для создания этих самых чекбоксов. Первый чекбокс будет для ежедневника.

<p>Какими инструментами для экономии времени Вы пользуетесь?</p> 
<label><input type="checkbox" name="ez">Ежедневник</label>

Если проверить наш код в браузере, то выглядеть это будет так:

Теперь таким же образом создадим еще два чекбокса: хронометраж и свои наработки.

<p>Какими инструментами для экономии времени Вы пользуетесь?</p> 
<label><input type="checkbox" name="ez">Ежедневник</label> 
<label><input type="checkbox" name="hr">Хронометраж</label> 
<label><input type="checkbox" name="sv">Свои наработки</label>

Обязательно каждый чекбокс называйте своим уникальным именем.
Если сохранить файл и проверить, то можно увидеть следующее:

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

Чекбоксы HTML.

Мы продолжаем рассматривать элементы формы и сегодня мы рассмотрим еще один вид переключателей в HTML это чекбоксы. Чекбоксы это альтернатива радиокнопкам только чекбоксы позволяют выделить одновременно несколько элементов в противоположность радиокнопкам, где можно выбрать только один элемент.

Чекбоксы создаются очень просто с помощью все того же тега <input> только атрибут type=»» будет содержать значение checkbox.

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

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Первая HTML страница</title>
</head>
<body>
Какие Вы фрукты любите больше всего?
Какие Вы фрукты любите больше всего?

Аппельсины 
Бананы
Яблоки
Груши
Перец 
</body>
</html>

Как мы видим, каждый чекбокс мы заключили в тег <label> </label>, чтобы при нажатии на название фрукта чекбокс выделялся автоматически. Как уже заметили у каждого чекбокса свое имя, т.е. у атрибута name свое индивидуальное значение.

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

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

HTML

Апельсины

Теперь, если посмотрите, то чекбокс с именем «Апельсины» автоматически становится активным. И рассмотрим еще один атрибут для чекбоксов, который позволяет сделать не активный чекбокс. Этот атрибут именуется disabled, что в переводе с английского означает «отключен». С помощью этого атрибута чекбокс делается не активным и не реагирует на действия пользователя.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Первая HTML страница</title>
</head>
<body>
Какие Вы фрукты любите больще всего?

Аппельсины 
Бананы
Яблоки
Груши
Перец 

</body>
</html>

В примере выше, как видно первый элемент по умолчанию становится активным, так как присутствует атрибут checked, а последний чекбокс на против не активен так как «Перец» не является фруктом и нечего его выбирать. Для деактивации этого чекбокса использован атрибут disabled, что и сделало область не активной.

Вот и все с чекбоксами. Результат смотрите Демо-версии, а мы переходим к следующему элементу формы select.

поля, радио кнопки и флажки

HTML формы

В то время когда другие элементы HTML придают вашей странице разметку и стиль, формы добавляют интерактивность. HTML формы являются основной точкой взаимодействия между пользователем и сайтом. Они позволяют принимать заказы, осуществлять опросы и многое другое.

Как работают HTML формы

Формы состоят из двух частей: HTML разметка (то что отображается на веб-странице) и обработка данных на клиентской (проверка заполнения полей, проверка корректности введенной информации и т.д.) или серверной стороне (сохранение введенных данных, отправка электронных писем и т.д.). Обработка данных формы на сервере обычно написана на PHP, Ruby on Rails, Perl, Python, Node.js и Java.

Рассмотрим пошаговую работу формы:

посетитель заходит на страницу с формой, заполняет ее и отсылает

браузер отсылает данные из формы на сервер

сервер получает данные и передает их сценарию для обработки

серверный сценарий обрабатывает данные и создает новую HTML-страницу с ответом, которую он передает обратно веб-серверу

веб-сервер отправляет страницу с ответом обратно браузеру

браузер получает страницу и отображает ее

HTML тег <form>

Формально, все элементы формы должны находиться внутри элемента <form>:


<form action="myform.php" method="post">
...
содержимое формы
...
</form>

Элемент <form> является контейнером, таким же как <div> или <span>, но он также может содержать атрибуты, которые позволяют настроить запрос отправки, когда пользователь нажимает кнопку «Отправить». Двумя наиболее важными атрибутами являются action и method.

Атрибут action указывает путь к файлу, куда следует отправлять собранные данные. Если он не указан, данные отправляются на URL-адрес страницы, содержащей форму.

Атрибут method указывает метод передачи данных: get или post. (подробнее о методах передачи данных читайте описание тега <form> в HTML справочнике)

Элементы <input>

Наиболее часто используемым элементом в формах является <input>. Он позволяет добавить в форму различные элементы для ввода данных. Какой именно элемент ввода данных будет отображен на экране определяется с помощью атрибута type:

type=»text»

Значение text создает однострочное текстовое поле:


<form action="myform.php" method="post">
  <input type="text" name="name">
</form>

Попробовать »

Атрибут name требуется большинству элементов формы, так как его значение передается на сервер и используется серверными сценариями.

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

type=»submit»

Создает кнопку, при нажатии на которую браузер отправляет форму на сервер:


<form action="myform.php" method="post">
  <input  type="submit" value="Отправить">
</form>

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

type=»radio»

Создает элементы управления, позволяющие выбрать только один вариант из предложенных, то есть такие элементы управления являются взаимозаменяемыми. Они называются радио кнопками или переключателями:


<form action="myform.php" method="post">
  <input type="radio" name="response" value="yes">да<br>
  <input type="radio" name="response" value="no">нет
</form>

Попробовать »

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

Примечание: элемент <input> является строчным элементом, поэтому для отображения каждого элемента управления на новой строке нужно добавить после каждого элемента тег <br> или поместить каждый элемент в абзац (в тег <p>).

type=»checkbox»

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


<form action="myform.php" method="post">
  <p><input type="checkbox" name="spice" value="Salt">Соль</p>
  <p><input type="checkbox" name="spice" value="Pepper">Перец</p>
  <p><input type="checkbox" name="spice" value="Garlic">Чеснок</p>
</form>

Попробовать »

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

Примечание: все допустимые значения атрибута type смотрите в нашем HTML справочнике в описании элемента <input>.

Элемент <textarea>

Элемент <textarea> создает многострочное текстовое поле. Если в поле введено больше текста, чем может поместится в текстовой области, то с правой стороны появляется полоса прокрутки. Текст, расположенный между открывающим и закрывающим тегом, будет отображаться в текстовом поле в качестве значения по умолчанию:


<form action="myform.php" method="post">
  <textarea name="comments" rows="10" cols="48">Комментарии оставлять тут!</textarea>
</form>

Попробовать »

Атрибут name должен содержать уникальное имя, которое будет идентифицировать данный элемент на серверной стороне. Атрибут rows позволяет указать количество строк, определяющих высоту текстовой области, а cols задает ширину текстовой области в символах.

Выпадающий список

Элемент <select> создает меню, содержащее выпадающий список. Элементы списка задаются с помощью элементов <option>, которые должны располагаться между открывающим и закрывающим тегами элемента <select>:


<form action="myform.php" method="post">
  <select name="character">
    <option value="Homer">Homer Simpson</option>
    <option value="Marge">Marge Simpson</option>
    <option value="Bart">Bart Simpson</option>
    <option value="Lisa">Lisa Simpson</option>
    <option value="Maggie">Maggie Simpson</option>
  </select>
</form>

Попробовать »

Элементы <fieldset> и <legend>

Для визуального выделения взаимосвязанных элементов формы можно воспользоваться элементом <fieldset>, который добавляет рамку вокруг своих дочерних элементов:


<form action="myform.php" method="post">

  <input type="radio" name="response" value="yes">да<br>
  <input type="radio" name="response" value="no">нет
  
  <fieldset>
    <p><input type="checkbox" name="spice" value="Salt">Соль</p>
    <p><input type="checkbox" name="spice" value="Pepper">Перец</p>
    <p><input type="checkbox" name="spice" value="Garlic">Чеснок</p>
  </fieldset>
  
</form>

Попробовать »

Название (заголовок) для такой группы элементов можно указать с помощью элемента <legend>, который должен быть первым дочерним элементом внутри элемента <fieldset>:


<form action="myform.php" method="post">

  <input type="radio" name="response" value="yes">да<br>
  <input type="radio" name="response" value="no">нет
  
  <fieldset>
    <legend>Специи</legend>
    <p><input type="checkbox" name="spice" value="Salt">Соль</p>
    <p><input type="checkbox" name="spice" value="Pepper">Перец</p>
    <p><input type="checkbox" name="spice" value="Garlic">Чеснок</p>
  </fieldset>
  
</form>

Попробовать »

Элемент <label>

Можно добавлять текст к элементам формы просто написав его рядом с нужным элементом, но для браузеров и поисковых систем, анализирующих разметку веб-страницы, это будет просто текст, не имеющий прямого отношения ни к одному из элементов формы. Элемент <label> позволяет связать текст с определенным элементом формы, такой текст называется меткой (или ярлыком).

По умолчанию метки визуально не отличаются от обычного текста, однако они позволяют выбирать элементы формы кликая не только на сам элемент, но и на его метку.

Связать метку с элементом формы можно двумя способами: поместить весь элемент формы внутрь элемента <label> или с помощью атрибута for, который в качестве значения принимает идентификатор элемента формы, с которым нужно связать метку:


<form action="myform.php" method="post">

  <p><label><input type="radio" name="response" value="yes">да</label></p>
  <p><label><input type="radio" name="response" value="no">нет</label></p>
	
  <p>
    <input type="checkbox" name="spice" value="Salt">
	<label for="spice_salt">Соль</label>
  </p>
  <p>
    <input type="checkbox" name="spice" value="Pepper">
	<label for="spice_pepper">Перец</label>
  </p>
  <p>
    <input type="checkbox" name="spice" value="Garlic">
	<label for="spice_garlic">Чеснок</label>
  </p>
  
</form>

Попробовать »

Метки можно размещать как до так и после элемента управления, связанного с ней, потому что, если значение атрибута for элемента <label> совпадает со значением атрибута id элемента формы, то неважно где будет находиться метка.

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

2717 Посещений

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

Рассмотрим на примере, как создать переключатель на сайте:

<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>

Чекбоксы в браузере:

Как сделать флажок в HTML [+ примеры]

Вы хотите, чтобы формы заполнялись максимально легко. Вот тут-то и пригодятся флажки.

С помощью флажков

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

Это также позволяет посетителям выполнять более сложные действия, такие как одновременная подписка на несколько информационных бюллетеней. Вот пример формы HubSpot, которая делает именно это с помощью флажков.

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

Ввод флажка HTML

В HTML флажок — это <элемент ввода> с атрибутом типа, определенным как «флажок».Полный синтаксис:

Флажок обычно также содержит атрибут имени и значения. Эта пара имя / значение будет отправлена на сервер при отправке формы.

Например, предположим, что форма с флажками спрашивает, откуда кто-то узнал о вашей компании. В этом случае атрибут name каждого входного элемента может быть «source». Одним из атрибутов значения элемента ввода может быть instagram.Таким образом, данные, отправленные на сервер, будут иметь вид «source = instagram».

Если атрибут значения не указан, то сообщаемое значение по умолчанию «включено».

Давайте посмотрим на несколько примеров флажков ниже.

Пример флажка HTML

Допустим, вы хотите спросить посетителей, как они узнали о вашей компании. Например, Parade включает эту форму на страницу подтверждения заказа.

Вы можете создать что-то подобное, используя элемент HTML-флажка.В приведенном ниже примере пользователь может выбрать один или несколько вариантов в списке.

См. Пример флажка Pen HTML от Кристины Перриконе (@hubspot) на CodePen.

HTML-флажок установлен

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

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

Вот пример флажка, установленного по умолчанию:

См. Ручку Кристины Перриконе (@hubspot) на CodePen.

Требуется флажок HTML

Используя другой логический атрибут, вы можете закодировать обязательный флажок. Это означает, что пользователь не сможет отправить форму, пока не установит флажок. Этот атрибут часто применяется к флажку для принятия условий.

Например, AWS требует, чтобы пользователи прочитали и приняли условия Клиентского соглашения AWS. Если флажок не установлен, они не смогут продолжить процесс регистрации.

Вы можете создать нечто подобное, используя требуемый логический атрибут. В приведенном ниже примере, если вы нажмете кнопку, не установив флажок, вы увидите сообщение об ошибке: «Установите этот флажок, если хотите продолжить».

See the Pen Кристины Перриконе (@hubspot) на CodePen.

Размер флажка HTML

Допустим, вы хотите изменить размер флажка. Вы можете сделать это двумя разными способами.

Первый метод — это установка свойств ширины и высоты в CSS. В приведенном ниже примере я установил ширину и высоту флажка на 10 пикселей. Это делает флажок меньше, чем его размер по умолчанию, который в Chrome составляет примерно 13 на 13 пикселей.

См. Ручку Кристины Перриконе (@hubspot) на CodePen.

Второй метод использует свойство преобразования CSS.В частности, вы будете использовать метод scale () для изменения размера флажка. Какое бы значение вы ни поместили в круглые скобки, размер флажка будет увеличиваться или уменьшаться в несколько раз по сравнению с исходным размером. Этот метод работает во всех основных браузерах, включая Mozilla Firefox. В приведенном ниже примере я установил для свойства transform значение scale (1.5), чтобы оно было в полтора раза больше размера по умолчанию.

См. Размер флажка Pen HTML [свойство преобразования] Кристины Перриконе (@hubspot) на CodePen.

Стиль флажка HTML

Вы можете оформить флажок HTML с помощью настраиваемого CSS. Для этого потребуется несколько наборов правил, поскольку вам нужно скрыть флажок браузера по умолчанию, а затем создать настраиваемый флажок, а также настраиваемый флажок. Но в результате ваши формы могут выглядеть более согласованными с вашим брендом.

Например, в форме заказа на MBM Swim есть флажок, который становится черным, когда пользователь нажимает на него.

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

См. Ручку Кристины Перриконе (@hubspot) на CodePen.

Флажки кодирования

Флажки

могут помочь улучшить пользовательский опыт при заполнении форм — что, вероятно, будет означать больше конверсий на вашем сайте. Самое приятное то, что их легко кодировать с помощью HTML и немного CSS.

HTML-форма с примерами флажков и примером кода

Флажки можно использовать в разных случаях:

Вы можете использовать один флажок, чтобы пользователь мог включить или выключить параметр (как переключатель).Например:

Хотите подписаться на нашу рассылку новостей?

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

Красный

Зеленый

Синий

Элемент формы Checkbox создается путем указания атрибута type = checkbox в теге . Он создает на форме флажок, который имеет только два значения; на или на .По умолчанию состояние элемента формы флажка — off (пусто), но когда вы используете проверенный атрибут в теге , он становится выбранным по умолчанию.

Одиночный флажок (тип вкл. / Выкл.)

Обратите внимание, что во втором варианте используется атрибут значения. Нажмите кнопку отправки, чтобы увидеть значение, которое будет отправлено, когда вы отметите и снимите отметку с опций

Несколько флажков (выберите любое количество вариантов)

Если вы хотите разрешить выбор нескольких параметров из группы параметров, лучшим выбором будет группа флажков.

Чтобы увидеть, как это работает, выберите несколько вариантов ниже и нажмите кнопку отправки.
Затем посмотрите результаты в окне консоли.

См. Также

Флажок HTML-формы с обязательной проверкой
Флажок отмечен проверкой с помощью JavaScript
Проверка флажка с помощью jQuery
Флажки с настраиваемым стилем с помощью Bootstrap
Как создать раскрывающийся список с параметрами флажков с помощью стиля Bootstrap
Как создать флажок в стиле Bootstrap?
Как выполнить проверку нескольких флажков в Javascript
Как получить значение флажка при отправке формы

Пример флажка (два состояния) | Авторские методы WAI-ARIA 1.1

Пример флажка (два состояния) | Практика создания WAI-ARIA 1.1

В этом примере реализуется шаблон проектирования флажка для флажка с двумя состояниями с использованием элементов div .

Подобные примеры включают:

Пример

Приправы для сэндвичей

Салат
Помидор
Горчичный
Ростки

Поддержка клавиатуры

Ключ	Функция
`Выступ`	Перемещает фокус клавиатуры на флажок .
`Пространство`	Переключает флажок между установленным и снятым состояниями.

Роль, свойство, состояние и атрибуты Tabindex

Роль	Атрибут	Элемент	Использование
		`ч4`	Предоставляет группирующую метку для группы флажков.
`группа`		`дел`	Определяет элемент `div` как контейнер `группы` для флажков.
	`aria-labelledby`	`дел`	Атрибут `aria-labelledby` ссылается на атрибут `id` элемента `h4` для определения доступного имени для группы флажков.
`флажок`		`дел`	Определяет элемент `div` как флажок . Дочернее текстовое содержимое этого `div` предоставляет доступное имя флажка.
	`tabindex = "0"`	`дел`	Включает флажок в последовательность вкладок страниц.
	`aria-checked = "false"`	`дел`	Указывает, что флажок — не отмечен . Селекторы атрибутов CSS (например, `[aria-checked = "false"]` ) используются для синхронизации визуальных состояний со значением атрибута `aria-checked` . Для поддержки настроек высокой контрастности в операционной системе и браузере псевдоэлемент CSS `:: before` и свойство `content` используются для генерации визуальных индикаторов состояния флажка.
	`aria-checked = "true"`	`дел`	Указывает, что установлен флажок . Селекторы атрибутов CSS (например, `[aria-checked = "true"]` ) используются для синхронизации визуальных состояний со значением атрибута `aria-checked` . Для поддержки настроек высокой контрастности в операционной системе и браузере псевдоэлемент CSS `:: before` и свойство `content` используются для генерации визуальных индикаторов состояния флажка.

Исходный код JavaScript и CSS

Исходный код HTML

Пример простого флажка с двумя состояниями

Шаблон проектирования флажка в методиках разработки WAI-ARIA 1.1

`Создать CheckBox с помощью HtmlHelper в ASP.Net MVC`

Класс HtmlHelper включает два метода расширения для создания элемента управления HTML в виде бритвы: CheckBox () и CheckBoxFor () .

В этой статье мы будем использовать следующий класс модели Student .

  общественный класс Студент
{
    public int StudentId {получить; задавать; }
    [Дисплей (Name = "Name")]
    общедоступная строка StudentName {получить; задавать; }
    public bool isActive {получить; задавать; }
}

`HTML.CheckBoxFor ()`

Метод расширения CheckBoxFor () создает элемент управления для свойства модели, указанного с помощью лямбда-выражения.

Посетите docs.microsoft.com, чтобы узнать обо всех перегрузках метода CheckBoxFor ().

  @ модель Студент

@ Html.CheckBoxFor (m => m.isActive)

В приведенном выше примере первым параметром является лямбда-выражение, указывающее свойство модели для привязки к элементу флажка. В приведенном выше примере мы указали свойство isActive.

Обратите внимание, что он создал дополнительное скрытое поле с тем же именем и значением = false .Когда вы отправляете форму с флажком, значение публикуется только в том случае, если флажок установлен. Итак, если вы оставите флажок снятым, то на сервер ничего не будет отправлено. Иногда вам может понадобиться отправить на сервер false . Поскольку скрытый вход имеет то же имя, он отправит на сервер false , если флажок не установлен.

`Html.CheckBox ()`

Файл Html.CheckBox () — это свободно типизированный метод, который генерирует с указанным именем, isChecked, boolean и атрибутами HTML.

  @ Html.CheckBox ("isActive", истина)

  <вход проверен = "проверен"
        
        name = "isActive"
        type = "checkbox"
        value = "true" />

`Флажок для выбора множественного выбора внутри полей HTML-формы`

Флажки — это объекты HTML-формы, которая ведет себя как тумблер.то есть флажок может находиться в одном из двух состояний: отмечен или не отмечен. Из группы флажков пользователь может выбрать несколько вариантов.

HTML-форма Типы ввода флажков для сбора выбранных пользователем параметров с атрибутами

`Атрибуты поля флажка:`

Атрибут	Описание
Имя	Задает имя флажка, с помощью которого на него можно ссылаться.
значение	Значение флажка. Каждый флажок будет иметь разные значения в группе.
Установлено	Флажок будет установлен (по умолчанию). В группе кнопок можно выбрать более одной.

Имя: Задает имя объекта, через который на него можно ссылаться. Значение: Задает значение флажка. Это значение будет возвращено, если флажок установлен. Проверено: Если задано, флажок будет установлен по умолчанию, иначе он не будет отмечен.Не добавляйте к этому ни одинарные, ни двойные кавычки.

`Пример:`

   Синий
 Красный
 Зеленый

Это даст следующий результат:

Любимый цвет (а): Синий красный Зеленый

Мы можем держать более одной кнопки выбранной или отмеченной.

`Радиокнопка и флажок`

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

← HTML-форма ← Раскрывающийся список Радиокнопки →

Эта статья написана командой plus2net.com .

Будьте первым, кто оставит комментарий:

plus2net.com

Нажмите здесь, чтобы узнать больше о полях FORM и HTML

`91 Checkboxes CSS`

Коллекция бесплатных HTML и CSS custom checkbox примеров: с изображением, с меткой, отмеченным и т. Д. .Обновление коллекции за февраль 2020 года. 8 новинок.

Флажки начальной загрузки
Флажки jQuery

`Автор`

Флорин Корнеа
16 марта 2021 г.

`О коде`

`Анимационные функции Обновить панель управления Страница`

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

`Автор`

Sławek Jaskulski
9 октября 2020

`О коде`

`Флажок карты`

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

`Автор`

Гомер Гейнс
10 сентября 2020

`О коде`

`Доступный пользовательский тумблер`

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

`О коде`

`Чек`

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

`Автор`

Сикрити Дакуа
22 мая 2020

`Автор`

Милан Раринг
5 марта 2020

`О коде`

`Анимация контрольного списка — только CSS`

Простая анимация контрольного списка.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

`Автор`

Кэтрин Като
17 февраля 2020

`О коде`

`Флажок Todo`

Флажок Todo с эффектом наведения и зачеркивания текста при наведении.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

`Автор`

Аарон Икер
31 января 2020

`О коде`

`+/- Переключить`

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

`Автор`

Андреас Сторм
29 января 2020

`Сделано с`

HTML (мопс) / CSS (стилус)

`О коде`

`Липкий флажок`

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

`Автор`

Брейдон Койер
28 января 2020

`О коде`

`Нейоморфные флажки`

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: font-awesome.css

`Автор`

Аарон Икер
11 января 2020

`О коде`

`2020 Переключает`

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

`Автор`

Крис Вайссенбергер
23 декабря, 2019

`О коде`

`Неуморфный дизайн`

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

`Автор`

Аарон Икер
9 декабря 2019

`О коде`

`Флажки`

Микровзаимодействие — это несколько вариаций классического флажка.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

`Автор`

Андреас Сторм
3 октября 2019

`О коде`

`Галочка`

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

`Автор`

Гималаи Сингх
29 июня 2019

`О коде`

`Флажок Анимация`

Анимация флажка создается только с использованием HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

`Автор`

Андреас Сторм
15 июня 2019

`Сделано с`

HTML (мопс) / CSS (стилус)

`О коде`

`Флажок`

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

`Автор`

Мохаммадреза Зиадзаде
15 июня 2019

`О коде`

`Флажок`

Простой флажок с анимацией.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

`О коде`

`Необычный флажок`

Использует только флажок , ввод и ярлык (поэтому он доступен по умолчанию) внутри формы (поскольку смешивание непосредственно с телом является ошибочным).

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

`Автор`

Андреас Сторм
6 февраля 2019

`Сделано с`

HTML (мопс) / CSS (стилус)

`О коде`

`Блокировка флажка`

Lock — микровзаимодействие на чистом CSS с флажком HTML и SVG.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

`Автор`

Андреас Сторм
9 февраля 2019

`Сделано с`

HTML (мопс) / CSS (стилус)

`О коде`

`Перевернуть флажок`

Флажок «Перевернуть» в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

`Автор`

@mandycodestoo
2 декабря 2018 г.

`О коде`

`Флажок`

Флажок с анимацией на чистом CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

`Автор`

Адам Куинлан
18 октября 2018

`О коде`

`Входы флажка Chippy`

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css

`Автор`

Аарон Икер
20 сентября 2018

`О коде`

`Переключить анимацию флажка`

Переключить кнопку проверки. Сладкая анимация, плавность и правильная скорость.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

`О коде`

`Необычные флажки и радиокнопки`

Прошли десятилетия — флажки и переключатели по-прежнему выглядят ужасно и плохо работают без некоторой любви. Начнем с хорошо сформированного HTML, посмотрим, что мы можем сделать с помощью небольшого стиля и некоторых глифов Font Awesome …

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css

`Автор`

Стас Мельников
18 июля 2018

`О коде`

`Флажки на чистом CSS`

Я использовал вложенные элементы span для создания анимации квадратного поворота и анимации стрелки.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

`Автор`

Жуан Марсель
5 июля 2018 г.

`О коде`

`Emojibox — флажок с Emojis`

Флажок со смайликами (без JS).Создавайте более выразительные флажки с помощью смайлов. Они сочетают в себе простоту флажков для пользователя с выразительностью смайликов. Он использует флажок и переключатель для создания двоичного или недвоичного выбора. Анимация выполняется с помощью переходов CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css

`Автор`

Андреас Сторм
9 мая 2018

`О коде`

`Переключатель CSS`

Переключатель CSS для материального дизайна.

`Автор`

Андреас Сторм
3 мая 2018

`О коде`

`Флажок дизайна CSS`

Флажок CSS-дизайна материалов.

`Автор`

Андреас Сторм
18 апреля 2018

`О коде`

`Флажок`

Флажок

Brett Commandeur
13 февраля 2018

`О коде`

`Флажок Emoji`

Флажок

Pure CSS emoji.

`Автор`

Бадди Рино
12 сентября 2017 г.

`О коде`

`Флажки, вдохновленные материалами`

Уловка заключается в размещении метки после флажка. Таким образом, вы можете использовать состояние : checked для переключения различных псевдоэлементов на этикетке. JavaScript не требуется. Чтобы заставить работать фоновую анимацию, вам понадобится немного магии.Ярлык : перед элементом — маленький кружок 10х10. Мы анимируем его масштаб вместо размера, чтобы сохранить пропорции круга и сделать так, чтобы он выглядел так, как будто он «заполняет» полосу. Максимальная ширина формы установлена на 550 пикселей. Элемент : до анимируется с использованием scale3d (для аппаратного ускорения) в 56 раз. 56 * 10 === 560. Это позволяет кругу заполнять полосу, немного выходя за границы контейнера входной группы.

`Автор`

Леонард Мигер
28.08.2017

`О коде`

`Флажки`

флажков на чистом CSS.

`О коде`

`Пользовательский флажок / тумблер`

Коллекция из четырех тумблеров, сделанных с помощью HTML и CSS без единой строчки JavaScript. Два переключателя также сделаны с помощью SVG.

`О коде`

`Флажки на чистом CSS3 с FontAwesome`

флажка на чистом CSS3 с FontAwesome и переходами.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: font-awesome.css

`Автор`

Мэтью Шилдс
25.06.2017

Демонстрационное изображение: Реалистичный переключатель

`Реалистичный переключатель`

Переключатель реалистичного CSS (флажок). Сделано Натаном Тейлором 19 февраля 2017 г.

Демо-изображение: флажок Jelly Checkbox

`Jelly Checkbox`

Флажок

Jelly с HTML и CSS. Сделано Андреасом Стормом 8 февраля 2017 г.

Демонстрационное изображение: Флажок «Полный CSS»

`Флажок «Полный CSS»`

Полная кнопка флажка css. Вы найдете: — Фон SVG -css transition — псевдоэлемент — без JS. Сделано Тимоти Гиньяром 5 февраля 2017 г.

Демонстрационное изображение: пользовательские флажки, переключатели и поля выбора

`Пользовательские флажки, переключатели и поля выбора`

Полностью CSS: настраиваемые флажки, переключатели и поля выбора. Сделано Кенаном Юсуфом 18 января 2017 г.

Демонстрационное изображение: Тумблер All-CSS

`Тумблер All-CSS`

Переключатель All-CSS (взлом флажка). Сделано Маркусом Бернеттом 12 января 2017 г.

Демонстрационное изображение: Флажок с анимацией на чистом CSS

`Флажок с анимацией на чистом CSS`

Флажок с чистой анимацией html / css, созданный для аудитории блога North of Rapture. Автор Павел Дурчок 9 января 2017 г.

Демонстрационное изображение: флажки «Реалистичность»

`флажки «Реалистичность»`

Реалистичные флажки только с CSS. Сделано Twikito 19 октября 2016 г.

Демо-изображение: флажок Elegantly Simple

`Checkbox Elegantly Simple`

Элегантно простой флажок с HTML и CSS. Изготовлено Богданом 19 августа 2016

Демо-изображение: Флажок стиля материала Google (только CSS)

`Флажок стиля материала Google (только CSS)`

Чекбоксы, основанные на реализации полимерных чекбоксов в материальном дизайне.Они не полностью копируют их, но являются всего лишь упражнением для их имитации с помощью CSS. Работают только в хроме 🙂 Сделано Сэмом 12 августа 2016

Демонстрационное изображение: флажок настраиваемого CSS

`флажок настраиваемого CSS`

Флажок «Пользовательский HTML и CSS». Сделано Дереком Морашем 7 августа 2016 г.

Демонстрационное изображение: Флажки на чистом CSS

`Флажки на чистом CSS`

Кнопки переключения на чистом HTML и CSS. Сделано Маурисио Альенде 17 июня 2016 г.

Демонстрационное изображение: флажок SVG

`флажок SVG`

Флажок, используемый для статьи SitePoint о стилизации элементов управления формы с помощью Sass. Сделано GREY GHOST 10 июня 2016 г.

Демо-изображение: настраиваемый флажок

`Пользовательский флажок`

Пользовательские флажки, которые хорошо работают с иконочным шрифтом. Поддержка современных браузеров с резервным вариантом IE6 +. Сделано mattdrose 31 мая 2016 г.

Демонстрационное изображение: флажки для жидкости

`флажки для жидкости`

Интересно, возможна ли анимация с чистыми флажками CSS / HTML. Сделано Bjorn 18 апреля 2016 г.

Демо-изображение: простой флажок

`Простой флажок`

Простой флажок HTML и CSS. Сделано Памелой Дайн 15 апреля 2016 г.

Демонстрационное изображение: флажок «Морфинг CSS»

`флажок «Морфинг CSS»`

Флажок морфинга HTML и CSS. Сделано Sjoerd de Roij 5 апреля 2016 г.

Демо-изображение: Другой переключатель

`Другой переключатель`

Переключение с HTML и CSS. Сделано Маккензи Боббиттом 19 февраля 2016 г.

Демо-изображение: настраиваемый флажок

`Пользовательский флажок`

Пользовательский флажок с маркером SVG. Сделано Tommy Rolchau Mathiesen 5 февраля 2016 г.

Демо-изображение: флажок Flat UI

`Flat UI Checkbox`

Флажок

Flat UI с HTML и CSS. Сделал Арсен Збидняков 19 января 2016 г.

Демонстрационное изображение: флажок «Движение»

`, флажок «Движение»`

Перед сном перед сном переделка метки с флажком движения. Сделано Йонасом Бадаликом 4 ноября 2015 г.

Демонстрационное изображение: Кнопка переключения

`Кнопка переключения`

Симпатичная кнопка переключения. Сделано Kyosuke 3 ноября 2015 г.

Демонстрационное изображение: тумблер Gooey

`Тумблер Gooey`

Флажок Gooey Только CSS. Автор Винсент Дюран 14 сентября 2015 г.

Демонстрационное изображение: Чистый CSS переключает

`Чистый CSS переключает`

Развлекаемся с анимацией и переходами 🙂 Сделано Рафаэлем Гонсалесом 22 июля 2015 г.

Демо-изображение: настраиваемый флажок

`Пользовательский флажок`

Пустое поле превращается в чек.Никакой дополнительной разметки, просто ввод, метка для нее и немного CSS. Сделал Валерий 20 июня 2015 г.

Демонстрационное изображение: Уловка с флажком: простое переключение

`Уловка с флажком: простое переключение`

Основная формула для управления внешним видом флажка. Нет JavaScript. Сделано Уиллом Бойдом 16 июня 2015 г.

Демо-изображение: Стиль флажка 2.0

`Стиль флажка 2.0`

Стиль флажка в HTML и CSS. Сделано Лоренцо Д’Ианни 4 июня 2015 г.

Демонстрационное изображение: Переключить кнопку флажка

`Переключить кнопку флажка`

Отзывчивый флажок устанавливается размером шрифта, легко настраивает внутренний текст для состояний включения и выключения. Сделано Дарреном 12 мая 2015 г.

Демо-изображение: восхитительная анимация флажка

`Прекрасная анимация флажка`

Маленькие аккуратные флажки с приятной анимацией без SVG. Сделано Диланом Рагой 1 февраля 2015 г.

Демонстрационное изображение: флажок в простом стиле

`Поле для флажка в простом стиле`

Флажок в простом стиле с использованием HTML и CSS. Сделано Хуаном Кабрерой 27 октября 2014 г.

Демо-изображение: настраиваемый флажок

`Пользовательский флажок`

Очень простой настраиваемый флажок.Только с использованием HTML и CSS. Автор Андре Кортеллини 4 сентября 2014 г.

Демонстрационное изображение: флажок «Анимированный CSS3»

`, флажок «Анимированный CSS3»`

CSS3-анимированный (кроме IE9) флажок, который можно использовать как класс на метке для флажка (для управления значением флажка) или можно использовать как класс для отдельного элемента и переключаться путем добавления класса через javascript . Сделано Джимми Гилламом 10 июня 2014 г.

Демо-изображение: флажок

`флажок`

Флажок полного CSS с переходом. Сделано Кевином Чассанье 5 июня 2014 г.

Демо-изображение: флажок с SVG

`флажок с SVG`

Флажок с HTML, CSS и SVG. Сделано feng liang 13 мая 2014 г.

Демонстрационное изображение: использование псевдоэлементов для стиля ввода

`Использование псевдоэлементов для стиля ввода`

В поддерживаемых браузерах псевдоэлементы могут использоваться для стилизации входных данных для флажков / переключателей для их отмеченных и непроверенных состояний, в то же время обеспечивая функциональный откат для браузеров, которые не поддерживают стили ввода, без выполнения странных сбросов. Сделано Алексом Бергином 19 апреля 2014 г.

Демо-изображение: семантические флажки

`Семантические флажки`

флажков с анимацией в семантическом CSS. Сделано Деметри Ганофф 30 марта 2014 г.

Демонстрационное изображение: флажок «Анимация только для CSS»

`Поле для флажка «Анимация только для CSS»`

Еще один анимированный флажок. Сделано Тимом Севериеном 6 февраля 2014 г.

`Автор`

Педро Кампос
15 января 2014

`О коде`

`Чекбоксы CSS`

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Демо-изображение: флажок «Стильный»

`Значок «Стильный»`

Флажок

Только CSS. Сделано Стефаном Юдисом 22 сентября 2013 г.

Демонстрационное изображение: Плоский тумблер

`Плоский тумблер`

Ремейк Flat Toggle Switch выстрела Dribbble от Джошуа Эндрю Дэвиса. Сделано Феликсом Де Монтисом 6 сентября 2013 г.

Демо-изображение: флажок CSS

`флажок CSS`

Пользовательский флажок со стилем… Сделано в pixellip 12 июня 2013 г.

Демонстрационное изображение: Флажок восстановления результатов опросов

`Флажок восстановления результатов опросов`

Флажок Абсолютно CSS. Сделано Lionel T 9 июня 2013 г.

Демонстрационное изображение: анимированные флажки в сенсорном стиле Ubuntu

`Анимированные флажки в сенсорном стиле Ubuntu`

Анимированные сенсорные флажки Ubuntu с использованием HTML и CSS. Сделано Эдуардом Майером 26 мая 2013 г.

Демонстрационное изображение: флажок «Очистить CSS»

`Поле «Очистить CSS»`

Флажок «Очистить HTML и CSS». Сделано Джеффом Пауэрсом 25 августа 2012 г.

`INPUT type = checkbox Элемент | INPUT type = checkbox Объект`

Создает флажок.

Синтаксис HTML

 < ВХОД 
      КЛЮЧ ДОСТУПА =   ключ 
      ALIGN = LEFT  |  ЦЕНТР  |  ПРАВА 
      ALT =   текст 
      ПРОВЕРЕНО 
      CLASS =   имя класса 
      ВЫКЛЮЧЕНО 
      ID =   значение 
      LANG =   язык 
      ЯЗЫК  = JAVASCRIPT | АКРИПТ | VBSCRIPT | VBS
      LOWSRC =   url 
      МАКС.ДЛИНА =   n 
      ИМЯ =   имя 
      ТОЛЬКО ДЛЯ ЧТЕНИЯ 
      РАЗМЕР =   n 
      СТИЛЬ =   css1-properties 
      TABINDEX =   n 
      TITLE =   текст 
      ТИП =   ПРОВЕРКА 
      ЗНАЧЕНИЕ =   значение 
      событие   =   скрипт 
 >

Замечания

Когда выбран элемент флажка , пара имя / значение отправляется вместе с ФОРМОЙ.Значение по умолчанию для флажка — на .
Стили высоты и ширины доступны для флажка Элемент начиная с Microsoft® Internet Explorer 5. Размер элемента устанавливается на основе значений, предоставленных автором, за исключением случаев, когда заданный размер меньше определенного минимума. Размер рассчитывается следующим образом:
Если высота или ширина больше 20 пикселей, отступ вокруг флажка устанавливается на 4 пикселя, а внутренняя высота или ширина — на 8 пикселей.
Если высота или ширина меньше 20 пикселей, но больше 13 пикселей, отступ вокруг флажка равен половине указанной высоты или ширины минус 13. Например, если указанная ширина флажка равна 17, уравнение будет следующим: (17-13) / 2.
Если высота или ширина меньше 12 пикселей, отступ вокруг флажка устанавливается на 0, а внутренняя ширина устанавливается на значение, указанное автором.
Флажок Элемент является встроенным элементом и не требует закрывающего тега.
Этот элемент доступен в HTML и скриптах, начиная с Internet Explorer 3.0.

Участники

Стили

Пример

В этом примере используется элемент флажка для создания двух флажков с пояснительным текстом. События onclick вызывают две функции скрипта.