У цій статті ми розповімо про input type checkbox HTML , і про те, як вони обробляються в PHP .
Поодинокий чекбокс
Створимо просту форму з одним чекбоксом:
У PHP скрипті ( checkbox-form.php) ми можемо отримати вибраний варіант із масиву $_POST . Якщо $_POST[‘formWheelchair’] має значення « Yes«, то прапорець для варіанта встановлено. Якщо прапорець не встановлено, $_POST[‘formWheelchair’] не буде заданий.
Ось приклад обробки форми в PHP:
Для $_POST[‘formSubmit’] було встановлено значення “ Yes”, оскільки це значення задано в атрибуті чекбоксу value :
Замість “ Yes” ви можете встановити значення « 1 » або « on“. Переконайтеся, що код перевірки у скрипті PHP також оновлено.
Група че-боксів
Іноді потрібно вивести у формі групу пов'язаних PHP input type checkbox. Перевага групи чекбоксів у тому, що користувач може вибрати кілька варіантів. На відміну від радіокнопки, де із групи може бути обраний лише один варіант.
Візьмемо наведений вище приклад і на його основі надамо користувачеві список будівель:
Зверніть увагу, що 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, або "чекбокс" задається тегом input, у якого зазначено тип checkbox.
Галочка позначає або згоду, або незгоду. Якщо галочка встановлена, браузер здійснює відправку змінної з ім'ям поля на сервер. Якщо вона відсутня, то, відповідно, браузер нічого не відправляє. Тому атрибут valueне можна віднести до обов'язкових.
Якщо є необхідність у тому, щоб галочка була присутня за умовчанням, необхідно додати до тега атрибут checked. Виглядати це буде ось так:
А так чекбокс виглядає у браузері:
Наявність чекбоксу не означає, що має здійснюватися вибір якогось одного елемента із присутніх. У зв'язку з цим, якщо в одній формі є кілька чекбоксів, то їм слід задавати різні імена.
Код для форми, наведеної на початку статті, буде наступним:
Що стосується назви, то в професійному середовищіполе називають "чекбоксом".
Для того, щоб оформити чекбокси та радіокнопки, як того вимагає дизайн, сьогодні не обов'язково використовувати JavaScript-рішення (типу мого плагіна), т.к. для цього можна задіяти лише CSS, причому зі зворотною сумісністю для старих браузерів (тобто не на шкоду юзабіліті), які не підтримують сучасні CSS-правила.
Іншими словами - в сучасних браузерахчекбокси та радіокнопки будуть виглядати красиво, відповідно до задуманого дизайну, а у старих (це відноситься до Internet Explorer версії 8 і нижче) вони залишаться з оформленням "за умовчанням", характерним для кожної конкретної операційної системи.
Крім того, зберігається можливість HTML5-валідаціїелементів, що стилізуються (чого може не бути при використанні JavaScript-плагінів). У сучасних браузерах її підтримка вже давно норма.
Важливі особливості
Щоб усе вийшло, важливо враховувати таке:
- Крім самого тега елемента, який ми хочемо красиво оформити ( або ), знадобиться тег
- Тег має бути до тега
"Фокус" полягає у використанні псевдоселекторів: checked і: not. При цьому сам чекбокс або радіокнопка робляться невидимими, а їх емуляція здійснюється за допомогою псевдоелементів: before та after для тега
Стилізація для сучасних браузерів
Розглянемо обидва варіанти розташування стилізованого елемента форми. Який з них найзручніший — вирішувати вам. Суть від цього не змінюється.
Теги чекбоксу та радіокнопки знаходяться перед тегом
У HTML-кодіце виглядає так:
Ще раз хочу загострити вашу увагу - тег обов'язковомає бути розташований передтегом
CSS-код для чекбоксубуде таким:
Checkbox ( position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 20px; ) .checkbox + label ( position: relative; padding: 0 0 0 60px; cursor: pointer; ) .checkbox + label :before ( content: ""; position: absolute; top: -4px; left: 0; width: 50px; height: 26px; border-radius: 13px; background: #CDD1DA; box-shadow: inset 0 2px 3px rgba( 0,0,0,.2); transition: .2s; ) .checkbox + label:after ( content: ""; position: absolute; -radius: 10px; background: #FFF; box-shadow: 0 2px rgba(0,0,0,.3); .checkbox:checked + label:after ( left: 26px; ) .checkbox:focus + label:before ( box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255,25) ,0,.7);
CSS-код для радіокнопкибуде таким:
Radio ( position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 7px; ) .radio + label ( position: relative; padding: 0 0 0 35px; cursor: pointer; ) .radio + label :before ( content: ""; position: absolute; top: -3px; left: 0; width: 22px; height: 22px; border: 1px solid #CDD1DA; border-radius: 50%; background: #FFF; ) . radio + label:after ( content: ""; position: absolute; top: 1px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: #9FD468; box-shadow: inset 0 1px 1px rgba(0,0,0,.5); opacity: 0; transition: .2s; ). 0 0 0 3px rgba(255,255,0,.7);
За допомогою властивостей position , z-index і opacity для класів. А за допомогою margin трохи зміщуємо їх, щоб повідомлення валідації HTML5 виглядало гармонійно. Залежно від дизайну чекбоксу та радіокнопки цей відступ можна підігнати.
Теги чекбоксу та радіокнопки знаходяться всередині тега
HTML-коду цьому випадку буде наступним:
За аналогією з попереднім варіантом - тег обов'язковомає бути розташований передтегами з класом.checkbox__text і.radio__text.
CSS-код для чекбоксубуде таким:
Checkbox input ( position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 20px; ) .checkbox__text ( position: relative; padding: 0 0 0 60px; cursor: pointer; ) .checkbox__text:before content: ""; position: absolute; -4px; width: 50px; ,0,.2); transition: .2s; ) .checkbox__text:after ( content: ""; position: absolute; top: -2px; left: 2px; width: 22px; border-radius: 10px; background: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: .2s; :checked + .checkbox__text:after ( left: 26px; ) .checkbox input:focus + .checkbox__text:before ( box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px r 255,255,0,.7);
CSS-код для радіокнопкибуде таким:
Radio input ( position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 7px; ) .radio__text ( position: relative; padding: 0 0 0 35px; cursor: pointer; ) .radio__text:before ( content: ""; position: absolute; -3px; width: 22px; ( content: ""; position: absolute; top: 1px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: #9FD468; box-shadow: inset 0 1px 1px rgba(0, 0,0,.5); opacity: 0; transition: .2s; ). 0 0 3px rgba(255,255,0,.7);
Стилі тут ті самі, що й у попередньому способі, тільки вони застосовуються для інших селекторів.
Стилізація з урахуванням старих браузерів
CSS-код для чекбоксу. У коментарях до коду я додав пояснення щодо браузерів:
/* Спочатку позначаємо стилі для IE8 і старіших версій тобто. тут ми трохи покращуємо стандартний чекбокс. */ .checkbox ( vertical-align: top; width: 17px; height: 17px; margin: 0 3px 0 0; ) /* Це для всіх браузерів, крім зовсім старих, які не підтримують селектори з плюсом. Показуємо, що label клікабельний. */ .checkbox + label (cursor: pointer; ) /* Далі йде оформлення чекбоксу в сучасних браузерах, а також IE9 і вище. Завдяки тому, що старі браузери не підтримують селектори: not і: checked, у них все нижченаведені стилі не спрацюють. В даному випадку checked вказується без двокрапки попереду, чомусь це спрацьовує саме так. * / .checkbox:not(checked) ( position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 20px; ) 0 0 60px; ) .checkbox:not(checked) + label:before ( content: ""; position: absolute; top: -4px; left: 0; : #CDD1DA; box-shadow: inset 0 2px 3px rgba(0,0,0,.2); transition: .2s; ; top: -2px; left: width: 22px; .2s; ) .checkbox:checked + label:before ( background: #9FD468; ) .checkbox:checked + label:after ( left: 26px; ) .checkbox:focus + label:before ( box-shadow: inset 0 2px 3 rgba(0,0,0,.2), 0 0 0 3px rgba(255,255,0,.7);
CSS-код для радіокнопки:
Radio ( vertical-align: top; width: 17px; height: 17px; margin: 0 3px 0 0; ) .radio + label ( cursor: pointer; ) .radio:not(checked) ( position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0px; ). : ""; position: top: -3px; width: 22px; checked) + label:after ( content: ""; position: absolute; top: 1px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: #9FD468; box-shadow: inset 0 1px 1px rgba(0,0,0,.5); opacity: 0; transition: .2s; : 0 0 0 3px rgba(255,255,0,.7);
Приклади
Ось таким нескладним чином це робиться. Завдяки даним способом, оформити чекбокси та радіокнопки з допомогою CSSможна так, як вам завгодно.
Здрастуйте, шановні читачі сайту сайт. Наступний елемент, який сьогодні ми встигнемо розібрати радіокнопки та чекбокси в html. Зазвичай вони використовуються з метою завдання питання всередині форми (про створення форм ми говорили) і, через них ми можемо запропонувати людині варіанти відповіді. При цьому він може вибрати лише один із цих варіантів.
Кнопки радіо - тип radio
Давайте приступимо до реалізації радіокнопок. Перейдемо в код та для радіокнопок виділимо окремий абзац. У ньому створимо нашу радіокнопку. Кнопка створюється за допомогою тега input.
Тип вкажемо radio. Задамо кнопці ім'я та вкажемо значення, тобто. яке значення буде надіслано оброблювачу, якщо ця кнопка буде активна. Для цієї кнопки ми вкажемо значення « yes», т.к. ця кнопка буде відповідати за позитивну відповідь.
Давайте додамо мітку labelз відповіддю « Так» для того, щоб людина клікнула по мітці, і кнопка активувалася автоматично.
Тепер створимо їй протилежну кнопку з відповіддю. Ні». Для цього скопіюємо labelі вставимо після першого label. Поміняємо "Так" на "Ні" і змінюємо значення "yes" на "no". Зверніть увагу, що ім'я ми повинні залишити те саме. Це скаже браузеру про те, що ці радіокнопки належать до єдиної групи і вони взаємовиключні один одного. Тобто якщо активувати одну кнопку, то інша деактивується. Якщо імена кнопкам дати різні, можна одночасно активувати обидві кнопки.
Ось таким чином можна передавати обробнику значення = вибір тієї чи іншої відповіді.
Давайте додамо саме питання після відкриття абзацу. Запитаємо людину, чи любить вона економити час?
Чи любите Ви заощаджувати час?
І ще один момент, який може вам стати в нагоді - це автоматична активаціякнопок спочатку. Для цього є особливий атрибут, який можна додати до потрібної кнопки. Ця кнопка буде активована спочатку. Атрибут називається checked- Можна перекласти як зазначений. Цьому атрибуту не потрібно вказувати жодного значення.
Чи любите Ви заощаджувати час?
А ось і кінцевий результат.
Чекбокси - тип checkbox
Альтернативою радіокнопкам у HTML є чекбокси, Тільки в цьому випадку можна виділяти кілька елементів. Давайте для прикладу створимо новий абзаці запитаємо, які інструменти для економії часу ви любите користуватися?
Після питання вкажемо новий абзац для створення цих самих чекбоксів. Перший чекбокс буде для щоденника.
Якщо перевірити наш код у браузері, то виглядатиме це так:
Тепер так само створимо ще два чекбокси: хронометраж і свої напрацювання.
Якими інструментами для економії часу Ви користуєтесь?
Обов'язково кожен чекбокс називайте своїм унікальним ім'ям.
Якщо зберегти файл і перевірити, можна побачити таке.
Завдяки CSS3 ми можемо досягти практично будь-якого потрібного нам на екрані ефекту. У цьому уроці розглянемо, як можемо стилізувати чекбокси і радіо кнопки.
Input:checked + label:before ( content: "\2022"; color: #f3f3f3; font-size: 30px;
Тепер, коли ми натиснемо на радіо кнопку, в основному сірому колі має з'явитися маленький білий гурток.
Стилізуємо чекбокси
Тепер давайте займемося оформленням чекбоксів. Для початку знову сховаємо елемент:
Input ( display: none; )
Оскільки ми прибираємо стандартне відображення чекбоксу за допомогою псевдо-елемента: before, просто додамо рамку:
Checkbox label:before ( border-radius: 3px; )
Потім додамо символ "галочка", який з'явиться при натисканні на чекбокс. Зробимо це за аналогією з радіоколом. На цей раз нам знадобиться перетворити HTML символ? ✓.
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;
В результаті, ось що у нас має вийти:
Підсумки
У цьому уроці ми розглянули спосіб, який ви можете використовувати для відображення радіо кнопок і чекбоксів. Оскільки ми використовували CSS3, то ця техніка працюватиме лише у браузерах, які підтримують цю технологію. Для того, щоб досягти подібних результатів у більш старих браузерах, можете скористатися відповідним