From c7f57aac6191969adb6207c3fcbb372fd4f90109 Mon Sep 17 00:00:00 2001
From: Anton <anton.semenov.ser@gmail.com>
Date: Tue, 12 May 2026 15:22:59 +0300
Subject: [PATCH] fix: add for/id accessibility attributes to all form elements

---
 index.html | 84 +++++++++++++++++++++++++++---------------------------
 1 file changed, 42 insertions(+), 42 deletions(-)

diff --git a/index.html b/index.html
index 2871055..f47a277 100644
--- a/index.html
+++ b/index.html
@@ -24,27 +24,27 @@
         <h2>О парке</h2>
 
         <div class="question" data-index="1">
-          <label>1. Какой размер парка? (площадь, примерно)</label>
-          <textarea name="park_size" placeholder="Например: 2000 кв.м, примерно 50x40 метров"></textarea>
-          <textarea name="park_size_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
+          <label for="park_size">1. Какой размер парка? (площадь, примерно)</label>
+          <textarea id="park_size" name="park_size" placeholder="Например: 2000 кв.м, примерно 50x40 метров"></textarea>
+          <textarea id="park_size_comment" name="park_size_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
         </div>
 
         <div class="question" data-index="2">
-          <label>2. Сколько человек максимум могут быть в парке одновременно?</label>
-          <textarea name="max_people" placeholder="Например: 5 человек с собаками"></textarea>
-          <textarea name="max_people_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
+          <label for="max_people">2. Сколько человек максимум могут быть в парке одновременно?</label>
+          <textarea id="max_people" name="max_people" placeholder="Например: 5 человек с собаками"></textarea>
+          <textarea id="max_people_comment" name="max_people_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
         </div>
 
         <div class="question" data-index="3">
-          <label>3. Какова минимальная и максимальная длительность одного слота?</label>
-          <textarea name="slot_duration" placeholder="Например: минимум 30 минут, максимум 2 часа"></textarea>
-          <textarea name="slot_duration_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
+          <label for="slot_duration">3. Какова минимальная и максимальная длительность одного слота?</label>
+          <textarea id="slot_duration" name="slot_duration" placeholder="Например: минимум 30 минут, максимум 2 часа"></textarea>
+          <textarea id="slot_duration_comment" name="slot_duration_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
         </div>
 
         <div class="question" data-index="4">
-          <label>4. Часы работы парка (по дням недели)?</label>
-          <textarea name="working_hours" placeholder="Например: пн-пт 8:00-20:00, сб-вс 9:00-21:00"></textarea>
-          <textarea name="working_hours_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
+          <label for="working_hours">4. Часы работы парка (по дням недели)?</label>
+          <textarea id="working_hours" name="working_hours" placeholder="Например: пн-пт 8:00-20:00, сб-вс 9:00-21:00"></textarea>
+          <textarea id="working_hours_comment" name="working_hours_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
         </div>
       </section>
 
@@ -53,21 +53,21 @@
         <h2>О бронировании</h2>
 
         <div class="question" data-index="5">
-          <label>5. Как вы хотите принимать оплату?</label>
-          <textarea name="payment" placeholder="Например: онлайн картой, наличными на месте, выставлять счёт"></textarea>
-          <textarea name="payment_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
+          <label for="payment">5. Как вы хотите принимать оплату?</label>
+          <textarea id="payment" name="payment" placeholder="Например: онлайн картой, наличными на месте, выставлять счёт"></textarea>
+          <textarea id="payment_comment" name="payment_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
         </div>
 
         <div class="question" data-index="6">
-          <label>6. Нужна ли возможность отмены бронирования? За сколько часов до начала?</label>
-          <textarea name="cancellation" placeholder="Например: да, за 24 часа до начала / нет, отмена невозможна"></textarea>
-          <textarea name="cancellation_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
+          <label for="cancellation">6. Нужна ли возможность отмены бронирования? За сколько часов до начала?</label>
+          <textarea id="cancellation" name="cancellation" placeholder="Например: да, за 24 часа до начала / нет, отмена невозможна"></textarea>
+          <textarea id="cancellation_comment" name="cancellation_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
         </div>
 
         <div class="question" data-index="7">
-          <label>7. Нужна ли регистрация пользователя или достаточно имя + email?</label>
-          <textarea name="registration" placeholder="Например: достаточно имени и email / нужна полная регистрация с паролем"></textarea>
-          <textarea name="registration_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
+          <label for="registration">7. Нужна ли регистрация пользователя или достаточно имя + email?</label>
+          <textarea id="registration" name="registration" placeholder="Например: достаточно имени и email / нужна полная регистрация с паролем"></textarea>
+          <textarea id="registration_comment" name="registration_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
         </div>
       </section>
 
@@ -76,15 +76,15 @@
         <h2>О воротах</h2>
 
         <div class="question" data-index="8">
-          <label>8. Какое оборудование уже есть на воротах или нужно закупить?</label>
-          <textarea name="gate_equipment" placeholder="Например: уже есть электронный замок марки X / нужно закупить всё с нуля"></textarea>
-          <textarea name="gate_equipment_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
+          <label for="gate_equipment">8. Какое оборудование уже есть на воротах или нужно закупить?</label>
+          <textarea id="gate_equipment" name="gate_equipment" placeholder="Например: уже есть электронный замок марки X / нужно закупить всё с нуля"></textarea>
+          <textarea id="gate_equipment_comment" name="gate_equipment_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
         </div>
 
         <div class="question" data-index="9">
-          <label>9. PIN-код — кто его генерирует: вы вручную или система автоматически?</label>
-          <textarea name="pin_generation" placeholder="Например: система должна генерировать автоматически после оплаты"></textarea>
-          <textarea name="pin_generation_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
+          <label for="pin_generation">9. PIN-код — кто его генерирует: вы вручную или система автоматически?</label>
+          <textarea id="pin_generation" name="pin_generation" placeholder="Например: система должна генерировать автоматически после оплаты"></textarea>
+          <textarea id="pin_generation_comment" name="pin_generation_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
         </div>
       </section>
 
@@ -93,15 +93,15 @@
         <h2>О дизайне и языке</h2>
 
         <div class="question" data-index="10">
-          <label>10. Есть ли логотип, фирменные цвета, название парка?</label>
-          <textarea name="branding" placeholder="Например: название 'Koira Park', цвета зелёный и белый, логотип есть (могу прислать)"></textarea>
-          <textarea name="branding_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
+          <label for="branding">10. Есть ли логотип, фирменные цвета, название парка?</label>
+          <textarea id="branding" name="branding" placeholder="Например: название 'Koira Park', цвета зелёный и белый, логотип есть (могу прислать)"></textarea>
+          <textarea id="branding_comment" name="branding_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
         </div>
 
         <div class="question" data-index="11">
-          <label>11. На каком языке должен быть сайт/приложение?</label>
-          <textarea name="language" placeholder="Например: только финский / финский + английский / финский + русский"></textarea>
-          <textarea name="language_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
+          <label for="language">11. На каком языке должен быть сайт/приложение?</label>
+          <textarea id="language" name="language" placeholder="Например: только финский / финский + английский / финский + русский"></textarea>
+          <textarea id="language_comment" name="language_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
         </div>
       </section>
 
@@ -110,9 +110,9 @@
         <h2>О сроках</h2>
 
         <div class="question" data-index="12">
-          <label>12. Когда нужен готовый продукт?</label>
-          <textarea name="deadline" placeholder="Например: через 2 месяца / к лету 2026 / как можно скорее"></textarea>
-          <textarea name="deadline_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
+          <label for="deadline">12. Когда нужен готовый продукт?</label>
+          <textarea id="deadline" name="deadline" placeholder="Например: через 2 месяца / к лету 2026 / как можно скорее"></textarea>
+          <textarea id="deadline_comment" name="deadline_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
         </div>
       </section>
 
@@ -120,16 +120,16 @@
       <section class="section">
         <h2>Ваши контактные данные</h2>
         <div class="question">
-          <label>Имя</label>
-          <input type="text" name="client_name" required placeholder="Ваше имя">
+          <label for="client_name">Имя</label>
+          <input type="text" id="client_name" name="client_name" required placeholder="Ваше имя">
         </div>
         <div class="question">
-          <label>Email</label>
-          <input type="email" name="client_email" required placeholder="ваш@email.com">
+          <label for="client_email">Email</label>
+          <input type="email" id="client_email" name="client_email" required placeholder="ваш@email.com">
         </div>
         <div class="question">
-          <label>Телефон (необязательно)</label>
-          <input type="tel" name="client_phone" placeholder="+358 XX XXX XXXX">
+          <label for="client_phone">Телефон (необязательно)</label>
+          <input type="tel" id="client_phone" name="client_phone" placeholder="+358 XX XXX XXXX">
         </div>
       </section>