Неопределённое состояние чекбокса

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider

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

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

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

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

HTML тег

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

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

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

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

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

Браузеры

Все современные версии браузеров — Firefox, Chrome, IE9, Opera, Safari показали одинаковый рабочий результат.

Также код не будет работать в IE8, эта версия не понимает :checked. Давайте сделаем поддержку старых версий IE, для чего вернём настройки элементов формы по умолчанию. Для начала к элементам желательно добавить классы и в стилях обращаться именно к ним. Так мы сможем задать стиль любого элемента без обращения к псевдоклассам CSS3.

Чтобы в стилях затронуть версии IE младше 9.0 воспользуемся условными комментариями. В стилях остаётся задать ширину и высоту для label по умолчанию и скрыть span (пример 2).

Пример 2. Стиль для IE8

Состояние «включено» и Unicode-символ «галочка»

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

inputtype=checkbox:checked + .pseudocheckbox::before { … }

Отмеченный переключатель обычно имеет внутри «галочку». Здесь нам на помощь приходит разнообразие символов Unicode, которое выходят далеко за пределы собственно букв и цифр. Есть среди этого многообразия и несколько значков для «галочки». Код значка мы запишем в свойство content:

inputtype=checkbox:checked + .pseudocheckbox::before { content: «\2714»; }

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

Центрируем по горизонтали:

text-align: center;

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

    font-family: Arial, sans-serif;font-size: 16px;

Кроме размера нужно добиться необходимого положения символа внутри квадратика по вертикальной оси. Лучше всего это делать с помощью line-height:

line-height: 16px;

line-height нужно подбирать индивидуально для каждого сочетания размера и семейства шрифта.

При выравнивании по базовой линии текста (vertical-align: baseline) именно значение line-height определеяет, где, собственно, будет нижняя граница текста у «квадратика». Если эти значения у отмеченного и неотмеченного будут отличаться, то они окажутся выровненными по-разному (так может получиться, например, если явно указать line-height только у отмеченного). Поэтому line-height лучше указывать в общем блоке стилей для ::before.

line-height обычно подбирают вместе с font-size, поэтому его удобно иметь в блоке стилей рядом. font-size, в свою очередь, может подбираться вместе с другими параметрами текста. Так что все их удобней перенести в общий блок для ::before, хотя, на первый взгляд, правила стилизации текста там выглядит нелогично, т.к. самого текста там нет.

Напоследок добавим жирность и укажем цвет:

font-weight: bold;color: #808080;

Все права на данную статью принадлежат порталу webew.ru.
Перепечатка в интернет-изданиях разрешается только с указанием автора
и прямой ссылки на оригинальную статью. Перепечатка в печатных
изданиях допускается только с разрешения редакции.

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.

Получение ключей и значений формы с помощью jQuery

Чтобы получить значения из формы без перезагрузки страницы, следует использовать скрипты (javascript или jQuery):

Создадим массив:

Затем каждый (each) выбранный пункт («input:checked») с помощью функции push запишем в массив val():

Содержание массива val() будем отображать на странице, для чего добавим объект html

jQuery:

Узнать, если checkbox html был выбран, можно с помощью .is(«:checked») и .prop(«checked»).

Получим значения(val) каждого отмеченного флажка и выведем его через alert():

То же самое проделаем для получения идентификатора (id) с помощью .prop («checked»):

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

Сделаем кнопку отправки формы недоступной («disabled»), если ни один флажок не был установлен:

Обратите внимание на двоеточие: .is («:checked») работает корректно с двоеточием, а .prop(«checked») срабатывает без двоеточия!!!

Добавим возможность отмечать сразу все пункты.

Весь код.

HTML:

jQuery:

PHP:

2). Получение значения нескольких checkbox

Второй способ банальный, каждому checkbox присвоить уникальное имя(name)и каждый чекбокс обрабатывать индивидуально!

Я тут думал о самом простом примере получения value из кнопки checkbox Input!

В чем главная проблема!? В том, что нам нужно:

1). сделать какое то действие onclick,
2). потом определить тег(любой id — в смысле уникальный якорь(образно.))
3). и только уже после этого получить значение из value type checkbox Input4). И первый вариант — это когда кнопка радио 0- одиночная кнопка:

В нашей кнопке в данном случае, обязательное условие id — мы как-то должны обратиться к тегу

<input type=»checkbox» id=»my_id» value=»my_id_value»>Чекбокс пример получения value<br>
Ну и далее повесим на наш id onclick и внутри выведем содержание value чекбокса alert( my_id.value );

<script>

my_id.onclick = function(){

alert( my_id.value );

};

</script>

Вы можете проверить работоспособность данного получения значения value из type checkbox Input в js

Чекбокс пример получения value

Получение значений из нескольких чекбоксов инпута в js также просто, как и в php!

Для иллюстрации сбора чекбоксов нам потребуются эти чекбоксы и кнопка в виде ссылки с id:

<input type=»checkbox» value=»red» name=»co»>Красный

<input type=»checkbox» value=»green» name=»co»>Зеленый

<input type=»checkbox» value=»blue» name=»co»>Синий

<a id=»to_send»>отправить</a>

Скрипт, который соберет вся нажатые чекбоксы(checked)! Обращаю ваще внимание, что внутри скрипта checkbox — это не тип… checkbox — это переменная(массив)(почему такое возможно!? Всё просто : type=checkbox — это из html, а var checkbox из js), они из разных сред. После проверки, если чекбокс был отмечен, заносим данные в переменную(str) с пробелом, далее выводим результат через alert

После проверки, если чекбокс был отмечен, заносим данные в переменную(str) с пробелом, далее выводим результат через alert

<script>

window.onload = function() {

var checkbox;

to_send. onclick = function()

{

  checkbox = document.getElementsByName(«co»);

  var str = «»;

  for(var i=0; i<checkbox.length; i++){

  if(checkbox . checked) {str+=checkbox.value+» «;}

  }

  alert(str);

}

}

</script>

Для того, чтобы получить сразу несколько позиций checkbox — нажмите кнопку отправить!

Красный
Зеленый
Синий
отправить

Для того, чтобы получить значение value в переменную в php? то вам нужно в результата вывода поменять echo на любую переменную и уже там делать все, что вам захочется…

if( $_POST ) { $здесь_переменная = strip_tags($_POST);}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример 5: Анимированный переключатель день/ночь

CSS оформление

.toggle{display:block;text-align:center;margin-top:40px;user-select:none}
.toggle--checkbox{display:none}
.toggle--btn{display:block;margin:0 auto;font-size:1.4em;transition:all 350ms ease-in}
.toggle--btn:hover{cursor:pointer}
.toggle--btn,.toggle--btn:before,.toggle--btn:after,.toggle--checkbox,.toggle--checkbox:before,.toggle--checkbox:after,.toggle--feature,.toggle--feature:before,.toggle--feature:after{transition:all 250ms ease-in}
.toggle--btn:before,.toggle--btn:after,.toggle--checkbox:before,.toggle--checkbox:after,.toggle--feature:before,.toggle--feature:after{content:'';display:block}
.toggle--daynight .toggle--btn,.toggle--like .toggle--btn{position:relative;height:70px;width:125px;border-radius:70px}
.toggle--daynight .toggle--btn:before,.toggle--like .toggle--btn:before{position:absolute;top:2px;left:4px;width:56px;height:56px;border-radius:50%}
.toggle--daynight .toggle--btn{border:5px solid #1c1c1c;background-color:#3c4145}
.toggle--daynight .toggle--btn:before{background-color:#fff;border:5px solid #e3e3c7}
.toggle--daynight .toggle--btn:after{position:absolute;top:62%;left:39px;z-index:10;width:11.2px;height:11.2px;opacity:0;background-color:#fff;border-radius:50%;box-shadow:#fff 0 0,#fff 3px 0,#fff 6px 0,#fff 9px 0,#fff 11px 0,#fff 14px 0,#fff 16px 0,#fff 21px -1px 0 1px,#fff 16px -7px 0 -2px,#fff 7px -7px 0 1px,#d3d3d3 0 0 0 4px,#d3d3d3 6px 0 0 4px,#d3d3d3 11px 0 0 4px,#d3d3d3 16px 0 0 4px,#d3d3d3 21px -1px 0 5px,#d3d3d3 16px -7px 0 1px,#d3d3d3 7px -7px 0 5px;transition:opacity 100ms ease-in}
@keyframes starry_star {
50%{background-color:rgba(255,255,255,0.1);box-shadow:#fff 30px -3px 0 0,#fff 12px 10px 0 -1px,rgba(255,255,255,0.1) 38px 18px 0 1px,#fff 32px 34px 0 0,rgba(255,255,255,0.1) 20px 24px 0 -1.5px,#fff 5px 38px 0 1px}
}
@keyframes bounceIn {
0%{opacity:0;transform:scale(0.3)}
50%{opacity:100;transform:scale(1.1)}
55%{transform:scale(1.1)}
75%{transform:scale(0.9)}
100%{opacity:100;transform:scale(1)}
}
.toggle--daynight .toggle--feature{display:block;position:absolute;top:9px;left:52.5%;z-index:20;width:4px;height:4px;border-radius:50%;background-color:#fff;box-shadow:rgba(255,255,255,0.1) 30px -3px 0 0,rgba(255,255,255,0.1) 12px 10px 0 -1px,#fff 38px 18px 0 1px,rgba(255,255,255,0.1) 32px 34px 0 0,#fff 20px 24px 0 -1.5px,rgba(255,255,255,0.1) 5px 38px 0 1px;animation:starry_star 5s ease-in-out infinite}
.toggle--daynight .toggle--feature:before{position:absolute;top:-2px;left:-25px;width:18px;height:18px;background-color:#fff;border-radius:50%;border:5px solid #e3e3c7;box-shadow:#e3e3c7 -28px 0 0 -3px,#e3e3c7 -8px 24px 0 -2px;transform-origin:-6px 130%}
.toggle--daynight .toggle--checkbox:checked + .toggle--btn{background-color:#9ee3fb;border:5px solid #86c3d7}
.toggle--daynight .toggle--checkbox:checked + .toggle--btn:before{left:55px;background-color:#ffdf6d;border:5px solid #e1c348}
.toggle--daynight .toggle--checkbox:checked + .toggle--btn:after{opacity:100;animation-name:bounceIn;animation-duration:.6s;animation-delay:.1s;animation-fill-mode:backwards;animation-timing-function:ease-in-out}
.toggle--daynight .toggle--checkbox:checked + .toggle--btn > .toggle--feature{opacity:0;box-shadow:rgba(255,255,255,0.1) 30px -3px 0 -4px,rgba(255,255,255,0.1) 12px 10px 0 -5px,#fff 38px 18px 0 -3px,rgba(255,255,255,0.1) 32px 34px 0 -4px,#fff 20px 24px 0 -5.5px,rgba(255,255,255,0.1) 5px 38px 0 -3px;animation:none}
.toggle--daynight .toggle--checkbox:checked + .toggle--btn > .toggle--feature:before{left:25px;transform:rotate(70deg)}

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

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

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

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

Ещё примеры по кастомизации 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;
}

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

Как правильно проверять 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 для вашего проекта.

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsCascading DropdownDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

Обеспечьте обратную связь от взаимодействия с переключателем/чекбоксом

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

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

Включение Wi-Fi в iOS

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

Используйте чекбокс, если изменения вступают в силу только после нажатия кнопки “Отправить” или “Далее”.

Заключение

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

Подписывайтесь на UX Planet: |

Пример 7: Неоновый переключатель вкл/выкл

HTML разметка

.toggle{display:block;text-align:center;margin-top:40px;user-select:none}
.toggle--checkbox{display:none}
.toggle--btn{display:block;margin:0 auto;font-size:1.4em;transition:all 350ms ease-in}
.toggle--btn:hover{cursor:pointer}
.toggle--btn,.toggle--btn:before,.toggle--btn:after,.toggle--checkbox,.toggle--checkbox:before,.toggle--checkbox:after,.toggle--feature,.toggle--feature:before,.toggle--feature:after{transition:all 250ms ease-in}
.toggle--btn:before,.toggle--btn:after,.toggle--checkbox:before,.toggle--checkbox:after,.toggle--feature:before,.toggle--feature:after{content:'';display:block}
@keyframes neon {
0%{text-shadow:0 0 10px #fff,0 0 15px #fff,0 0 25px #fff,0 0 40px #FF9900,0 0 70px #FF9900,0 0 90px #FF9900,0 0 90px #F90}
100%{text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #FF9900,0 0 35px #FF9900,0 0 40px #FF9900,0 0 50px #F90}
}
.toggle--neon{background-color:#222;margin-top:0;padding:50px 0}
.toggle--neon .toggle--btn{font-family:Audiowide;text-transform:uppercase;font-size:6.2em;color:#333;text-shadow:0 0 10px transparent,0 0 15px transparent,0 0 25px transparent,0 0 40px transparent,0 0 70px transparent,0 0 90px transparent,0 0 90px transparent}
.toggle--neon .toggle--btn:before,.toggle--neon .toggle--btn:after{display:inline-block;margin:0 20px;transition:all 220ms ease-in-out}
.toggle--neon .toggle--btn:before{content:attr(data-label-off);animation:neon 1.5s ease-in-out infinite alternate;animation-delay:90ms;color:#f1f1f1}
.toggle--neon .toggle--btn:after{content:attr(data-label-on)}
.toggle--neon .toggle--checkbox:checked + .toggle--btn:before{animation:none;color:#333}
.toggle--neon .toggle--checkbox:checked + .toggle--btn:after{animation:neon 1.5s ease-in-out infinite alternate;animation-delay:90ms;color:#f1f1f1}

Cмотрю на свой контент и думаю: стал бы я сам делиться им с друзьями?

Подборка слайдеров для сайта на чистом CSSКнопка для сайта в стиле минимализмГрадиент для кнопок на сайте3D текст с мультяшным эффектом на CSSCSS анимация в стиле рентгенаВерстка блоков со стрелочкамиАнимированный фон с плавающими облакамиКрасивое оформление 404 страницыВертикальное hover hide меню для сайта на HTML и CSSСтилизация Input File