Як зробити обов'язковим поле checkbox. Як зробити в css оформлення checkbox-ів. Перевірка, чи вибрано конкретний варіант

💖 Подобається?Поділися з друзями посиланням

Це керівництво познайомить вас з прапорцями (checkbox) HTML і навчить поводитися з ними в PHP.

Форма з одного прапорця

Давайте створимо просту форму з одним прапорцем (checkbox).

Вам потрібний доступ в інтернет?

У PHP скрипті (файл checkbox-form.php) можна прочитати значення поля за допомогою масиву $_POST. Якщо $_POST["formWheelchair"] присвоєно значення YES, то прапорець був обраний. Якщо прапорець не вибраний, змінну $_POST["formWheelchair"] не встановлено.

Ось приклад обробки форми на PHP:

Змінною $_POST["formWheelchair"] присвоєно значення YES, оскільки значення атрибуту value тега input дорівнює YES .

Атрибуту value замість YES можна встановити 1. Не забудьте ваш оновити ваш PHP код відповідно до встановлених значень.

Група прапорців

Нерідко виникають ситуації, коли у форму необхідно вставити кілька прапорців. Особливо в тому випадку, коли користувачеві необхідно надати право вибору кількох варіантів. Це важливо, тому що, наприклад, перемикач (radio) можна вибрати лише один.

Давайте складемо форму, яка надасть користувачеві кілька варіантів вибору.

Виберіть будівлі, які потрібно відвідати.
Acorn Building
Brown Hall
Carnegie Complex
Drake Commons
Elliot House

Будь ласка, позначте, що всі прапорці мають одне ім'я (formDoor). Одне ім'я свідчить, що це прапорці пов'язані між собою. Квадратні дужкивказують на те, що всі значення будуть доступні з одного масиву. Тобто $_POST["formDoor"] не поверне рядок, як у прикладі вище, замість нього повернеться масив, що містить значення прапорців, які були обрані користувачем.

Наприклад, якщо я позначу всі прапорці, $_POST["formDoor"] поверне масив із (A,B,C,D,E) . У прикладі нижче ми отримуємо та відображаємо всі значення масиву.

Функція empty стане в нагоді на той випадок, якщо користувач нічого не вибрав. Якщо масив не порожній, підраховуємо кількість вибраних прапорців за допомогою функції count і виводимо всі значення за допомогою циклу for.

Якщо вибрано прапорець "Acorn Building", масив міститиме значення "A".

Перевіряємо, чи вибрано конкретний прапорець

Часто потрібно перевірити: чи вибрано конкретний прапорець. Для цього можна використати таку функцію:

Function IsChecked($chkname,$value) ( ​​if(!empty($_POST[$chkname]))) ( foreach($_POST[$chkname] as $chkval) ( if($chkval == $value) ( ​​return true; ) ) ) return false; )

Тепер досить просто викликати функцію IsChecked (chkboxname, значення). Наприклад:

If(IsChecked("formDoor","A")) ( //do ... )

Галочка у формі HTML, або "чекбокс" задається тегом input, у якого зазначено тип checkbox.

Галочка позначає або згоду, або незгоду. Якщо галочка встановлена, браузер здійснює відправку змінної з ім'ям поля на сервер. Якщо вона відсутня, то, відповідно, браузер нічого не відправляє. Тому атрибут valueне можна віднести до обов'язкових.

Якщо є необхідність у тому, щоб галочка була присутня за умовчанням, необхідно додати до тега атрибут checked. Виглядати це буде ось так:

А так чекбокс виглядає у браузері:

Наявність чекбоксу не означає, що має здійснюватися вибір якогось одного елемента із присутніх. У зв'язку з цим, якщо в одній формі є кілька чекбоксів, то їм слід задавати різні імена.

Код для форми, наведеної на початку статті, буде наступним:



Щодо назви, то у професійному середовищі поле називають "чекбоксом".

У цій статті ми розповімо про input type checkbox HTML , і про те, як вони обробляються в PHP .

Поодинокий чекбокс

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

Do you need wheelchair access?

У PHP скрипті ( checkbox-form.php) ми можемо отримати вибраний варіант із масиву $_POST . Якщо $_POST[‘formWheelchair’] має значення « Yes«, то прапорець для варіанта встановлено. Якщо прапорець не встановлено, $_POST[‘formWheelchair’] не буде заданий.

Ось приклад обробки форми в PHP:

Для $_POST[‘formSubmit’] було встановлено значення “ Yes”, оскільки це значення задано в атрибуті чекбоксу value :

Замість “ Yes” ви можете встановити значення « 1 » або « on«. Переконайтеся, що код перевірки у скрипті PHP також оновлено.

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

Іноді потрібно вивести у формі групу пов'язаних PHP input type checkbox. Перевага групи чекбоксів у тому, що користувач може вибрати кілька варіантів. На відміну від радіокнопки, де із групи може бути обраний лише один варіант.

Візьмемо наведений вище приклад і на його основі надамо користувачеві список будівель:

Which buildings do you want access to?
Acorn Building
Brown Hall
Carnegie Complex
Drake Commons
Elliot House

Зверніть увагу, що input type checkbox мають те саме ім'я (formDoor ). І що кожне ім'я закінчується на . Використовуючи одне ім'я, ми вказуємо на те, що чекбокси пов'язані. За допомогою ми вказуємо, що вибрані значення будуть доступними для PHP скрипта у вигляді масиву. Тобто, $_POST['formDoor'] повертає не один рядок, як у наведеному вище прикладі; натомість повертається масив, що складається з усіх значень чекбоксів, які були обрані.

Наприклад, якщо я вибрав усі варіанти, $_POST['formDoor'] буде масивом, що складається з: (A, B, C, D, E). Нижче наводиться приклад, як вивести значення масиву:

Якщо жодного з варіантів не вибрано, $_POST[‘formDoor’] не буде заданий, тому для перевірки цього випадку використовуйте «порожню» функцію. Якщо значення задано, ми перебираємо масив через цикл з допомогою функції count() , яка повертає розмір масиву і виводить будівлі, обраних.

Якщо прапорець встановлений для варіанта « Acorn Building«, то масив міститиме значення 'A'. Аналогічно, якщо обрано Carnegie Complexмасив буде містити C .

Перевірка, чи вибрано конкретний варіант

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

function IsChecked($chkname,$value) ( ​​if(!empty($_POST[$chkname]))) ( foreach($_POST[$chkname] 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 PHP form processor» , підготовленою дружною командою проекту

Усі розробники сайтів, веб-додатків та десктопних програм знають, що таке чекбокси. Але ті люди, які далекі від програмування, зустрічаючи таке незрозуміле іноземне слово, не розуміють, про що йдеться. Насправді, все дуже просто. Чекбокси - це одні з найпростіших елементів керування під час створення форм.

Звичайна галочка

Усі люди зустрічалися у житті з такими символами, як галочка, починаючи ще зі шкільної лави. Під час проведення тестування слід відзначати правильний варіант цим знаком. Потім під час заповнення різних анкет. Ну а зараз, коли користувачі роблять через Інтернет безліч дій, без галочок взагалі нікуди. Навіть найпростіша реєстрація на якомусь сайті вимагає відзначити деякі пункти (захоплення, навички).

Також зараз розвинена інтернет-торгівля. При створенні замовлення користувач відзначає пункти, що його цікавлять. А ще часто при встановленні комп'ютерної грипропонується вибрати додаткове програмне забезпечення. І тут також потрібно зробити вибір. Так ось, чекбокси - це ті галочки, які використовуються на веб-сторінках.

У створенні сайтів

Розробники сайтів бачать цей елемент дещо ширше. Адже створити складніше, ніж просто раз клікнути мишкою на квадратику і поставити галочку. Сайти розробляються за допомогою гіпертекстової мови розмітки, яку в професійному середовищі називають лише чотирма літерами - HTML. І щоб у ньому створити галочку, потрібно написати певний код.

Які ж створюються чекбокси? HTML має спеціалізований елемент (тег), який є полем, наділеним типом чекбокс, який пишеться наступним чином: .

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

Працює такий елемент за найпростішим принципом: або затвердження, або заперечення. Якщо в полі позначено галочку, то веб-браузер відправляє змінну, яка відправить ім'я поля на сервер для обробки, якщо галочка не позначена, то сервер нічого не отримує. Елемент має необов'язковий атрибут зі значенням value, але він є необов'язковим.

Іноді буває так, що на сторінці деякі галочки вже стоять позначеними. Для цього розробники додають до тега спеціальний атрибут, який вказує на вже поставлену за промовчанням галочку. Це атрибут checked, тобто відзначено.

Чекбокси - це такі елементи, які мають на увазі не одиничний вибір із кількох варіантів, а відмітку всіх відповідних. Для розробника це має значення, тому що якщо одна форма містить кілька чекбоксів, їх імена мають бути відмінними один від одного.

Залежні чекбокси

У випадку, коли потрібно вибирати лише один варіант із множини, використовуються інші елементи - радіокнопки, а не прапорці. Але іноді застосовується такий тип, як залежні чекбокси. HTML разом із мовою програмування JavaScript дозволяє зробити один головний прапорець, від якого залежать інші. При натисканні на нього можуть бути відмічені кілька чекбоксів. Таке використовується рідко, оскільки це дещо суперечить самому правилу позначки галочок.

Як і всі теги HTML, чекбокси - це такі елементи, які мають свої ознаки. Якими вони є? Вище вже було згадано атрибут для попередньої позначки прапорця - checked. Так як в одній формі у чекбоксів мають бути різні імена, потрібний атрибут name. Він якраз ідентифікує кожен окремий прапорець. Для того, щоб задати значення, яке відправлятиметься на сервер, використовують атрибут value.

Варто зазначити, що чекбокси – це графічні елементи управління, які використовуються переважно у формах. І працюють вони у трьох режимах: не обраний, обраний та невизначений.

Застосування у таблицях

Чекбокс застосовується не тільки в HTML при розробці сайтів та веб-застосунків. Таке програмне забезпечення, як 1С, також використовує цей елемент. Адже на підприємстві є безліч різних складових, і при роботі з документацією все це необхідно відзначати. Наприклад, з допомогою чекбокса можна назвати перелік складських запасів чи клієнтів, яким необхідно відправити товар.

У яких ще програмах застосовується цей елемент? Excel - всі знають цю програму для складання таблиць компанії MicrosoftПринцип роботи прапорця тут такий: якщо галочка відзначена, то елемент повертає справжнє значення, якщо знята - хибне. Щоб вставити чекбокс у документ, потрібно ввімкнути спеціальну вкладку розробника. Робиться це через параметри, які в кожній версії Excelтрохи відрізняються.

Як знайти потрібні налаштування? Завжди є довідка або Пошукова система. Після того, як вкладка увімкнена, можна вставляти елемент через команду «Вставити» пункту «Елементи керування». Тут потрібно звернути увагу, що це меню також містить елементи ActiveX, розташовані під необхідними елементами форми. Там також є чекбокси. У чому між ними різниця? Для використання елементів ActiveXпотрібна вбудована мова програмування VBA, яку мало хто знає. А звичайні прапорці можна відразу прив'язати до певного осередку в документі.

Після того, як чекбокси в Excel будуть вставлені, вони за промовчанням стають відзначеними. При натисканні мишею в будь-якому місці документа відмітка знімається. Для зворотного виділення потрібно клацнути на прапорець правою кнопкою мишки, оскільки ліва кнопка знімає або встановлює галочку.

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

Висновок

Отже, як видно з вищесказаного, чекбокси - це не складний елемент графічного інтерфейсу, А те, з чим всі стикаються у повсякденному житті - звичайна галочка. Поняття трохи відрізняється для програміста та рядового користувача, але суть однакова: це елемент управління, який дає можливість зробити множинний вибір при заповненні будь-якої форми. Важливо не переплутати чекбокси з радіокнопками, які дають змогу вибрати лише один пункт із множини.



Розповісти друзям