Картинка вместо чекбокса

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

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

Значение атрибута type: tel

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

• Результат
• HTML-код
• Попробуй сам » /

Телефон:

Значение
Описание

button
Создает кнопку с произвольным действием, действие по умолчанию не определено:

checkbox
Создает флажки, которые напоминают переключатели тем, что дают пользователю возможность выбирать из предложенных вариантов:Я знаю HTML

color

Генерирует палитры цветов обеспечивая пользователям возможность выбирать значения цветов в шестнадцатеричном формате RGB:

date

Позволяет вводить дату в формате дд.мм.гггг.:
День рождения:

datetime-local

Позволяет вводить дату и время, разделенные прописной английской буквой по шаблону дд.мм.гггг чч:мм:
Дата встречи — день и время:

email

Браузеры, поддерживающие язык HTML5, проверят, соответствует ли введенный посетителем адрес электронной почты принятому стандарту для данного типа адресов:
E-mail:

file
Позволяет загружать файлы с компьютера пользователя:
Выберите файл:

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

image
Создает элемент в виде графического изображения, действующий аналогично кнопке Submit:

month

Позволяет пользователю вводить год и номер месяца по шаблону гггг-мм:

number

Создает поле, в которое пользователь может вводить только числовое значение. Для типа ввода number браузер предоставляет виджет счетчика, который представляет собой поле, справа от которого находятся две кнопки со стрелками — для увеличения и уменьшения числового значения. Для указания минимальных и максимальных допустимых значений ввода предназначены атрибуты min и max, а также можно установить шаг приращения с помощью атрибута step:
Укажите число (от 1 до 10):

password
Текстовое поле для ввода пароля, в котором все вводимые символы заменяются звездочкой либо другим, установленным браузером значком:
Введите пароль:

radio
Создает элемент-переключатель в виде небольшого кружка (иногда их называют радио-кнопками):
Радио-кнопки:

range

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

reset
Создает кнопку, которая очищает поля формы от введенных пользователем данных:

search

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

submit
Создает стандартную кнопку, активизируемую щелчком мыши. Кнопка собирает информацию с формы и отправляет ее на сервер обработчику:

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

time

Допускает ввод значений в 24-часовом формате, например 17:30. Браузеры отображают его как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускают ввод только значений времени:
Выберите время:

url

Заставляет браузер проверять, правильно ли пользователь ввел URL-адрес. Некоторые браузеры добавляют специфическую информацию в предупреждающие сообщения, выводимые на экран, при попытке отправить форму с некорректными значениями URL-адреса:
Главная страница:

week

Позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг:
Выберите неделю:

Название чекбокса

Название чекбокса пишется с заглавной буквы.

Формулируйте название чекбокса в положительном ключе. Не используйте отрицательные формулировки, потому что отключение такого чекбокса требует от пользователя произвести в голове логическую операцию c двумя «не». Например, «Не не получать уведомления»:

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

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

Старайтесь не вставлять в название чекбокса ссылку, т.к. самое название уже является интерактивным элементом. Если все-таки хочется добавить ссылку, оставьте первые 1-2 слова обычным текстом:

Separating form from function

The previous example was starting to become a bit cluttered with two
JavaScript script blocks as well as the onsubmit and
onchange event handlers inlined in the HTML.

We can separate the JavaScript code from the HTML and have the
required event handlers assigned after the page has loaded
using an onload event listener.

Here first is the HTML with all JavaScript removed:

And the JavaScript to reinstate the event handlers:

The forms behaviour should be unchanged:

While it looks much more complicated, this is a better solution
because it allows for the HTML and JavaScript to be maintained
separately. The only hooks between them are the id values for
the form itself and the checkbox input element. Also gone are any
globally defined functions or variables.

The JavaScript can now be moved to a separate file, or converted to
a code library allowing for it to be reused with other forms.

The required attribute on checkboxes is supported in
Internet Explorer 10 and most/all other browsers except for
Safari which ignores the requirement.

Обработка событий checkbox с использованием JavaScript

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

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

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

Событие onchange не вызывается до тех пор, пока состояние checked не будет обновлено. Internet Explorer не запускает событие onсhange, пока с чекбокса не снят фокус ввода. Чтобы избежать этой проблемы, я рекомендую использовать событие onclick.

<input type="checkbox"onclick="checkFluency()"  id="fluency"checked />

В коде HTML я добавляю событие onclick, которое буде вызывать функцию checkFluency():

functioncheckFluency()
{
  varcheckbox=document.getElementById('fluency');
  if(checkbox.checked!=true)
  {
    alert("you need to be fluent in English to apply for the job");
  }
}

В checkFluency() мы отслеживаем состояние чекбокса. Если флажок не установлен, то отображаем предупреждение.

См. такжеSee also

• Объект CheckBoxCheckBox object
• Примеры Microsoft FormsMicrosoft Forms examples
• Справочник по Microsoft FormsMicrosoft Forms reference
• Концепции Microsoft FormsMicrosoft Forms concepts

Поддержка и обратная связьSupport and feedback

Есть вопросы или отзывы, касающиеся Office VBA или этой статьи?Have questions or feedback about Office VBA or this documentation? Руководство по другим способам получения поддержки и отправки отзывов см. в статье Поддержка Office VBA и обратная связь.Please see Office VBA support and feedback for guidance about the ways you can receive support and provide feedback.

Customised HTML5 messages

As you would hope it is possible to customise the messages that are
displayed by the browser with your own text, but this can only be done
via JavaScript. You need to check the validity state of the
element yourself and set (and clear) the message explicitly:

The block of JavaScript below the form is assigning our custom error
message to the checkbox when the page loads. We know that the checkbox
is unchecked by default so we need to tell the browser what message to
display.

The onchange event handler on the checkbox then toggles the error message. When the checkbox is valid (checked) the message is set to blank which tells the browser that it’s ok for the form to be submitted.

When the checkbox is not checked and the Submit button is clicked an
alert is displayed similar to the examples above, but using our text
instead of the default.

Here you can see the custom message being displayed in Firefox:

Custom messages can be set in a similar manner for text and
other elements, but you will need to check the validity object
states (validity.valueMissing, validity.patternMismatch, …) to
determing the right message. See the link under References for
details.

Браузеры

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

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

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

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

Данный код надо вставить сразу после закрывающего тега </style> в примере 1. Таким образом мы получим классический вид чекбоксов в IE7-8 и меняющуюся картинку в современных браузерах.

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);}

Используйте стандартные визуальные представления

Чекбокс должен выглядеть как небольшой квадратик, в котором (если его выбирают) появляется небольшая галочка или крестик.

Элемент “чекбокс” в активном и неактивном состоянии. Источник изображения: Material Design

Переключатель должен выглядеть, как тумблер включения/выключения.

Элемент “переключатель” в активном и неактивном состоянии. Источник изображения: Material Design

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

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

Методы компонента CheckBox

	Имя метода	Краткое описание
	BringToFront	Метод BringToFront располагает компонент на передний план.
	ClientToScreen	Метод ClientToScreen преобразовывает координаты точки, указанные относительно системы координат компонента, в экранные координаты.
	DoDragDrop	Метод DoDragDrop позволяет начать операцию перетаскивания.
	GetImage	Метод GetImage возвращает изображение компонента со всеми дочерними компонентами.
	ScreenToClient	Метод ScreenToClient преобразовывает экранные координаты точки в координаты, указываемые относительно системы координат компонента.
	SendToBack	Метод SendToBack располагает компонент на задний план.
	SetFocus	Метод SetFocus устанавливает фокус на данный компонент.

Handling checkbox data

Checkboxes are a little unwieldy from a data standpoint. Part of this is that there are essentially two different ways to think about their functionality. Frequently, a set of checkboxes represents a single question which the user can answer by selecting any number of possible answers. They are, importantly, not exclusive of each other. (If you want the user to only be able to pick a single option, use radio boxes or the element.)

Check all the languages you have proficiency in.

HTML CSS JS PHP Ruby INTERCAL

The natural way to represent this in you application code (server-side or front-end) is with an array.

However, that isn’t how the browser will send the data. Rather, the browser treats a checkbox as if it is always being used the other way, as a boolean truth value.

I agree to all terms and conditions.

Unlike with radio buttons, a set of checkboxes are not logically tied together in the code. So from HTML’s point of view, each checkbox in a set of checkboxes is essentially on its own. This works perfectly for single-choice boolean value checkboxes, but it presents a little hiccup for arrays of choices. There are two ways to deal with it. You can either give all the checkboxes the same attribute, or you can give each one a different .

If you use the same for all, your request string will look like this: If you use different names, it looks like this: The first one seems a bit preferable, but what happens when you get to PHP and try to get the values?

In PHP, you can make sure that the various identically-named checkboxes are combined into an array on the server by appending a set of square brackets () after the name.

See this PHP forms tutorialfor more information. This array-making syntax is actually a feature of PHP, and not HTML. If you are using a different server side, you may have to do things a little differently. (Thankfully, if you are using something like Rails or Django, you probably will use some form builder classes and not have to worry about the markup as much.)

JavaScript

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

HTML checkbox Checked/Unchecked

As you know HTML check box have 2 state, checked and Unchecked. It’s a simply have True or False for it. It required to know the state of HTML checkbox unchecked or checked. Let’s see the example of it how you can get the validate checkbox.

You have to use a HTML CheckBox onclick attribute for that. Don’t forget to add unique id to every element.

You will <script> tag with some function. This is a JavaScript, we will learn about in a diffrent tutorial.

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<h2>Check Box</h3>

<input type=»checkbox» id=»tc» value=»tc» onclick=»myFunction()»> Agree with Terms and Conditions </input>
<p id=»text» style=»display:none»>Checkbox is CHECKED!</p>

<script>
function myFunction() {
var checkBox = document.getElementById(«tc»);
var text = document.getElementById(«text»);
if (checkBox.checked == true){
text.style.display = «block»;
} else {
text.style.display = «none»;
}
}
</script>

</body>
</html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<!DOCTYPE html> <html> <head> <head> <body> <h2>Check Box<h3> <input type=»checkbox»id=»tc»value=»tc»onclick=»myFunction()»>Agree with Terms andConditions<input> <pid=»text»style=»display:none»>CheckboxisCHECKED!<p> <script> functionmyFunction(){ varcheckBox=document.getElementById(«tc»); vartext=document.getElementById(«text»); if(checkBox.checked==true){ text.style.display=»block»; }else{ text.style.display=»none»; } } </script> <body> <html>

Output: A GIF output of upper example

Оформление кнопок на чистом CSS

Чтобы оформить кнопки в соответствии с дизайном сайта, будем использовать только CSS. Спрячем оригинальный квадратик с помощью свойств z-index и opacity, в данном случае квадратики не сдвигаются с экрана, а просто становятся прозрачными (opacity:0).

CSS:

На том же самом месте отображаем кнопки с собственным дизайном.

Тег input может находится перед тегом label, тогда используем первый пример стилизации кнопок:

Если input — внутри тега label, тогда текст чекбокса помещаем в div с классом «text». Стили передаем с input:checked на div с классом «text» во втором примере:

HTML:

Таким образом, в зависимости от ситуации, всегда можно выбрать подходящий вариант расположения input и label. Если по какой-то причине не подходит вариант, когда input расположен перед label, можно расположить input внутрь тега label.

Стилизовать checkbox html можно также и с помощью скриптов (javascript, jQuery), современные браузеры прекрасно с ними справляются. Но если пользователь заходит на сайт со старого браузера, то предпочтение все же стоит отдать CSS.

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

Summary

Checkboxes allow you to setup selectable options for your users — either to toggle a single setting on or off, or to allow for multiple choices, like in the Favorite Pet example. You should use labels to tie your checkbox and the descriptive text together, to allow the user to click a larger area when manipulating the checkbox — this is also good for assisting technologies like screen readers for visually impaired.

This article has been fully translated into the following languages:

• German

• Portuguese

• Russian

• Thai

Is your preferred language not on the list? Click here to help us translate this article into your language!

Одиночный чекбокс

Создадим простую форму с одним чекбоксом:

<form action="checkbox-form.php" method="post">
    Do you need wheelchair access?
    <input type="checkbox" name="formWheelchair" value="Yes" />
    <input type="submit" name="formSubmit" value="Submit" />
</form>

В PHP скрипте (checkbox-form.php) мы можем получить выбранный вариант из массива $_POST. Если $_POST имеет значение «Yes«, то флажок для варианта установлен. Если флажок не был установлен, $_POST не будет задан.

Вот пример обработки формы в PHP:

<?php

if(isset($_POST) && 
   $_POST == 'Yes') 
{
    echo "Need wheelchair access.";
}
else
{
    echo "Do not Need wheelchair access.";
}

?>

Для $_POST было установлено значение “Yes”, так как это значение задано в атрибуте чекбокса value:

<input type="checkbox" name="formWheelchair" value="Yes" />

Вместо “Yes” вы можете установить значение «1» или «on«. Убедитесь, что код проверки в скрипте PHP также обновлен.

Группа че-боксов

Иногда нужно вывести в форме группу связанных PHP input type checkbox. Преимущество группы чекбоксов заключается в том, что пользователь может выбрать несколько вариантов. В отличие от радиокнопки, где из группы может быть выбран только один вариант.

Возьмем приведенный выше пример и на его основе предоставим пользователю список зданий:

<form action="checkbox-form.php" method="post">

Which buildings do you want access to?<br />
<input type="checkbox" name="formDoor[]" value="A" />Acorn Building<br />
<input type="checkbox" name="formDoor[]" value="B" />Brown Hall<br />
<input type="checkbox" name="formDoor[]" value="C" />Carnegie Complex<br />
<input type="checkbox" name="formDoor[]" value="D" />Drake Commons<br />
<input type="checkbox" name="formDoor[]" value="E" />Elliot House

<input type="submit" name="formSubmit" value="Submit" />

</form>

Обратите внимание, что input type checkbox имеют одно и то же имя (formDoor[]). И что каждое имя оканчивается на []

Используя одно имя, мы указываем на то, что чекбоксы связаны. С помощью [] мы указываем, что выбранные значения будут доступны для PHP скрипта в виде массива. То есть, $_POST возвращает не одну строку, как в приведенном выше примере; вместо этого возвращается массив, состоящий из всех значений чекбоксов, которые были выбраны.

Например, если я выбрал все варианты, $_POST будет представлять собой массив, состоящий из: {A, B, C, D, E}. Ниже приводится пример, как вывести значение массива:

<?php
  $aDoor = $_POST;
  if(empty($aDoor)) 
  {
    echo("Вы не выбрали ни одного здания.");
  } 
  else
  {
    $N = count($aDoor);

    echo("Вы выбрали $N здание(й): ");
    for($i=0; $i < $N; $i++)
    {
      echo($aDoor . " ");
    }
  }
?>

Если ни один из вариантов не выбран, $_POST не будет задан, поэтому для проверки этого случая используйте «пустую» функцию. Если значение задано, то мы перебираем массив через цикл с помощью функции count(), которая возвращает размер массива и выводит здания, которые были выбраны.

Если флажок установлен для варианта «Acorn Building«, то массив будет содержать значение ‘A‘. Аналогично, если выбран «Carnegie Complex«, массив будет содержать C.

Проверка, выбран ли конкретный вариант

Часто требуется проверить, выбран ли какой-либо конкретный вариант из всех доступных элементов в группе HTML input type checkbox. Вот функция, которая осуществляет такую проверку:

function IsChecked($chkname,$value)
    {
        if(!empty($_POST))
        {
            foreach($_POST as $chkval)
            {
                if($chkval == $value)
                {
                    return true;
                }
            }
        }
        return false;
    }

Чтобы использовать ее, просто вызовите IsChecked (имя_чекбокса, значение). Например:

if(IsChecked('formDoor','A'))
{
//сделать что-то ...
}
//или использовать в расчете ...

$price += IsChecked('formDoor','A') ? 10 : 0;
$price += IsChecked('formDoor','B') ? 20 : 0;

Скачать пример кода

Скачать PHP код примера формы с PHP input type checkbox.

Данная публикация является переводом статьи «Handling checkbox in a PHP form processor» , подготовленная редакцией проекта.

Вариант №1 проверки чокнутого checkbox

Нам потребуется тег input с уникальным идентификатором(id) и еще кнопка по которой мы будем нажимать!

<input type=»checkbox» id=»rules»><i>Я согласен с <a href=»ссылка»>Условиями</a></i>
<button id=»submit»>Создать аккаунт</button>

Далее нам понадобится скрипт, который сможет определить, msk kb накат чекбокс или нет:

if (rules.checked) { alert(«Чекбокс нажат -вариант №1»); } else { alert(«Чекбокс не нажат-вариант №1»); }

Теперь нам понадобится onclick, для отслеживания нажатия на кнопку! И соберем весь код вместе:

<input type=»checkbox» id=»rules»><i>Я согласен с <a href=»https://dwweb.ru/page/more/rules.html» target=»_blank»>Условиями</a></i>

<button id=»submit»>Создать аккаунт</button>

<script>

submit.onclick = function(){

if (rules.checked) { alert(«Чекбокс нажат -вариант №1»); } else { alert(«Чекбокс не нажат-вариант №1»); }

}

</script>

Расположение

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

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

Группа из одного чекбокса требует аккуратного обращения при верстке формы.

Один чекбокс сразу с двумя подписями выглядит странно:

Чекбокс без названия выглядит уже недопустимо, к тому же в него сложнее целиться:

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

Такой проблемы нет, если форма верстается в одну колонку:

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

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

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

Working dynamically with a checkbox

Just like any other DOM element, you are able to manipulate a checkbox using JavaScript. In that regard, it could be interesting to check whether a checkbox is checked or not and perhaps add some logic to control how many options a user can select. To show you how this can be done, I have extended a previous example (the «Favorite Pet» selector) to include some JavaScript magic:

Allow me to quickly run through what this code does. We have the same form as before, but we have added an event handler to each of the checkboxes, which causes them to call a JavaScript function (ValidatePetSelection) when the user clicks them. In this function, we get a hold of all the relevant checkboxes using the getElementsByName function and then we loop through them to see if they are checked or not — for each checked item, we add to a number. This number is then checked and if it exceeds two, then we alert the user about the problem (only two pets can be selected) and then we return false. Returning false will prevent the checkbox from being checked.

This was just a simple example of how to work with checkboxes using JavaScript. You can do much more, especially if you use a JavaScript framework like jQuery, which will make it a lot easier to select and manipulate DOM elements.

Принципы функционирования

Работает такой элемент по простейшему принципу: либо утверждение, либо отрицание. Если в поле отмечена галочка, то веб-браузер отправляет переменную, которая отправит имя поля на сервер для обработки, если же галочка не отмечена, то сервер ничего не получает. У элемента есть необязательный атрибут со значением value, но он является необязательным.

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

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

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

При проектировании переключателей постарайтесь избежать путаницы с текущим состоянием. Для примера возьмем переключатель из iOS 6 и рассмотрим состояние ON с голубой заливкой.

Не сразу понятно: надпись ON — это текущее состояние или действие?

Как понять, переключатель сейчас в состоянии ON или его нужно передвинуть, чтобы перевести на ON? “ON” — это состояние (прилагательное) или действие (глагол)? Не ясно.

Не нужно путать пользователей: очень важно разграничить действие и состояние. А за счет подсветки текущего состояния дизайн можно сделать еще удобнее:. Цвет текста показывает текущее состояние (подсвечивается — значит включено)

Цвет текста показывает текущее состояние (подсвечивается — значит включено)

Заключение

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

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

А у вас на сайте пользователям удобно взаимодействовать с чекбоксами? → Узнайте у наших экспертов прямо сейчас.

Список литературы

1. Закона Фиттса
2. Немов Р. С. Психология. – 4-е изд. – М.: ВЛАДОС, 2003. – Кн. 1. Общие основы психологии.