Handling checkbox data with in html: here’s how
Содержание:
- Using jQuery
- Checked or not checked?
- 1. Prerequisites & Basic Setup
- 2). Получение значения нескольких checkbox
- Кнопки переключения
- Working dynamically with a checkbox
- Good labelling practices
- How To Create a Custom Checkbox
- Additional attributes
- Ещё примеры по кастомизации checkbox и label
- Вариант №1 проверки чокнутого checkbox
- Методы компонента CheckBox
- Handling checkbox data
- All attributes of input
- HTML5 required input
- Советы, как правильно использовать чекбокс
- 1. Не перемудрите и используйте стандартный вид чекбокса
- 2. Правильно располагайте списки чекбоксов
- 3. Используйте в подписях чекбоксов понятные утвердительные формулировки
- 4. Не делайте размер чекбокса слишком маленьким
- 6. Используйте опции «выбрать все» и «убрать все»
- 7. Чекбокс не должен запускать действие мгновенно
Using jQuery
We could have done the same thing using jQuery and in fact, that is what we are going to be doing next . jQuery is the most famous JS library ever created , and a lot of people use it daily as it makes their job a lot easier . You do not need to worry if you do not know jQuery , it’s concepts are very easy and I will be explaining everything as we go along.
I only added jQuery and couple of CSS lines to style our page. I also added the same exact HTML code we used in the previous code , the only difference will be in our javascript code since in this example we will be using jQuery instead of plain javascript.
You may notice that the only thing I changed from the previous example is that I have deleted the onclick event in the checkbox which makes sense , since in jquery we will be attaching the event to the element no need to call it from the HTML code.
Now to the javascript code where all the magic happens :
If this seems overwhelming to you , no need to worry , I will be explaining everything in details. First, I am using the $(document).ready(); that I have told you about and inside it I added an anonymous function.
If you are not familiar with anonymous functions they are functions that are declared in runtime and the reason they are called anonymous is that you create them without giving them a name.
And inside the anonymous function I placed the following code :
First, we are using the dollar sign ‘$’ which is a shorthand for jQuery so this $(‘#fluency’) is the same exact thing as jQuery(‘#fluency’). Then we are attaching to it an on change event and inside it we are using the anonymous function syntax for the second time. The code that is inside the anonymous function will be run each time the event is fired.
This is the same exact if statement we used in the first example with only a very small change , which is instead of getting the checkbox using document.getElementById() we are using the “this” keyword. If you are not familiar with the ‘this’ keyword , here in this example it refers to the target that fired that event which is here the checkbox we want to grab.
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».
1. Prerequisites & Basic Setup
First, go on and create a html file with its basic syntax inside:
<!DOCTYPE html> <html> <head> <title>Checkbox Example</title> </head> <body> <!-- STYLE SECTION --> <style type="text/css"> </style> <!-- HTML SECTION --> </body> </html>
Now HTML5 has a way of creating a default checkbox. The code below would create a slightly basic checkbox:
<!-- HTML SECTION --> <input type="checkbox" name="fruit" value="apple" />Red Apple
where the checkbox is explicitly defined by the . That would look like this:
Basic Checkbox of HTML
If you want to have several items, you are recommended to create them under a under a .
That is because you might probably want to make that functional and submit the data somewhere. Look at the code below:
<!-- HTML SECTION -->
<form method="post"> <!-- wrapping these under a form for later submission -->
<fieldset> <!-- gives your question (including answers) a nice border -->
<legend>What is Your Favorite Pet?</legend> <!-- Your question goes here -->
<input type="checkbox" name="fruit" value="apple" />Red Apple <br />
<input type="checkbox" name="fruit" value="banana" />Ecuador Banana<br />
<input type="checkbox" name="fruit" value="strawberry" />Strawberry<br />
<input type="submit" value="Submit now" />
<!-- submit input type, has the view of a button -->
</fieldset>
</form>
This more complete case would look like this:
A Question with Checkbox Answers
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);}
Кнопки переключения
Создавайте чекбоксы и радиокнопки, используя стили вместо для элементов . При необходимости эти кнопки-переключатели можно сгруппировать в группу кнопок.
Кнопки переключения чекбоксов
Single toggle
Checked
Disabled
Визуально эти кнопки переключения идентичны . Однако вспомогательные технологии передают их по-другому: переключатели чекбоксов будут объявлены программами чтения с экрана как «отмеченные» / «не отмеченные» (поскольку, несмотря на их внешний вид, они по сути остаются чекбоксами), тогда как кнопки переключения плагинов кнопок будут объявляется как «кнопка» / «кнопка нажата». Выбор между этими двумя подходами будет зависеть от типа создаваемого вами переключателя и от того, будет ли этот переключатель иметь смысл для пользователей, когда он объявлен как чекбокс или как фактическая кнопка.
Checked
Radio
Disabled
Radio
Стиль контура (рамки)
Поддерживаются различные варианты , как например, в различных выделенных стилях.
Single toggleCheckedChecked success radio
Danger radio
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.
Good labelling practices
You should always put the after the , and on the same line. There should usually be a space between the and the . You can accomplish this with a little bit of margin, or with simply a typographical space. The should always use attribute, which specifies that it is connected to the by . This is an important usability practice, as it allows the user to check and uncheck the box by clicking the label, not just the (too small) checkbox itself. This is even more critical today than it was in the past because of touchscreens — you want to give the user the easiest possible checkbox experience.
Yes! Do it this way.
No. This needs space between the box and the words.
No. The checkbox should come before the label.
No. The label needs to identify the checkbox.Do you like it this way? (Wrong.)
It’s amazing how much of a difference little details like that make to the way your user experiences and feels about your site. You want to make your users happy to use your forms, or at least not hate them. Proper form styling and usability go a long way to improving the overall satisfaction your users experience. For more information, see our tutorials on form styling and form usability.
Adam Wood
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);}
Additional attributes
In addition to the common attributes shared by all elements, «» inputs support the following attributes:
| Attribute | Description |
|---|---|
| Boolean; if present, the checkbox is toggled on by default | |
| A Boolean which, if present, indicates that the value of the checkbox is indeterminate rather than or | |
| The string to use as the value of the checkbox when submitting the form, if the checkbox is currently toggled on |
A Boolean attribute indicating whether or not this checkbox is checked by default (when the page loads). It does not indicate whether this checkbox is currently checked: if the checkbox’s state is changed, this content attribute does not reflect the change. (Only the ’s IDL attribute is updated.)
Note: Unlike other input controls, a checkbox’s value is only included in the submitted data if the checkbox is currently . If it is, then the value of the checkbox’s attribute is reported as the input’s value.
Unlike other browsers, Firefox by default persists the dynamic checked state of an across page loads. Use the attribute to control this feature.
If the attribute is present on the element defining a checkbox, the checkbox’s value is neither nor , but is instead indeterminate, meaning that its state cannot be determined or stated in pure binary terms. This may happen, for instance, if the state of the checkbox depends on multiple other checkboxes, and those checkboxes have different values.
Essentially, then, the attribute adds a third possible state to the checkbox: «I don’t know.» In this state, the browser may draw the checkbox in grey or with a different mark inside the checkbox. For instance, browsers on macOS may draw the checkbox with a hyphen «-» inside to indicate an unexpected state.
Note: No browser currently supports as an attribute. It must be set via JavaScript. See for details.
The attribute is one which all s share; however, it serves a special purpose for inputs of type : when a form is submitted, only checkboxes which are currently checked are submitted to the server, and the reported value is the value of the attribute. If the is not otherwise specified, it is the string by default. This is demonstrated in the section above.
Ещё примеры по кастомизации 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;
}
Вариант №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>
Методы компонента 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.)
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. |
HTML5 required input
Adding HTML5 validation to the checkbox is actually very simple.
All you need to do is include a required attribute:
This tells the browser that the form should not be allowed to submit
without the checkbox checked. Some, but not all, browsers will
recognise and enforce this:
The advantage of the HTML5 form validation is that it happens before
our JavaScript is called, displays instructions and points the user to
the relevant element.
Here you can see screen captures from Firefox and Chrome:
Text alert messages are generated entirely by the browser and will
even translate automatically into different languages — something that
would be almost impossible using just JavaScript.
The advantage for the user is that it’s obvious whick element is
causing the problem and there’s no alert window that needs to be clicked
away.
At time of writing Safari does not enforce required input
fields. If you’re using Safari or another unsupporting browsers all the
examples will just display the JavaScript alert box.
Советы, как правильно использовать чекбокс
1. Не перемудрите и используйте стандартный вид чекбокса
Традиционно чекбоксы имеют квадратную форму
Пользователи распознают визуальные объекты по форме и стандартная квадратная форма чекбокса – это очень важно. Это связано с тем, что мы воспринимаем то, что ожидаем и ‘эта особенность описана у нас в Золотом правиле №4
Визуальная ясность. То есть пользователь должен легко распознавать элементы управления по их внешнему виду.
Чекбокс должен выглядеть как небольшой квадратик, в котором в случае выбора появляется небольшая галочка. Не стоит делать чекбоксы ромбовидными или круглыми, независимо от того, что скажут вам специалисты по маркетингу или дизайнеры.
✓ Пример понятного чекбокса из интерфейса почты Яндекса
Для того, чтобы пользователю было понятно, какая опция сейчас включена или выбрана, отлично подойдет цветовая индикация. Поставленная галочка — это понятная метафора выбора. Рекомендуем использовать и цвет фона и галочку для отображения выбора.
2. Правильно располагайте списки чекбоксов
Правильно — это значит вертикально, чтобы каждый пункт был в отдельной строке.
Если вы больше любите горизонтальные списки, обратите внимание на расстояния между чекбоксами и их подписями: пользователь должен понимать, к какому чекбоксу какая подпись относится
3. Используйте в подписях чекбоксов понятные утвердительные формулировки
Подписи к чекбоксам должны быть утвердительными и отражать действия, чтобы было понятно, что произойдет при выборе каждой опции. Избегайте отрицательных формулировок, типа “Не присылать мне рассылку” — в этом случае получается, что пользователь должен включить опцию, чтобы действие не происходило. Помните, что пользователи думают о своих целях, а не об инструментах для их исполнения.
✓ Удачный пример формулировки на сайте Ostrovok.ru
✘ Пример отрицательной формулировки в настройках Microsoft Word
4. Не делайте размер чекбокса слишком маленьким
Как известно, чем меньше элемент, тем сложнее пользователю с ним взаимодействовать. Эта проблема очень актуальна для чекбоксов. Как известно по закону Фиттса, в маленький квадрат неудобно ни целится, ни попадать. Есть несколько способов решить эту проблему. Так, можно превратить чекбокс в кнопку, метку или переключатель, сделав кликабельную область более крупной.
✓ Чекбокс маленького размера на сайте Ostrovok.ru, который превратили в кнопку
✓ Чекбокс удобного размера на сайте Аэрофлота
Таким образом пользователю будет легче работать с большей площадью. Кроме того, это более удобно для пользователя, поскольку он привык, что можно нажать на любую часть элемента.
✓ Чекбокс небольшого размера на сайте Аэрофлота, который реагирует на нажатие подписи
6. Используйте опции «выбрать все» и «убрать все»
Чтобы облегчить работу пользователя с большим количеством чекбоксов (более 5), в интерфейсе должны быть предусмотрены опции «Выбрать все чекбоксы» и «Снять все чекбоксы». Представьте, что вам нужно выбрать, скажем, 14 пунктов из 20 в списке. Гораздо удобнее и быстрее будет сначала выбрать все, а потом снять ненужные галочки.
✓ Правильный пример использования опции “выбрать все” торрент-клиента μTorrent
7. Чекбокс не должен запускать действие мгновенно
Важно понимать, что, когда пользователь взаимодействует с чекбоксами, он не ждет мгновенной обратной связи. Действие произойдет тогда, когда пользователь нажмет какую-то кнопку: “сохранить”, “отправить”, “подписаться”
То есть чекбоксы хорошо работают в ситуациях, когда нужно сделать несколько промежуточных шагов, чтобы изменения вступили в силу.
✓ Удачный пример использования чекбокса на сайте Аэрофлота
