From 57644521186f179386901f906cf7969c31471494 Mon Sep 17 00:00:00 2001 From: Vitalii Perehonchuk Date: Thu, 23 Jun 2022 22:39:52 +0300 Subject: [PATCH 1/3] translation(HTML): web/html/element/input/checkbox --- .../web/html/element/input/checkbox/index.md | 318 ++++++++++++++++++ uk_spelling_additions.txt | 2 + 2 files changed, 320 insertions(+) create mode 100644 files/uk/web/html/element/input/checkbox/index.md diff --git a/files/uk/web/html/element/input/checkbox/index.md b/files/uk/web/html/element/input/checkbox/index.md new file mode 100644 index 0000000000..b7860b7bde --- /dev/null +++ b/files/uk/web/html/element/input/checkbox/index.md @@ -0,0 +1,318 @@ +--- +title: +slug: Web/HTML/Element/input/checkbox +tags: + - Element + - HTML + - HTML forms + - Input + - Input Types + - Reference + - checkbox + - form +browser-compat: html.elements.input.type_checkbox +--- + +{{HTMLRef}} + +Елементи {{htmlelement("input")}} типу **`checkbox`** (поле для галочки) усталено зображаються як прямокутники, котрі отримують позначку (галочку), схоже до того, що можна побачити в офіційних бланках документів. Конкретний вигляд залежить від налаштувань операційної системи, на котрій працює браузер. Зазвичай це квадрат, але в такого квадрата бувають скруглені кути. Поле для галочки дає змогу обрати (або не обрати) для подання у формі прості значення. + +{{EmbedInteractiveExample("pages/tabbed/input-checkbox.html", "tabbed-standard")}} + +> **Примітка:** [Радіокнопки](/uk/docs/Web/HTML/Element/input/radio) схожі на поля позначок, але мають важливу відмінність: радіокнопки групуються так, щоб лише одна радіокнопка була водночас обрана, натомість поля для галочки дають змогу включати й виключати окремі означення. Коли існують декілька контрольних елементів, радіокнопки дозволяють лише одній з них бути ввімкненою, а поля для галочки дозволяють вибір декількох значень. + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Значення + Рядок, що представляє значення поля для галочки. +
Події{{event("change")}} та {{event("input")}}
Підтримувані загальні атрибутиchecked
Атрибути IDL + checked, + indeterminate і + value +
Інтерфейс DOM

{{domxref("HTMLInputElement")}}

Методи + {{domxref("HTMLInputElement.select", "select()")}} +
+ +## Значення + +Рядкове представлення значення поля галочки. Воно не показується на боці клієнта, але на сервері саме це значення буде передано разом із даними, поданими за `name` поля для галочки. Погляньмо на наступний приклад: + +```html +
+
+ + +
+
+ +
+
+``` + +У цьому прикладі маємо атрибут `name` зі значенням `subscribe`, а також атрибут `value` із `newsletter`. Коли подається форма, то пара ключ-значення із даними буде `subscribe=newsletter`. + +Якщо атрибут `value` опущений, то усталеним значенням поля буде `on`, тож подані дані в такому випадку будуть `subscribe=on`. + +> **Примітка:** Якщо поле для галочки пусте при подачі форми, то жодне значення, що відображає відсутність галочки, не буде подано на сервер (наприклад, `value=unchecked`); значення не подається на сервер узагалі. При потребі подати усталене значення поля для галочки, коли воно пусте, можна включити у форму {{HTMLElement("input/hidden", '<input type="hidden">')}} з такими самими `name` і `value`, згенероване, мабуть, JavaScript. + +## Додаткові атрибути + +На додачу до загальних атрибутів, котрі поділяють всі елементи {{HTMLElement("input")}} , поля "`checkbox`" підтримують наступні. + +- {{htmlattrdef("checked")}} (перевірений) + + - : Булів атрибут, що вказує, чи має поле галочку спочатку (при завантаженні сторінки). Воно _не_ вказує, чи є поле порожнім наразі: якщо стан поля зміниться, цей атрибут вмісту не відобразить змін. (Оновиться лише IDL атрибут {{domxref("HTMLInputElement")}}'а `checked`ʼ.) + > **Примітка:** На відміну від інших полів введення, значення поля для галочки включається у дані подання лише якщо поле `checked`. Якщо воно таким є, то значення атрибута `value` стає значенням поля у формі. + > На відміну від інших браузерів, Firefox усталено [зберігає динамічний стан галочки (англ.)](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) поля між завантаженнями сторінки. Використовуйте для контролю цього функціоналу атрибут {{htmlattrxref("autocomplete","input")}}. + +- {{htmlattrdef("value")}} (значення) + + - : Атрибут `value` поділяють всі {{HTMLElement("input")}}'и; проте у полів типу `checkbox` він має особливе призначення: коли форма подається, то лише ті поля для галочки, котрі на той час мають галочку, подаються на сервер, і відповідним їх значенням є значення атрибута `value`. Якщо атрибут `value` не вказаний, то вважається рівним рядкові `on`. Це показано у розділі [Значення](#znachennia) вище. + +## Використання полів для галочки + +Найбазовіше використання полів для галочки показано вище. Тепер час поглянути на решту необхідних функціоналу та технік, пов‘язаних із галочками. + +### Обробка декількох полів для галочки + +Приклад, представлений вище, містив лише одне поле; в реальних ситуаціях ймовірніше зустріти декілька полів для галочки. Якщо вони цілком непов‘язані, то можна просто обробляти їх окремо, як показано вище. Утім, якщо вони всі пов‘язані між собою, то все не так просто. + +Наприклад, у наступній демонстрації є декілька полів для галочки, щоб дати користувачеві змогу обрати свої інтереси (дивіться повну версію в розділі [Приклади](#pryklady)). + +```html +
+ Оберіть свої інтереси +
+ + +
+
+ + +
+
+``` + +{{EmbedLiveSample('Handling_multiple_checkboxes', 600, 100)}} + +В цьому прикладі, як бачите, кожне поле для галочки отримало однакове значення атрибута `name`. Якщо обидві поля мають галочку при поданні форми, то рядок пар ключ-значення, поданий на сервер, буде схожим на отакий: `interest=coding&interest=music`. Коли цей рядок отримає сервер, треба буде розібрати його не як асоціативний масив, щоб усі значення, а не тільки останнє, за ключем `interest` були враховані. Для прикладу – одна з технік, що використовується на Python: [Обробка декількох полів для галочки з однією серверною змінною (англ.)](https://stackoverflow.com/questions/18745456/handle-multiple-checkboxes-with-a-single-serverside-variable). + +### Усталена галочка в полях + +Щоб додати до поля галочку усталено, йому слід задати атрибут `checked`: + +```html +
+ Оберіть свої інтереси +
+ + +
+
+ + +
+
+``` + +{{EmbedLiveSample('Checking_boxes_by_default', 600, 100)}} + +### Забезпечення полям для галочки більших зон реагування + +У прикладах вище можна помітити, що поле для галочки можна перемкнути, натиснувши на пов‘язаний з ним елемент {{htmlelement("label")}}, як і на саме поле. Це справді корисна особливість позначок форм HTML, що полегшує клацання бажаного варіанту, особливо на пристроях з малими екранами, типу смартфонів. + +Крім доступності, це іще одна добра причина як слід оформлювати елементи `