Чекбокс checkbox

HTML тег

Все элементы тега форм создаются с помощью тега <input>.

Синтаксис <input>

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

• name=»name_field» — параметр для задания имени конкретному input. Это нужно, чтобы при дальнейшей обработке данных формы можно было получить значение этого поля.
• type=»значение» — отвечает за тип элемента, т.е. что именно будет представлять из себя поле. И здесь есть множество возможных значений:
  • text — текстовое поле. Одно из самых часто используемых значений
  • password — текстовое поле, но с той особенностью, что при вводе символы скрыты
  • radio — радиокнопки
  • checkbox — переключатели
  • submit — кнопка для отправки значений формы (управление передается на адрес указанный в адрес, указанный в action атрибута формы)
  • reset — кнопка для очистки всей формы
  • hidden — скрытое поле
  • button — кнопки для обработки каких-то действий (не путать с submit!)
  • file — для загрузки файлов на сервер
  • image — поле с изображением (используется крайне редко)
• value=»значение» — указывается значение по умолчанию

Теперь разберем более подробно каждый элемент

Зависимые чекбоксы

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

Как и все теги в HTML, чекбоксы – это такие элементы, которые имеют свои признаки. Какими они бывают? Выше уже был упомянут атрибут для предварительной отметки флажка – checked. Так как в одной форме у чекбоксов должны быть различные имена, нужен атрибут name. Он как раз идентифицирует каждый отдельный флажок. Для того, чтобы задать значение, которое будет отправляться на сервер, используют атрибут value.

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

All attributes of input

Attribute name	Values	Notes
step		Specifies the interval between valid values in a number-based input.
required		Specifies that the input field is required; disallows form submission and alerts the user if the required field is empty.
readonly		Disallows the user from editing the value of the input.
placeholder		Specifies placeholder text in a text-based input.
pattern		Specifies a regular expression against which to validate the value of the input.
multiple		Allows the user to enter multiple values into a file upload or email input.
min		Specifies a minimum value for number and date input fields.
max		Specifies a maximum value for number and date input fields.
list		Specifies the id of a <datalist> element which provides a list of autocomplete suggestions for the input field.
height		Specifies the height of an image input.
formtarget		Specifies the browsing context in which to open the response from the server after form submission. For use only on input types of «submit» or «image».
formmethod		Specifies the HTTP method (GET or POST) to be used when the form data is submitted to the server. Only for use on input types of «submit» or «image».
formenctype		Specifies how form data should be submitted to the server. Only for use on input types «submit» and «image».
formaction		Specifies the URL for form submission. Can only be used for type=»submit» and type=»image».
form		Specifies a form to which the input field belongs.
autofocus		Specifies that the input field should be in focus immediately upon page load.
accesskey		Defines a keyboard shortcut for the element.
autocomplete		Specifies whether the browser should attempt to automatically complete the input based on user inputs to similar fields.
border		Was used to specify a border on an input. Deprecated. Use CSS instead.
checked		Specifies whether a checkbox or radio button form input should be checked by default.
disabled		Disables the input field.
maxlength		Specifies the maximum number of characters that can be entered in a text-type input.
language		Was used to indicate the scripting language used for events triggered by the input.
name		Specifies the name of an input element. The name and value of each input element are included in the HTTP request when the form is submitted.
size		Specifies the width of the input in characters.
src		Defines the source URL for an image input.
type	buttoncheckboxfilehiddenimagepasswordradioresetsubmittext	Defines the input type.
value		Defines an initial value or default selection for an input field.

Скажите, пожалуйста, кто поет – Без названия

Как правильно проверять checkbox на PHP — вариант 3

Теперь рассмотрим как же должно быть правильно все проверяться.

Для начала, нужно форму сделать согласно стандартам консорциума W3C

Код html:

<form action="page.php" method="post">
<input type="checkbox" name="checkme" checked="checked" /> « правильно пишем input согласно стандартам
</form>

Код PHP:

function checkbox_verify($_name)
// Выполняет: проверку checkbox
{
// обязательно прописываем, чтобы функция всегда возвращала результат
$result=0;

// проверяем, а есть ли вообще такой checkbox на HTML форме, а то часто промахиваются
if (isset($_REQUEST))
{ if ($_REQUEST=='on') {$result=1;}
}
return $result;
}

В итоге, вызов получается очень простым:

echo checkbox_verify('checkme');

Можно php код еще меньше написать, но я расписал для наглядности. Пользуйтесь на здоровье.

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

Далее смотрите шаблоны различных дизайнов checkbox для вашего проекта.

Бизнес модель сервиса Dropbox

CSS

С html структурой мы закончили. Теперь давайте посмотрим, каким образом мы можем стилизовать элементы <input>. Первым делом возьмёмся за радио элементы. Отображение позаимствуем с дизайна OS:

Стилизуем радиокнопки

В первую очередь, мы меняем иконку курсора на pointer (появляется рука с пальцем), для того чтобы пользователь понимал, что данный элемент кликабилен:

label {
	display: inline-block;
	cursor: pointer;
	position: relative;
	padding-left: 25px;
	margin-right: 15px;
	font-size: 13px;
}

Затем спрячем радио кнопку по её атрибуту:

input {
	display: none;
}

Заменяем скрытый элемент псевдо классом :before.

label:before {
	content: "";
	display: inline-block;

	width: 16px;
	height: 16px;

	margin-right: 10px;
	position: absolute;
	left: 0;
	bottom: 1px;
	background-color: #aaa;
	box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}

Такой же стиль мы применим и к чекбоксу. Разница только в том, что для радио кнопки нам нужно сформировать окружность. Добиться подобного эффекта мы можем, воспользовавшись border-radius и задав радиус в половину ширины и высоты элемента.

.radio label:before {
	border-radius: 8px;
}

На данном этапе наши элементы должны выглядеть вот так:

Теперь нам нужно добавить мелкие кружочки в основной круг при клике по кнопке. Для этого воспользуемся псевдо-элементом CSS3 :checked, и в качестве контента запишем HTML символ круга &#8226;, но для того чтобы всё отображалось так, как нам нужно, данное значение нужно преобразовать для CSS. Для этого можем воспользоваться сервисом Entity Conversion Tool

input:checked + label:before {
    content: "\2022";
    color: #f3f3f3;
    font-size: 30px;
    text-align: center;
    line-height: 18px;
}

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

Стилизуем чекбоксы

Теперь давайте займёмся оформление чекбоксов. Для начала снова спрячем элемент:

input {
	display: none;
}

Поскольку мы убираем стандартное отображение чекбокса при помощи псевдо-элемента :before, просто добавим рамку:

.checkbox label:before {
	border-radius: 3px;
}

Затем добавим символ “галочка”, который появится при клике по чекбоксу. Сделаем это по аналогии с радиокругом. На этот раз нам понадобится преобразовать HTML символ &#10003;.

input:checked + label:before {
	content: "\2713";
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
	font-size: 15px;
	color: #f3f3f3;
	text-align: center;
    line-height: 15px;
}

В итоге, вот что у нас должно получиться:

Почему не отправляются смс на МТС

Основной причиной невозможности обмена сообщениями является неправильные настройки СМС-центра. Для проверки введенных данных и корректировки значений необходимо зайти в настройки сообщений. В указанных полях должен находиться номер центра сообщений МТС: +79168999100. Вкладка канала передачи данных должна быть активной в графе «GSM», а тип сообщений на варианте «текст». Введенные настройки устанавливаются на телефон по умолчанию при использовании сим-карты. Сбои могут появиться после случайного удаления информации, а также при попадании вируса на устройство. Нередко причиной того, что не отправляются СМС Андроид, становится физический износ сим-карты, которую легко можно заменить при личном обращении в центр связи вашего оператора.

Применение в таблицах

Чекбокс применяется не только в HTML при разработке сайтов и веб-приложений. Такое программное обеспечение, как 1С, тоже использует данный элемент. Ведь на предприятии есть множество разных составляющих и при работе с документацией все это необходимо отмечать. К примеру, при помощи чекбокса можно отметить список складских запасов или клиентов, которым нужно отправить товар.

В каких еще программах применяется данный элемент? Excel – все знают эту программу для составления таблиц от компании Microsoft, которая часто является альтернативой 1С. Принцип работы флажка здесь таков: если галочка отмечена, то элемент возвращает истинное значение, если снята – ложное. Чтобы вставить чекбокс в документ, нужно включить специальную вкладку для разработчика. Делается это через параметры, которые в каждой версии Excel немного отличаются.

Как найти нужные настройки? Всегда есть справка или поисковая система. После того, как вкладка включена, можно вставлять элемент через команду «Вставить» пункта «Элементы управления»

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

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

После того, как чекбоксы в Excel будут вставлены, они по умолчанию становятся отмеченными. При нажатии мышью в любом месте документа отметка снимается. Для обратного выделения нужно кликнуть на флажок правой кнопкой мышки, так как левая кнопка снимает или устанавливает галочку.

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

Checked or not checked?

Notice how all the checkboxes so far have not been checked from the beginning — the user would have to interact with the checkbox to change its state from unchecked to checked. This might be what you want, but sometimes, you want the checkbox to be checked by default, either to suggest a choice to the user or because you are showing a checkbox with a value that corresponds to an existing setting, e.g. from a database. Fortunately, this is very simple — just add the checked attribute to the checkbox:

In the old days of XHTML, where each attribute should always have a value, even the boolean attributes, it would look like this:

Either way should work in all modern browsers, but the first way is shorter and more «HTML5-like».

Лучшие карты памяти форматов microSD

Transcend TS*USDHC10U1

Эта карта памяти принадлежит к формату microSDHC. Это говорит о том, что её объем не может превышать 32 Гб. Немного, но определенной категории владельцев смартфонов и планшетов этого вполне достаточно

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

Достоинства:

• В ассортименте компании — карты объемом от 8 до 32 Гб;
• В комплекте поставляется SD-адаптер;
• Очень долгий срок службы;
• Максимальные свойства скорости.

Недостатки:

Максимальный объем устроит не каждого.

Отзывы на Transcend TS*USDHC10U1 свидетельствуют о том, что это одна из самых быстрых карт памяти microSD. По крайней мере, в своём ценовом сегменте. Остальные карточки — или медленнее, или гораздо дороже.

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

ЧИТАТЬ ТАКЖЕ

4-ка лучших жестких дисков для ноутбуков

SanDisk Extreme microSDXC Class 10 UHS Class 3 60MB/s

Неплохая карта памяти для тех, кто не требует от подобного изделия необыкновенно высоких скоростей. В частности, карточка должна устроить владельцев бюджетных смартфонов и аппаратов среднего ценового сегмента, не способных на 4K-видеосъемку. Производитель пишет на упаковке, что скорость записи равняется 40 Мб/с — практика показывает, что эти слова весьма близки к правде.

Достоинства:

• В упаковке имеется SD-адаптер;
• С поломками покупатели практически не сталкиваются;
• Весьма добротные, пусть и не рекордные скоростные характеристики.

Недостатки:

• Не существует версии объемом 128 Гб;
• Цена снижается очень медленно;
• Не подходит для устройств, снимающих видео в очень высоком разрешении.

Отзывы на SanDisk Extreme microSDXC Class 10 UHS Class 3 показывают, что эту карту памяти не стоит покупать, если вы собираетесь использовать её в паре с GoPro 4 Black. Дело в том, что вы можете столкнуться с перегревом изделия, из-за чего съемка в 4K- или 2.7K-разрешении будет невозможна. Если же вы не балуетесь столь высококачественной видеосъемкой, то никаких проблем использование данной 64-гигабайтной карточки не вызовет.

ЧИТАТЬ ТАКЖЕ

Как выбрать жесткий диск SSD

Kingston SDCA3

А это идеальный вариант для обладателей новейших экшн-камер, способных на видеосъемку в разрешении 4K. Скоростные характеристики здесь таковы, что проблем не возникнет ни после одной минуты, ни после десяти минут, ни после получаса видеозаписи. Если вы снимаете очень часто и помногу, то рекомендуем вам обзавестись карточкой объемом 128 Гб, пусть даже её стоимость вас слегка испугает.

Достоинства:

• Скорость записи способна достигать 80 Мб/с;
• Скорость чтения — на уровне 90 Мб/с;
• В ассортименте присутствуют карточки объемом от 16 до 128 Гб;
• Дополнительно покупатель получит SD-адаптер.

Недостатки:

Стоит очень дорого.

Отзывы на Kingston SDCA3 свидетельствуют о том, что данный продукт точно соответствует заявленным компанией характеристикам. В комплекте с картой поставляется адаптер, что позволяет задействовать её даже в зеркальном фотоаппарате или любительской видеокамере. Если бы не высокая стоимость продукта, то можно было бы рекомендовать обзавестись подобной карточкой абсолютно всем владельцам портативной электроники.

ЧИТАТЬ ТАКЖЕ

Лучшие смартфоны с 2-мя SIM-картами по отзывам покупателей

Чекбоксы HTML.

Категория: Уроки HTML
Просмотров: 4135
Коментариев:
Дата: 2017-04-19
Добавил: admin

Мы продолжаем рассматривать элементы формы и сегодня мы рассмотрим еще один вид переключателей в 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.

<<< Предыдущий материал

Следующий материал >>>

Просмотреть демо: Демо

Скачать исходник: Скачать

‘)
document.write(»)
}
else
document.write(message)

function crossref(number)
{
var crossobj=document.all? eval(«document.all.neonlight»+number) : document.getElementById(«neonlight»+number)
return crossobj
}

function neon()
{
//Change all letters to base color
if (n==0)
{
for (m=0;m

• Как проверить html-страницу на ошибки.
• Тег iframe
• Теги fieldset и legend.
• Создание абсолютных и относительных ссылок в HTML документе.
• Создание изображения в виде ссылки.
• МЕТА теги для сайта.
• Введение в HTML. С чего начать WEB-программирование
• Формы HTML.

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

Input Checkbox Object Properties

Property	Description
autofocus	Sets or returns whether a checkbox should automatically get focus when the page loads
checked	Sets or returns the checked state of a checkbox
defaultChecked	Returns the default value of the checked attribute
defaultValue	Sets or returns the default value of a checkbox
disabled	Sets or returns whether a checkbox is disabled, or not
form	Returns a reference to the form that contains the checkbox
indeterminate	Sets or returns the indeterminate state of the checkbox
name	Sets or returns the value of the name attribute of a checkbox
required	Sets or returns whether the checkbox must be checked before submitting a form
type	Returns which type of form element the checkbox is
value	Sets or returns the value of the value attribute of a checkbox

Советы, как правильно использовать чекбокс

1. Не перемудрите и используйте стандартный вид чекбокса

Традиционно чекбоксы имеют квадратную форму

Пользователи распознают визуальные объекты по форме и стандартная квадратная форма чекбокса – это очень важно. Это связано с тем, что мы воспринимаем то, что ожидаем и ‘эта особенность описана у нас в Золотом правиле №4

Визуальная ясность. То есть пользователь должен легко распознавать элементы управления по их внешнему виду.

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

✓ Пример понятного чекбокса из интерфейса почты Яндекса

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

2. Правильно располагайте списки чекбоксов

Правильно — это значит вертикально, чтобы каждый пункт был в отдельной строке.

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

3. Используйте в подписях чекбоксов понятные утвердительные формулировки

Подписи к чекбоксам должны быть утвердительными и отражать действия, чтобы было понятно, что произойдет при выборе каждой опции. Избегайте отрицательных формулировок, типа “Не присылать мне рассылку” —  в этом случае получается, что пользователь должен включить опцию, чтобы действие не происходило. Помните, что пользователи думают о своих целях, а не об инструментах для их исполнения.

✓ Удачный пример формулировки на сайте Ostrovok.ru

✘ Пример отрицательной формулировки в настройках Microsoft Word

4. Не делайте размер чекбокса слишком маленьким

Как известно, чем меньше элемент, тем сложнее пользователю с ним взаимодействовать. Эта проблема очень актуальна для чекбоксов. Как известно по закону Фиттса, в маленький квадрат неудобно ни целится, ни попадать. Есть несколько способов решить эту проблему. Так, можно превратить чекбокс в кнопку, метку или переключатель, сделав кликабельную область более крупной.

✓ Чекбокс маленького размера на сайте Ostrovok.ru, который превратили в кнопку

✓ Чекбокс удобного размера на сайте Аэрофлота

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

✓ Чекбокс небольшого размера на сайте Аэрофлота, который реагирует на нажатие подписи

6. Используйте опции «выбрать все» и «убрать все»

Чтобы облегчить работу пользователя с большим количеством чекбоксов (более 5), в интерфейсе должны быть предусмотрены опции «Выбрать все чекбоксы» и «Снять все чекбоксы». Представьте, что вам нужно выбрать, скажем, 14 пунктов из 20 в списке. Гораздо удобнее и быстрее будет сначала выбрать все, а потом снять ненужные галочки.

✓ Правильный пример использования опции “выбрать все” торрент-клиента μTorrent

7. Чекбокс не должен запускать действие мгновенно

Важно понимать, что, когда  пользователь взаимодействует с чекбоксами, он не ждет мгновенной обратной связи. Действие произойдет тогда, когда пользователь нажмет какую-то кнопку: “сохранить”, “отправить”, “подписаться”

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

✓ Удачный пример использования чекбокса на сайте Аэрофлота

Обычная галочка

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

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

ПримечанияRemarks

С помощью флажка можно задать для пользователя выбор между двумя значениями, такими как «Да»/,» true/false» или » вкл/.».Use a CheckBox to give the user a choice between two values such as Yes/No, True/False, or On/Off.

Когда пользователь выбирает флажок, отображается особая метка (например, X), а ее текущий параметр — Да, _Истина_или включено; Если пользователь не выберет этот флажок, он будет пустым и его параметр имеет значение » нет», » ложь» или » отключено «.When the user selects a CheckBox, it displays a special mark (such as an X) and its current setting is Yes, True, or On; if the user does not select the CheckBox, it is empty and its setting is No, False, or Off. В зависимости от значения свойства TripleState , CheckBox также может иметь значение .Depending on the value of the TripleState property, a CheckBox can also have a value.

Если элемент CheckBox к , то при изменении настройки изменяется значение этого источника.If a CheckBox is to a , changing the setting changes the value of that source. Выключенный элемент CheckBox показывает текущее значение, но недоступен и не позволяет изменять значение из пользовательского интерфейса.A disabled CheckBox shows the current value, but is dimmed and does not allow changes to the value from the user interface.

Можно также использовать флажки внутри группы, чтобы выбрать один или несколько связанных элементов группы.You can also use check boxes inside a group box to select one or more of a group of related items. Например, можно создать форму заказа, содержащую список доступных товаров с элементом CheckBox, расположенным перед каждым товаром.For example, you can create an order form that contains a list of available items, with a CheckBox preceding each item. Пользователь может выбрать конкретный товар или товары, устанавливая соответствующие флажки CheckBox.The user can select a particular item or items by checking the corresponding CheckBox.

Свойством по умолчанию для элемента CheckBox является свойство Value.The default property of a CheckBox is the Value property. Событием по умолчанию для элемента CheckBox является событие Click.The default event of a CheckBox is the Click event.

Примечание

Кроме того, в ListBox можно установить флажок, выбрав пункт Параметры.The ListBox also lets you put a check mark by selected options. В зависимости от приложения можно использовать элемент ListBox вместо группы элементов управления CheckBox.Depending on your application, you can use the ListBox instead of using a group of CheckBox controls.

«Ренессанс Банк» — Страхование Заемщиков и Держателей Кредитных Карт

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

• Смерть заемщика независимо от обстоятельств и возраста.
• Наступление нетрудоспособности с присвоением 1 группы инвалидности.

Выплата производится при наступлении страхового события в любой момент действия договора, при условии своевременного обращения в страховую компанию.

Не всем лицам доступна услуга страхования. Не подлежат страхованию несовершеннолетние и лица, уже признанные инвалидами 1 или 2 группы, а также граждане в преклонном возрасте и заемщики, имеющие наркотическую зависимости или диагноз «вирус иммунодефицита человека», СПИД и т.д.

Подробнее с правилами страхования и порядок оформления знакомятся на страницах сайта «Ренессанс Кредит» в разделе «Дистанционное обслуживание» (вкладка «Страхование»).

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

Ещё примеры по кастомизации checkbox и label

В этом разделе представлены следующие примеры:

1. Стилизация checkbox, когда расположен в .

HTML разметка:

<label class="custom-checkbox">
  <input type="checkbox" value="value-1">
  <span>Indigo</span>
</label>

CSS код:

/* для элемента input c type="checkbox" */
.custom-checkbox>input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

/* для элемента label, связанного с .custom-checkbox */
.custom-checkbox>span {
  display: inline-flex;
  align-items: center;
  user-select: none;
}

/* создание в label псевдоэлемента before со следующими стилями */
.custom-checkbox>span::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  flex-grow: 0;
  border: 1px solid #adb5bd;
  border-radius: 0.25em;
  margin-right: 0.5em;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%;
}

/* стили при наведении курсора на checkbox */
.custom-checkbox>input:not(:disabled):not(:checked)+span:hover::before {
  border-color: #b3d7ff;
}

/* стили для активного чекбокса (при нажатии на него) */
.custom-checkbox>input:not(:disabled):active+span::before {
  background-color: #b3d7ff;
  border-color: #b3d7ff;
}

/* стили для чекбокса, находящегося в фокусе */
.custom-checkbox>input:focus+span::before {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* стили для чекбокса, находящегося в фокусе и не находящегося в состоянии checked */
.custom-checkbox>input:focus:not(:checked)+span::before {
  border-color: #80bdff;
}

/* стили для чекбокса, находящегося в состоянии checked */
.custom-checkbox>input:checked+span::before {
  border-color: #0b76ef;
  background-color: #0b76ef;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}

/* стили для чекбокса, находящегося в состоянии disabled */
.custom-checkbox>input:disabled+span::before {
  background-color: #e9ecef;
}

2. Стилизация , когда расположен в .

HTML разметка:

<label class="custom-radio">
  <input type="radio" name="color" value="indigo">
  <span>Indigo</span>
</label>

CSS код:

/* для элемента input c type="radio" */
.custom-radio>input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

/* для элемента label связанного с .custom-radio */
.custom-radio>span {
  display: inline-flex;
  align-items: center;
  user-select: none;
}

/* создание в label псевдоэлемента  before со следующими стилями */
.custom-radio>span::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  flex-grow: 0;
  border: 1px solid #adb5bd;
  border-radius: 50%;
  margin-right: 0.5em;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%;
}

/* стили при наведении курсора на радио */
.custom-radio>input:not(:disabled):not(:checked)+span:hover::before {
  border-color: #b3d7ff;
}

/* стили для активной радиокнопки (при нажатии на неё) */
.custom-radio>input:not(:disabled):active+span::before {
  background-color: #b3d7ff;
  border-color: #b3d7ff;
}

/* стили для радиокнопки, находящейся в фокусе */
.custom-radio>input:focus+span::before {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* стили для радиокнопки, находящейся в фокусе и не находящейся в состоянии checked */
.custom-radio>input:focus:not(:checked)+span::before {
  border-color: #80bdff;
}

/* стили для радиокнопки, находящейся в состоянии checked */
.custom-radio>input:checked+span::before {
  border-color: #0b76ef;
  background-color: #0b76ef;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* стили для радиокнопки, находящейся в состоянии disabled */
.custom-radio>input:disabled+span::before {
  background-color: #e9ecef;
}

Используйте чекбоксы для изменения настроек; не используйте для обозначения действия

Представим себе опцию, которая подразумевает только два возможных варианта. Что использовать в этом случае: переключатель или чекбокс? Основное отличие в том, что чекбокс означает статус, а переключатель — действие. Можете представить себе реальный выключатель — какое действие он выполняет в вашей ситуации? Если картинка сложилась, можете смело использовать для этой опции переключатель.

Посмотрите на пример ниже. Понятно, что переключатель сети Wi-Fi находится в положении “on”. А вот чекбокс немного смущает. Пользователю приходится думать, включен ли Wi-Fi или поставить галочку, чтобы включить его.

Для управления сервисами и системными компонентами (такими как Wi-Fi) используйте переключатели.

How To Create a Custom Checkbox

Step 1) Add HTML:

<label class=»container»>One  <input type=»checkbox»
checked=»checked»>  <span class=»checkmark»></span></label><label class=»container»>Two  <input type=»checkbox»> 
<span class=»checkmark»></span></label>
<label class=»container»>Three  <input type=»checkbox»> 
<span class=»checkmark»></span></label><label class=»container»>Four 
<input type=»checkbox»>  <span class=»checkmark»></span></label>

Step 2) Add 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;  height: 0;  width:
0;
}/* 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);}