Власна форма: від кліку до рядка в CSV

Крок 1

Що робимо сьогодні

Модуль I · IT Skills (Cloud Services & Documents) · тема 2, урок 2 з 2 · 120 хвилин

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

Однокласник відкриє її, відповість на кілька питань і натисне кнопку. А на твоєму диску, у файлі ~/data/responses.csv, з'явиться новий рядок.

Роль сторінки змінилася, і відповідальність теж. Тепер у тебе лежить файл із відповідями живих людей.

На минулому уроці ти спроєктував поля в fields.json. І розібрав, як улаштований CSV усередині. Сьогодні кожне поле з того файлу стане тегом у формі й колонкою в таблиці.

Після уроку ти вмієш

зверстати поле анкети так, щоб підпис до нього не зникав під час набору;
надсилати відповідь, не перезавантажуючи сторінку;
простежити шлях відповіді від натиснутої кнопки до рядка в CSV;
обійти власну перевірку одним запитом з термінала;
викреслити з анкети поле, без якого підсумок не зміниться.

Слова <label>, fetch() і валідація поки нічого не означають — розберемо їх по черзі.

Умова, з якою ти працюєш На сервері вже працює сервіс /api/collect/<логін>. Він приймає POST, звіряє поля з твоїм fields.json — і дописує один рядок у ~/data/responses.csv. До кожного рядка він додає ще дві свої колонки. session_id — випадкова мітка, за якою видно, що це різні люди, а не одна людина двадцять разів. ts — час, коли відповідь надійшла; це скорочення від англійського timestamp, «часова позначка». Ти цей сервіс не пишеш і не запускаєш: твоя частина — форма, яка правильно до нього звертається.

Що ти здаєш і що ніколи не здаєш По FTP їдуть три легкі текстові файли: form/index.html, form/stats.json і оновлений fields.json. responses.csv не завантажується вручну ніколи — його пише сам сервіс у приватну теку ~/data/, яку nginx по HTTP не віддає.

Хід уроку

Етап	Хв	Що робимо
Повторення	10	Звіряємо `fields.json` з трьома дослідницькими питаннями
Теорія: форма і поля	20	`label`, `name` проти `id`, типи `input`
Верстка форми	30	Конструктор → готовий код → `form/index.html`
Перерва	10	—
Шлях даних і `fetch`	15	POST у DevTools, `Content-Type`, `preventDefault()`
Чому валідації мало	10	Учитель шле POST повз форму — рядок з'являється
Карусель відповідей	15	Заповнюємо форми одне одного, 10+ рядків
Підсумки і приватність	10	`stats.json`, аудит `~/www`, `check 04`
Разом	120

Чому тека зветься form, а урок — четвертий Теки практики звуться за темою, а не за номером уроку. Тема 2 — це уроки 3 і 4, і обидва складають роботу в одну теку ~/www/form/. Не шукай lesson-04: її немає.

У всіх прикладах на цій сторінці логін — ivan. Скрізь, де він трапляється, підставляй свій.

Крок 2

Анатомія форми: чотири слова, які треба знати напам'ять

Тег <form>, атрибут name, атрибут id і тег <label>. Плутанина між ними — джерело половини поламаних анкет.

Форма — це конверт. Тег <form> каже, куди надсилати (action) і яким способом (method).

У конверт кладеться не все. Туди потрапляє лише те, що має атрибут name. Поле без name не поїде нікуди — навіть заповнене.

найкоротша робоча форма

<form action="/api/collect/ТВІЙ-ЛОГІН" method="post"> <label for="f_sleep">Скільки годин ти спав минулої ночі</label> <input id="f_sleep" name="sleep_hours" type="number" min="0" max="14" required> <button type="submit">Надіслати</button> </form>

`name` проти `id`: два різні світи

Ці атрибути схожі й часто збігаються за значенням. Тому їх і плутають. Але живуть вони в різних місцях і потрібні різним читачам.

	`name`	`id`
Хто читає	сервер	браузер: CSS, JS, `<label for>`
Куди потрапляє	у тіло запиту, далі — колонка в `responses.csv`	нікуди не їде, лишається на сторінці
Має бути унікальним	ні: у радіогрупі `name` навмисно спільний	так, на всю сторінку — інакше `label` знайде не те поле
Якщо забути	поле мовчки зникає з даних	клік по підпису перестає працювати
Правила запису	лише латиниця, цифри, `_` — це заголовок CSV	те саме, зазвичай із префіксом `f_`

Пастка з минулого уроку name="Скільки годин" здається зручним, але саме цей рядок стане заголовком колонки в CSV. Пробіл усередині і кирилиця перетворюють заголовок на мінне поле: одні програми його прочитають, інші — ні. Пиши sleep_hours, а людський підпис клади в <label>.

Чому `<label>` обов'язковий, а не «бажаний»

Підпис поля — не декорація. Він виконує три роботи одночасно, і жодну з них placeholder виконати не може.

Перша робота — для тих, хто сторінки не бачить. Незрячі користувачі ходять по сайтах із програмою, яка читає вміст екрана вголос. Таку програму звуть скрінрідером, від англійського screen reader.

Доступність. Скрінрідер озвучує поле саме за пов'язаним <label>. Без нього людина чує «поле вводу» — і все.
Клік по підпису. Пов'язаний підпис збільшує зону влучання. Для radio і checkbox на телефоні це різниця між «поставив галочку» і «промазав утретє».
Підпис не зникає. Питання видно й тоді, коли поле вже заповнене — а користувач перечитує відповідь перед надсиланням.

Зв'язок робиться однією парою: <label for="f_sleep"> ↔ <input id="f_sleep">. Ці значення мають збігтися символ у символ.

Схема 1. Один тег <input> і п'ять його атрибутів. Зелений блок — єдиний, без якого поле не існує для сервера.

`placeholder` — це приклад, а не назва

placeholder="7" у полі про сон — це добре. Він показує, у якому вигляді чекають відповідь.

А от placeholder="Скільки годин ти спав" замість підпису — погано. По-перше, текст зникне з першим натиснутим символом. По-друге, у частині браузерів його не озвучує скрінрідер.

По-третє, підказку в полі малюють блідо-сірим. А наскільки текст відрізняється від тла, міряють числом. Беруть яскравість літер, яскравість фону — і ділять одну на одну.

Правила доступності вимагають, щоб для звичайного тексту вийшло щонайменше 4,5:1. Тобто літери мають бути яскравіші за тло у чотири з половиною раза. Бліде сіре на білому цю межу зазвичай не проходить.

Питання 1

Ти зробив поле лише з placeholder="Скільки годин ти спав", без <label>. Однокласник зі скрінрідером не зрозумів, що вводити, а сусід почав вводити й забув питання. Що виправляти?

Питання 2

У responses.csv з'явилася колонка з правильним заголовком, але в усіх 12 рядках вона порожня. Поле в розмітці є, у браузері воно заповнюється. Що не так?

Крок 3

Один тег, вісім типів полів

Тип поля — це домовленість із трьома сторонами одразу: з людиною (яку клавіатуру вона побачить), з браузером (що він перевірить) і з таблицею (яким виявиться значення в CSV).

Тип	Що бачить людина	Що приходить у CSV	Коли брати
`text`	звичайне однорядкове поле	рядок як є	коротка вільна відповідь: назва, слово, ім'я предмета
`email`	клавіатура з `@`, браузер перевіряє формат	рядок	лише якщо пошта справді потрібна — а в анонімній анкеті вона не потрібна
`number`	лише цифри, стрілки, `min`/`max`/`step`	рядок, який читається як число	години, кількість, оцінка, бали
`date`	календар рідною мовою системи	завжди `2026-09-02` (ISO)	дата, про яку відповідають
`radio`	кружечки, обрати можна один	одне значення `value`	до 5 варіантів, які видно всі одразу
`checkbox`	квадратики, обрати можна кілька	кілька значень — склеюємо через `;`	«обери все, що підходить»
`select`	випадний список	одне значення `value`	6 і більше варіантів, коли місця мало
`textarea`	велике поле на кілька рядків	рядок, часто з комами і переносами	розгорнута думка — але звести її формулами майже неможливо

Чому type="date" вирішує проблему минулого уроку Тоді ти бачив, як «01.02» перетворюється то на дату, то на число — залежно від налаштувань програми. Поле date закриває це назавжди: у дані завжди приїжджає YYYY-MM-DD, незалежно від того, що людина бачила в календарі. Такі рядки сортуються як текст і дають правильний порядок.

Радіогрупа тримається на спільному `name`

Три радіокнопки стають однією групою через однаковий name. Більше їх ніщо не пов'язує. А от value в них мають бути різні: саме воно поїде в CSV.

Даси різні name — і це вже три незалежні перемикачі. Людина зможе ввімкнути всі три одразу.

радіогрупа й вибір зі списку

<fieldset> <legend>Як ти почуваєшся зранку</legend> <label><input type="radio" name="morning" value="виспався" required> виспався</label> <label><input type="radio" name="morning" value="нормально"> нормально</label> <label><input type="radio" name="morning" value="розбитий"> розбитий</label> </fieldset> <label for="f_bedtime">О котрій ти зазвичай лягаєш</label> <select id="f_bedtime" name="bedtime" required> <option value="">— обери —</option> <option value="до 22:00">до 22:00</option> <option value="після 00:00">після 00:00</option> </select>

Три деталі, на яких спотикаються:

Радіогрупу обгортають у <fieldset> з <legend>. Це і є «підпис» для всієї групи: окремі <label> підписують варіанти, а питання підписує <legend>.
Перший <option value=""> у select — порожній. Без нього перший пункт вибрано наперед, і required нічого не вимагає: людина «відповіла», не подивившись.
required на групі checkbox працює не так, як здається. Він вимагає, щоб була позначена саме ця галочка, а не «хоча б одна». Правило «хоча б один варіант» перевіряє сервер.

Що браузер уміє перевіряти сам

Атрибут	Що робить	Приклад
`required`	не дає надіслати порожнє поле	`required`
`min` / `max`	межі для `number`, `date`, `range`	`min="0" max="14"`
`step`	крок числа: цілі, півгодини	`step="0.5"`
`maxlength`	обмежує довжину тексту	`maxlength="120"`
`pattern`	регулярний вираз для `text`	`pattern="9[АБ]"`
`type="email"`	перевіряє, що є `@` і крапка після нього	—

Автоперевірка вимагає одного такого поля check 04 шукає у твоїй формі щонайменше одне поле з min/max або pattern. Найпростіше — поле number із розумними межами: годин сну не буває 30, оцінка не буває 15.

Питання 3

Ти зробив три <input type="radio"> для варіантів «добре / так собі / погано», але в анкеті можна позначити всі три одночасно. Що виправити?

Крок 4

Конструктор форми: збери зліва — забери код знизу

Ліворуч ти проєктуєш поля, праворуч одразу видно готову форму очима однокласника. Унизу синхронно збирається код, який можна вставити у свій form/index.html.

Натисни «Надіслати» в правій колонці, не заповнивши обов'язкове поле. Побачиш рівно те, що побачить однокласник.

Тепер заповни й надішли. Унизу правої колонки з'явиться тіло запиту і рядок, який ляже в CSV. Це весь шлях даних, стиснутий до одного кліку.

Твій логін на сервері

action = /api/collect/

Готові набори — можна взяти й переробити

Поля анкети

Що бачить однокласник

Що поїде на сервер

Заповни форму зліва й натисни «Надіслати».

Що ляже в responses.csv

—

Ця кнопка не відкриває твою сторінку взагалі — вона складає тіло запиту руками. Подивись, що при цьому потрапить у CSV.

form/index.html — згенерований код

Що робити з цим кодом Скопіювати, вставити у свій form/index.html між <body> і </body>, додати <h1>, один абзац «що я збираю і навіщо» і посилання назад на головну. Далі — правити руками: конструктор дає каркас, а не готову здачу.

Питання 4

Ти поставив required на всі дев'ять полів. Половина класу не змогла надіслати анкету, і в CSV лише 5 рядків замість 15. Що пішло не так?

Крок 5

Дорога від кліку до рядка

П'ять станцій, дві з яких на твоєму сервері. Якщо десь у CSV з'явився не той рядок — ламалося на одній із цих п'яти.

Схема 2. Твоя робота — станції 1—3. Станції 4 і 5 робить сервіс, який уже стоїть на сервері.

Звідки береться заголовок CSV Сервіс бере назви колонок не з форми, а з твого fields.json — саме тому файл із минулого уроку треба тримати актуальним. Якщо в формі з'явилося нове поле, а в fields.json його немає, значення просто нікуди буде покласти.

GET проти POST: де саме лежать дані

method у формі — це не «швидше або надійніше». Це два різні повідомлення серверові. GET означає «покажи мені щось». POST — «зміни щось у себе». Дописати рядок у CSV — це зміна, тому POST.

Схема 3. Той самий набір відповідей у двох способах надсилання. Приклад адреси й тіла — з ivan; підстав свій логін.

`Content-Type`: чим позначено вміст запиту

Тіло запиту — просто послідовність байтів. Сервер не вгадує, як їх читати. Йому це каже заголовок Content-Type — етикетка на посилці.

Помилишся в етикетці — сервіс розбере тіло неправильно. І відповість 400, навіть якщо дані бездоганні.

Content-Type	Як виглядає тіло	Коли
`application/x-www-form-urlencoded`	`mood=%D0%B4%D0%BE%D0%B1%D1%80%D0%B5&sleep=7`	типове для `<form>` без JS: браузер робить це сам
`multipart/form-data`	тіло розрізане на частини межею `boundary`, у кожної свій заголовок	єдиний спосіб надіслати файл: байти картинки не влізуть у рядок з `&`
`application/json`	`{"mood":"добре","sleep":7}`	наш випадок: зручно збирати в JS, зберігає вкладеність і числа

Останні два розрізнити просто. multipart громіздкіший, зате вміє нести будь-які байти — з ним ідуть файли. json дешевий і читабельний, але тільки текст. Наш сервіс файлів не приймає, тож беремо application/json.

Питання 5

Учень залишив method="get". Форма ніби працює, але після надсилання в адресному рядку видно ?mood=погано&sleep=4, і ця адреса залишилася в історії шкільного комп'ютера. У чому проблема?

Питання 6

Твій fetch() шле тіло JSON.stringify(data), але заголовок Content-Type ти не поставив. Сервіс відповідає 400 Bad Request. Чому?

Крок 6

`fetch()`: надіслати, не перезавантажуючи сторінку

Форма вміє надсилатися сама, без жодного рядка JS. Але тоді браузер піде на іншу сторінку, і людина побачить голу відповідь сервера замість твого «дякую».

Подія submit за замовчуванням означає «браузере, надішли форму сам». Ми цю дію скасовуємо через e.preventDefault().

Далі запитом розпоряджаємося самі. Збираємо значення, шлемо fetch() і показуємо повідомлення просто на місці.

обробник форми — той самий, що генерує конструктор

Чотири деталі, які легко пропустити

new FormData(form) бере рівно ті поля, у яких є name. Це найшвидший спосіб перевірити себе: якщо поля немає в data — ти забув name.
fd.getAll(key) потрібен через checkbox: одне ім'я може мати кілька значень. Склеюємо їх через ;, бо кома вже зайнята роздільником CSV.
form.action замість переписаної адреси: тоді action живе в одному місці — у розмітці — і не розходиться з тим, що бачить чекер.
res.ok, а не «запит пройшов». fetch() не кидає помилку на 400 чи 500: він спокійно повертає відповідь, яку треба перевірити самому.

Порожня галочка просто не приїде Незазначений checkbox не потрапляє у FormData взагалі — не як порожній рядок, а як відсутнє поле. Сервіс підставить у цю колонку порожнє значення, і це нормально. А от undefined у CSV — ознака того, що ти намагався читати поле вручну замість FormData.

Питання 7

Ти повісив fetch() на подію submit, але сторінка щоразу перезавантажується, а рядок у CSV то з'являється, то ні. Чого бракує?

Крок 7

Валідація в браузері — зручність, а не захист

required і min/max живуть у твоїй сторінці. А сторінку можна просто не відкривати.

Браузер перевіряє все для людини. Щоб вона не надіслала анкету з порожнім полем і не витратила час дарма. Робота корисна. Але до того, що приїде на сервер, вона стосунку не має.

Запит до /api/collect/ivan може скласти будь-хто й будь-чим. Терміналом, іншою сторінкою, скриптом на п'ять рядків. Сервер цих запитів не розрізняє: він бачить метод, заголовки й тіло — і більше нічого.

Схема 4. Ліворуч — два джерела одного запиту, праворуч — два можливі сервери. Твоя форма впливає лише на верхній лівий блок.

Перевір це власноруч

Ця команда не відкриває твоєї сторінки взагалі. Подивись у responses.csv: якщо там на один рядок більше, ти щойно довів собі, що перевірка в браузері нікого не зупиняє.

Git Bash, macOS, Linux

$ curl -i -X POST http://91.219.61.4/s/ТВІЙ-ЛОГІН/api/collect/ТВІЙ-ЛОГІН \ -H "Content-Type: application/json" \ -d '{"sleep_hours":"","morning":"!!!"}' HTTP/2 400 {"ok":false,"error":"sleep_hours is required"}

Windows: curl — це не curl У Windows PowerShell 5.1 слово curl — псевдонім до Invoke-WebRequest, і ключі -X, -H, -d він розуміє зовсім інакше. Пиши або curl.exe, або рідну команду PowerShell.

Windows PowerShell 5.1

$ Invoke-RestMethod -Uri "http://91.219.61.4/s/ТВІЙ-ЛОГІН/api/collect/ТВІЙ-ЛОГІН" -Method Post -ContentType "application/json" -Body '{"sleep_hours":"","morning":"!!!"}'

Що перевіряє сервер, коли до нього прилетів рядок

Перевірка	Що ловить
обов'язкові поля не порожні	напівзаповнені анкети
число справді число і в межах `min`/`max`	`"sleep":"багато"` і `"sleep":900`
значення `radio`/`select` є у списку варіантів	вигадані відповіді, яких у формі не було
довжина тексту обмежена	вставлений роман на 40 000 символів
невідомі поля відкидаються	колонки, яких немає у `fields.json`
обмеження частоти запитів	один «дотепник», який надіслав 300 рядків
екранування для CSV	кому, лапки й перенос рядка всередині відповіді

Останній пункт — прямо з минулого уроку. Людина написала читаю, коли не сплю. У файл має лягти "читаю, коли не сплю", у лапках. Інакше рядок роз'їдеться на дві колонки.

Наш сервіс ставить ці лапки сам. Але правило знати треба: чекер звіряє кількість колонок у кожному рядку.

Питання 8

Учитель, не відкриваючи твоєї сторінки, надіслав curl-ом POST із порожнім sleep_hours і morning="!!!". У CSV з'явився рядок — хоча у формі стоять required і min="0" max="14". Що це доводить?

Крок 8

Приватність: що взагалі можна питати

З цієї хвилини в тебе на диску лежать відповіді живих людей, які тобі повірили. Це не метафора — це файл, який можна відкрити.

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

Мінімізація даних: одне правило замість довгого списку

Збирай рівно те, без чого не відповіси на своє питання. Це принцип мінімізації даних, і він записаний у законі. В українському — «Про захист персональних даних». І в європейському: його звуть GDPR, скорочення від General Data Protection Regulation. Українською — «загальний регламент захисту даних».

Формулювання там різні, суть одна. Дані мають бути адекватними й не надмірними щодо мети.

Практичний тест для кожного поля, який займає п'ять секунд:

Тест одного питання «Яке з моїх трьох дослідницьких питань я не зможу закрити без цього поля?» Якщо відповіді немає — поле не потрібне. Не «поки що не потрібне» і не «раптом згодиться»: не потрібне.

Чому «про всяк випадок» — найгірша причина

Телефон і адреса не змінюють жодного підсумку в stats.json. Середнє за годинами сну від них не зрушиться. Зате вони змінюють статус усього файлу. Була анонімна табличка про сон — став список контактів однокласників із їхніми звичками.

Ти не зможеш це «роззібрати» назад. Пароль після витоку міняють за хвилину, номер телефону — місяцями, домашню адресу — ніяк.
Поля складаються. Кожне окремо здається невинним. Клас + вік + адреса + маршрут до школи разом дають людину, яку можна знайти.
Ти відповідаєш за файл, а не за намір. «Я не збирався нікому показувати» — не аргумент, коли файл уже скопійовано.

Чого не питаємо в шкільній анкеті — ніколи Таких полів чотири групи. Нижче про кожну сказано, що саме ламається, якщо поле все-таки з'явиться у формі.

Перша група — те, що називає людину. Прізвище й повне ім'я, фото, повна дата народження. Варто додати одне таке поле — і файл перестає бути анонімним. Усі інші відповіді в рядку тепер прив'язані до конкретного однокласника, і твоя табличка про сон стала досьє.

Друга — те, чим людину знаходять у реальному світі. Номер телефону, нікнейм у месенджері, домашня адреса, маршрут до школи. Жодне з цих полів не змінить твоєї діаграми. Зате разом вони кажуть, де ця людина буває й о котрій виходить з дому.

Третя — те, чим відмикають чужі речі. Паролі, логіни, номер картки, серія паспорта, ІПН. Останнє — індивідуальний податковий номер: за ним людину впізнає держава. Такі номери не питають у жодній анкеті, і шкільна тут не виняток.

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

Замість імені сервіс сам ставить session_id — випадкову мітку на кожну відповідь. Її досить, щоб побачити «це різні люди». І замало, щоб зрозуміти, хто саме.

Три речі, які треба зробити обов'язково

Сказати, що збираєш і навіщо. Один абзац над формою: «Анкета анонімна, відповіді потрібні для діаграм у моїй презентації, імена не питаю». Це не формальність — це те, на що людина погоджується.
Лишити право промовчати. Не роби required скрізь; там, де питання чутливе, додай варіант «не хочу відповідати».
Прибрати на прохання. Якщо однокласник передумав — відкриваєш responses.csv і видаляєш його рядок. Без обговорень.

Чому `responses.csv` живе в `~/data/`

Тека ~/www/ — це вітрина: усе, що поклав, віддає в інтернет nginx. Файл звідти відкриє будь-хто, хто вгадає адресу. Його ще й може проіндексувати пошуковик.

Тека ~/data/ — навпаки, шухляда. Вона має права 750 і лежить поза веб-корінням. Шляху до неї у веб-сервера просто немає.

перевір сам: приватна тека мовчить

$ curl -s -o /dev/null -w "%{http_code}\n" http://91.219.61.4/s/ТВІЙ-ЛОГІН/data/responses.csv 404 $ curl -s -o /dev/null -w "%{http_code}\n" http://91.219.61.4/s/ТВІЙ-ЛОГІН/form/ 200

Чекер шукає копію файлу в ~/www не за іменем, а за sha256. Тому перейменувати responses.csv на data2.txt не вийде. Так зроблено навмисно: правило про приватні дані не має обходитися хитрістю.

Питання 9

Однокласниця пропонує додати в анкету телефон — «раптом треба буде уточнити відповідь». Що відповісти?

Питання 10

Щоб швидше дивитися результати, учень скопіював responses.csv у ~/www/form/. Що сталося?

Крок 9

Підсумки: з рядків у `stats.json`

Останній крок теми — звести зібране в три числа на кожне поле. Саме цей файл на наступному уроці стане діаграмами.

Схема 5. Числа в прикладі узгоджені між собою: розподіл дає рівно 12 відповідей. Середнє 6,75 порахувати з чотирьох показаних рядків не можна — воно рахується з усіх дванадцяти.

Що в цьому файлі має бути

Ключ	Що містить	Звідки береться
`count`	скільки всього відповідей	кількість рядків даних, без заголовка
`by_field`	`mean`, `min`, `max` на кожне числове поле	`AVERAGE`, `MIN`, `MAX` по колонці
`distribution`	скільки разів трапився кожен варіант	`COUNTIF` по колонці `radio`/`select`

Числа рахуються, а не пишуться Чекер перерахує responses.csv сам і звірить із твоїм файлом із допуском 0,01. Округлив 6,7532 до 6,75 — зарахує. А от 7, поставлене «бо приблизно так», у цей допуск не влізе, і критерій лишиться червоним, поки не перерахуєш.

PowerShell і кодування: пастка, на якій горять щороку Якщо ти збираєш stats.json скриптом і зберігаєш вивід у файл, Windows PowerShell 5.1 запише його в UTF-16, і чекер (він читає JSON як UTF-8) скаже «невалідний JSON» без жодного пояснення.

як зберігати правильно

# Windows PowerShell 5.1 python make_stats.py | Out-File -Encoding utf8 stats.json # Git Bash, macOS, Linux python make_stats.py > stats.json

Найнадійніше — не перенаправляти вивід узагалі, а зберегти файл із редактора, вибравши кодування UTF-8.

Питання 11

У stats.json ти написав "count": 15, бо стільки відповідей планував зібрати, а в CSV їх 11. Що буде?

Крок 10

Практика: форма, дані, підсумки

Кроки 1—5 — у себе на комп'ютері, далі — FTP і сервер. Галочки зберігаються, сторінку можна закрити.

Межа, яку не переходять По FTP їдуть тільки index.html, stats.json і fields.json — легкий текст. responses.csv пише сам сервіс у ~/data/. Ти його не заливаєш, не копіюєш у ~/www/ і не відкриваєш «щоб показати другові».

Крок 11

Автоперевірка

Чекер не читає відповідей однокласників. Він дивиться структуру форми, звіряє stats.json із CSV і перевіряє, що приватне лишилося приватним. Спроби не обмежені.

Демонстраційний режим: результат згенеровано для показу. На сервері ця кнопка викликає POST /api/check, який запускає check 04 від імені учня.

Що вчитель дивиться на твоєму екрані

відкрита твоя форма: учитель вводить свідомо некоректне значення — 25 годин сну, порожнє обов'язкове поле — і дивиться, що каже браузер;
потім те саме значення надсилається curl-ом повз форму, і ви разом дивитесь, що відповів сервіс і чи виріс CSV;
у DevTools на вкладці Network видно твій POST: метод, Content-Type і тіло з тими самими name, що у fields.json;
ти показуєш два рядки responses.csv у терміналі й пояснюєш, звідки взялися session_id і ts;
ти називаєш одне поле, яке хотів додати й не додав, і пояснюєш чому — це головне питання уроку.

Крок 12

Шкала виконання

Це те, що бачить учитель, коли виставляє оцінку.

Складник	Вага	Результат

Виконано

Рекомендований бал — за 12-бальною

Чотири речення, які варто запам'ятати

у дані потрапляють лише поля з name; id потрібен підпису й скрипту і на сервер не їде;
дописування рядка — це зміна, тому POST, а Content-Type каже серверу, чим розбирати тіло;
валідація в браузері зроблена для людини; захищає дані тільки та перевірка, що стоїть на сервері;
збирай рівно те, без чого не відповіси на своє питання — і тримай зібране в ~/data/.

Де найчастіше помиляються

action скопійовано в сусіда — відповіді всього класу летять на чужий акаунт, а свій CSV лишається порожнім;
required поставлено на всі поля — і половина анкет не доходить;
числа в stats.json вписані руками — перевірка cross ловить це першою ж спробою;
копію responses.csv кладуть у ~/www/form/, «щоб було зручно дивитися»;
у name пробіли й кирилиця — заголовок CSV розсипається;
забутий e.preventDefault() — сторінка перезавантажується, і частина відповідей губиться.

Домашнє завдання

Довести кількість відповідей до 15 і перерахувати stats.json. Потім дописати в form/README.md три речення рефлексії.

Одне з них обов'язкове: яке поле ти хотів додати й не додав. І яке дослідницьке питання від цього не постраждало.

Джерела

Звідки взяті правила

Усе, що на цій сторінці сказано про форми, HTTP і приватність, — зі специфікацій і офіційної документації. Перевіряти дозволено й корисно.

HTML: тег <form>, action, method, enctype — стандарт WHATWG. html.spec.whatwg.org/multipage/forms.html
Типи <input> і те, що браузер робить із кожним — MDN. developer.mozilla.org/…/Element/input
<label> і зв'язок for ↔ id — MDN. developer.mozilla.org/…/Element/label
Чому placeholder не заміняє підпис — WCAG, критерій «Labels or Instructions» і техніка про плейсхолдери. w3.org/WAI/tutorials/forms/labels
Звідки взялося число 4,5:1 — WCAG 2.2, критерій 1.4.3 Contrast (Minimum): мінімальний контраст тексту до тла. w3.org/WAI/WCAG22/Understanding/contrast-minimum
Клієнтська валідація: required, min, max, pattern — MDN. developer.mozilla.org/…/Form_validation
Методи HTTP: GET безпечний та ідемпотентний, POST — ні — RFC 9110, §9. datatracker.ietf.org/doc/html/rfc9110
Content-Type і структура тіла запиту — RFC 9110, §8.3. datatracker.ietf.org/doc/html/rfc9110#section-8.3
multipart/form-data — RFC 7578. datatracker.ietf.org/doc/html/rfc7578
fetch(), FormData і подія submit — MDN. developer.mozilla.org/…/API/FormData
Валідація на клієнті нічого не захищає — OWASP Input Validation Cheat Sheet. cheatsheetseries.owasp.org/…/Input_Validation
Мінімізація даних як принцип — GDPR, ст. 5(1)(c). gdpr-info.eu/art-5-gdpr
Закон України «Про захист персональних даних» — визначення персональних даних і вимога адекватності меті. zakon.rada.gov.ua/laws/show/2297-17
Формат CSV (RFC 4180) — заголовок, кома, лапки, екранування. datatracker.ietf.org/doc/html/rfc4180
Формат дати YYYY-MM-DD (ISO 8601) — саме його віддає <input type="date">. iso.org/iso-8601-date-and-time-format
PowerShell і кодування виводу — Out-File -Encoding. learn.microsoft.com/…/out-file

Повний список із поясненнями, що звідки взято, — у файлі urok-04-джерела.md поруч із цією сторінкою.

Що робимо сьогодні

Після уроку ти вмієш

Хід уроку

Анатомія форми: чотири слова, які треба знати напам'ять

name проти id: два різні світи

Чому <label> обов'язковий, а не «бажаний»

placeholder — це приклад, а не назва

Один тег, вісім типів полів

Радіогрупа тримається на спільному name

Що браузер уміє перевіряти сам

Конструктор форми: збери зліва — забери код знизу

Дорога від кліку до рядка

GET проти POST: де саме лежать дані

Content-Type: чим позначено вміст запиту

fetch(): надіслати, не перезавантажуючи сторінку

Чотири деталі, які легко пропустити

Валідація в браузері — зручність, а не захист

Перевір це власноруч

Що перевіряє сервер, коли до нього прилетів рядок

Приватність: що взагалі можна питати

Мінімізація даних: одне правило замість довгого списку

Чому «про всяк випадок» — найгірша причина

Три речі, які треба зробити обов'язково

Чому responses.csv живе в ~/data/

Підсумки: з рядків у stats.json

Що в цьому файлі має бути

Практика: форма, дані, підсумки

Автоперевірка

Що вчитель дивиться на твоєму екрані

Шкала виконання

Чотири речення, які варто запам'ятати

Де найчастіше помиляються

Домашнє завдання

Звідки взяті правила

`name` проти `id`: два різні світи

Чому `<label>` обов'язковий, а не «бажаний»

`placeholder` — це приклад, а не назва

Радіогрупа тримається на спільному `name`

`Content-Type`: чим позначено вміст запиту

`fetch()`: надіслати, не перезавантажуючи сторінку

Чому `responses.csv` живе в `~/data/`

Підсумки: з рядків у `stats.json`