<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "7cbdbd132d39a2bb493e85bc2a9387cc",
  "translation_date": "2025-11-06T13:46:38+00:00",
  "source_file": "7-bank-project/2-forms/README.md",
  "language_code": "uk"
}
-->
# Створення банківського додатку Частина 2: Створення форми входу та реєстрації

```mermaid
journey
    title Your Form Development Journey
    section HTML Foundation
      Understand form elements: 3: Student
      Learn input types: 4: Student
      Master accessibility: 4: Student
    section JavaScript Integration
      Handle form submission: 4: Student
      Implement AJAX communication: 5: Student
      Process server responses: 5: Student
    section Validation Systems
      Create multi-layer validation: 5: Student
      Enhance user experience: 5: Student
      Ensure data integrity: 5: Student
```

## Тест перед лекцією

[Тест перед лекцією](https://ff-quizzes.netlify.app/web/quiz/43)

Чи заповнювали ви коли-небудь форму онлайн, яка відхиляла формат вашої електронної пошти? Або втрачали всю інформацію після натискання кнопки "Надіслати"? Ми всі стикалися з такими неприємними ситуаціями.

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

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

Наприкінці ви матимете повну систему входу та реєстрації з перевіркою, яка спрямовує користувачів до успіху, а не до розчарування.

```mermaid
mindmap
  root((Form Development))
    HTML Foundation
      Semantic Elements
      Input Types
      Accessibility
      Label Association
    User Experience
      Validation Feedback
      Error Prevention
      Loading States
      Success Messaging
    JavaScript Integration
      Event Handling
      AJAX Communication
      Data Processing
      Error Management
    Validation Layers
      HTML5 Validation
      Client-side Logic
      Server-side Security
      Progressive Enhancement
    Modern Patterns
      Fetch API
      Async/Await
      Form Data API
      Promise Handling
```

## Передумови

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

### Необхідна підготовка

| Компонент | Статус | Опис |
|-----------|--------|-------------|
| [HTML Шаблони](../1-template-route/README.md) | ✅ Обов'язково | Основна структура банківського додатку |
| [Node.js](https://nodejs.org) | ✅ Обов'язково | JavaScript середовище виконання для сервера |
| [Bank API Server](../api/README.md) | ✅ Обов'язково | Сервіс бекенду для зберігання даних |

> 💡 **Порада для розробки**: Ви будете запускати два окремі сервери одночасно – один для фронтенд банківського додатку, а інший для бекенду API. Така конфігурація відображає реальний процес розробки, коли фронтенд і бекенд працюють незалежно.

### Конфігурація серверів

**Ваше середовище розробки включатиме:**
- **Сервер фронтенду**: Обслуговує ваш банківський додаток (зазвичай порт `3000`)
- **Сервер бекенду API**: Обробляє зберігання та отримання даних (порт `5000`)
- **Обидва сервери** можуть працювати одночасно без конфліктів

**Тестування з'єднання з API:**
```bash
curl http://localhost:5000/api
# Expected response: "Bank API v1.0.0"
```

**Якщо ви бачите відповідь версії API, ви готові продовжувати!**

---

## Розуміння HTML форм та елементів управління

HTML форми – це спосіб, яким користувачі взаємодіють із вашим веб-додатком. Уявіть їх як телеграфну систему, яка з'єднувала віддалені місця у 19 столітті – це протокол зв'язку між намірами користувача та відповіддю додатку. Коли вони спроектовані ретельно, вони ловлять помилки, спрямовують форматування введення та надають корисні підказки.

Сучасні форми значно складніші за базові текстові поля. HTML5 ввів спеціалізовані типи введення, які автоматично обробляють перевірку електронної пошти, форматування чисел та вибір дат. Ці покращення сприяють як доступності, так і мобільному досвіду користувачів.

### Основні елементи форми

**Будівельні блоки, які потрібні кожній формі:**

```html
<!-- Basic form structure -->
<form id="userForm" method="POST">
  <label for="username">Username</label>
  <input id="username" name="username" type="text" required>
  
  <button type="submit">Submit</button>
</form>
```

**Що робить цей код:**
- **Створює** контейнер форми з унікальним ідентифікатором
- **Визначає** HTTP метод для надсилання даних
- **Зв'язує** мітки з полями введення для доступності
- **Визначає** кнопку "Надіслати" для обробки форми

### Сучасні типи введення та атрибути

| Тип введення | Призначення | Приклад використання |
|--------------|-------------|-----------------------|
| `text` | Загальне текстове введення | `<input type="text" name="username">` |
| `email` | Перевірка електронної пошти | `<input type="email" name="email">` |
| `password` | Приховане введення тексту | `<input type="password" name="password">` |
| `number` | Числове введення | `<input type="number" name="balance" min="0">` |
| `tel` | Номери телефонів | `<input type="tel" name="phone">` |

> 💡 **Перевага сучасного HTML5**: Використання специфічних типів введення забезпечує автоматичну перевірку, відповідні мобільні клавіатури та кращу підтримку доступності без додаткового JavaScript!

### Типи кнопок та їх поведінка

```html
<!-- Different button behaviors -->
<button type="submit">Save Data</button>     <!-- Submits the form -->
<button type="reset">Clear Form</button>    <!-- Resets all fields -->
<button type="button">Custom Action</button> <!-- No default behavior -->
```

**Що робить кожен тип кнопки:**
- **Кнопки "Надіслати"**: Запускають надсилання форми та передають дані на вказаний кінцевий пункт
- **Кнопки "Скинути"**: Відновлюють всі поля форми до початкового стану
- **Звичайні кнопки**: Не мають стандартної поведінки, вимагають кастомного JavaScript для функціональності

> ⚠️ **Важлива примітка**: Елемент `<input>` є самозакриваючим і не потребує закриваючого тегу. Сучасна найкраща практика – писати `<input>` без слешу.

### Створення форми входу

Тепер давайте створимо практичну форму входу, яка демонструє сучасні практики HTML форм. Ми почнемо з базової структури та поступово покращимо її за допомогою функцій доступності та перевірки.

```html
<template id="login">
  <h1>Bank App</h1>
  <section>
    <h2>Login</h2>
    <form id="loginForm" novalidate>
      <div class="form-group">
        <label for="username">Username</label>
        <input id="username" name="user" type="text" required 
               autocomplete="username" placeholder="Enter your username">
      </div>
      <button type="submit">Login</button>
    </form>
  </section>
</template>
```

**Розбір того, що тут відбувається:**
- **Структурує** форму за допомогою семантичних елементів HTML5
- **Групує** пов'язані елементи за допомогою контейнерів `div` з осмисленими класами
- **Зв'язує** мітки з полями введення за допомогою атрибутів `for` та `id`
- **Включає** сучасні атрибути, такі як `autocomplete` та `placeholder` для покращення UX
- **Додає** `novalidate` для обробки перевірки за допомогою JavaScript замість стандартів браузера

### Сила правильних міток

**Чому мітки важливі для сучасної веб-розробки:**

```mermaid
graph TD
    A[Label Element] --> B[Screen Reader Support]
    A --> C[Click Target Expansion]
    A --> D[Form Validation]
    A --> E[SEO Benefits]
    
    B --> F[Accessible to all users]
    C --> G[Better mobile experience]
    D --> H[Clear error messaging]
    E --> I[Better search ranking]
```

**Що досягають правильні мітки:**
- **Дозволяють** екранним читачам чітко оголошувати поля форми
- **Розширюють** область кліку (натискання на мітку фокусує поле введення)
- **Покращують** мобільну зручність завдяки більшим зонам для торкання
- **Підтримують** перевірку форми з осмисленими повідомленнями про помилки
- **Покращують** SEO, надаючи семантичне значення елементам форми

> 🎯 **Ціль доступності**: Кожне поле введення форми повинно мати пов'язану мітку. Ця проста практика робить ваші форми доступними для всіх, включаючи користувачів з обмеженими можливостями, і покращує досвід для всіх користувачів.

### Створення форми реєстрації

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

```html
<hr/>
<h2>Register</h2>
<form id="registerForm" novalidate>
  <div class="form-group">
    <label for="user">Username</label>
    <input id="user" name="user" type="text" required 
           autocomplete="username" placeholder="Choose a username">
  </div>
  
  <div class="form-group">
    <label for="currency">Currency</label>
    <input id="currency" name="currency" type="text" value="$" 
           required maxlength="3" placeholder="USD, EUR, etc.">
  </div>
  
  <div class="form-group">
    <label for="description">Account Description</label>
    <input id="description" name="description" type="text" 
           maxlength="100" placeholder="Personal savings, checking, etc.">
  </div>
  
  <div class="form-group">
    <label for="balance">Starting Balance</label>
    <input id="balance" name="balance" type="number" value="0" 
           min="0" step="0.01" placeholder="0.00">
  </div>
  
  <button type="submit">Create Account</button>
</form>
```

**У наведеному вище ми:**
- **Організували** кожне поле в контейнерних div для кращого стилю та макету
- **Додали** відповідні атрибути `autocomplete` для підтримки автозаповнення браузера
- **Включили** корисний текст-підказку для спрямування введення користувача
- **Встановили** розумні значення за замовчуванням за допомогою атрибуту `value`
- **Застосували** атрибути перевірки, такі як `required`, `maxlength` та `min`
- **Використали** `type="number"` для поля балансу з підтримкою десяткових чисел

### Дослідження типів введення та поведінки

**Сучасні типи введення забезпечують розширену функціональність:**

| Функція | Перевага | Приклад |
|---------|----------|---------|
| `type="number"` | Числова клавіатура на мобільних пристроях | Легше введення балансу |
| `step="0.01"` | Контроль десяткової точності | Дозволяє копійки у валюті |
| `autocomplete` | Автозаповнення браузера | Швидше заповнення форми |
| `placeholder` | Контекстні підказки | Спрямовує очікування користувача |

> 🎯 **Виклик доступності**: Спробуйте навігацію формами, використовуючи лише клавіатуру! Використовуйте `Tab` для переміщення між полями, `Space` для встановлення прапорців та `Enter` для надсилання. Цей досвід допоможе вам зрозуміти, як користувачі екранних читачів взаємодіють із вашими формами.

### 🔄 **Педагогічна перевірка**
**Розуміння основ форм**: Перед впровадженням JavaScript переконайтеся, що ви розумієте:
- ✅ Як семантичний HTML створює доступні структури форм
- ✅ Чому типи введення важливі для мобільних клавіатур та перевірки
- ✅ Взаємозв'язок між мітками та елементами управління формою
- ✅ Як атрибути форми впливають на стандартну поведінку браузера

**Швидкий самотест**: Що станеться, якщо ви надішлете форму без обробки JavaScript?
*Відповідь: Браузер виконає стандартне надсилання, зазвичай перенаправляючи на URL дії*

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

## Розуміння методів надсилання форм

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

Давайте розглянемо, що насправді відбувається, коли хтось натискає кнопку "Надіслати".

### Стандартна поведінка форми

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

**Протестуйте ваші поточні форми:**
1. Натисніть кнопку *Реєстрація* у вашій формі
2. Спостерігайте зміни в адресному рядку вашого браузера
3. Зверніть увагу, як сторінка перезавантажується, і дані з'являються в URL

![Скріншот зміни URL браузера після натискання кнопки Реєстрація](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.uk.png)

### Порівняння HTTP методів

```mermaid
graph TD
    A[Form Submission] --> B{HTTP Method}
    B -->|GET| C[Data in URL]
    B -->|POST| D[Data in Request Body]
    
    C --> E[Visible in address bar]
    C --> F[Limited data size]
    C --> G[Bookmarkable]
    
    D --> H[Hidden from URL]
    D --> I[Large data capacity]
    D --> J[More secure]
```

**Розуміння відмінностей:**

| Метод | Випадок використання | Розташування даних | Рівень безпеки | Ліміт розміру |
|-------|-----------------------|--------------------|----------------|---------------|
| `GET` | Пошукові запити, фільтри | Параметри URL | Низький (видимий) | ~2000 символів |
| `POST` | Облікові записи користувачів, конфіденційні дані | Тіло запиту | Вищий (прихований) | Практично без обмежень |

**Розуміння основних відмінностей:**
- **GET**: Додає дані форми до URL як параметри запиту (підходить для пошукових операцій)
- **POST**: Включає дані в тіло запиту (необхідно для конфіденційної інформації)
- **Обмеження GET**: Обмеження розміру, видимі дані, постійна історія браузера
- **Переваги POST**: Велика місткість даних, захист конфіденційності, підтримка завантаження файлів

> 💡 **Найкраща практика**: Використовуйте `GET` для пошукових форм і фільтрів (отримання даних), використовуйте `POST` для реєстрації користувачів, входу та створення даних.

### Налаштування надсилання форми

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

```html
<form id="registerForm" action="//localhost:5000/api/accounts" 
      method="POST" novalidate>
```

**Що робить ця конфігурація:**
- **Спрямовує** надсилання форми на кінцевий пункт вашого API
- **Використовує** метод POST для безпечної передачі даних
- **Включає** `novalidate` для обробки перевірки за допомогою JavaScript

### Тестування надсилання форми

**Виконайте ці кроки для тестування вашої форми:**
1. **Заповніть** форму реєстрації вашою інформацією
2. **Натисніть** кнопку "Створити обліковий запис"
3. **Спостерігайте** відповідь сервера у вашому браузері

![Вікно браузера на адресі localhost:5000/api/accounts, що показує JSON-рядок з даними користувача](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.uk.png)

**Що ви повинні побачити:**
- **Браузер перенаправляє** на URL кінцевого пункту API
- **JSON-відповідь**, що містить дані вашого новоствореного облікового запису
- **Підтвердження сервера**, що обліковий запис успішно створено

> 🧪 **Час експерименту**: Спробуйте зареєструватися з тим самим ім'ям користувача ще раз. Яку відповідь ви отримуєте? Це допоможе вам зрозуміти, як сервер обробляє дублювання даних та умови помилок.

### Розуміння JSON-відповідей

**Коли сервер успішно обробляє вашу форму:**
```json
{
  "user": "john_doe",
  "currency": "$",
  "description": "Personal savings",
  "balance": 100,
  "id": "unique_account_id"
}
```

**Ця відповідь підтверджує:**
- **Створює** новий обліковий запис із зазначеними вами даними
- **Призначає** унікальний ідентифікатор для майбутнього використання
- **Повертає** всю інформацію облікового запису для перевірки
- **Вказує** успішне збереження в базі даних

## Сучасна обробка форм за допомогою JavaScript

Традиційне надсилання форм викликає повне перезавантаження сторінки, подібно до того, як ранні космічні місії вимагали повного скидання систем для корекції курсу.
```javascript
// Example of what FormData captures
const formData = new FormData(registerForm);

// FormData automatically captures:
// {
//   "user": "john_doe",
//   "currency": "$", 
//   "description": "Personal account",
//   "balance": "100"
// }
```

**Переваги API FormData:**
- **Всеосяжний збір даних**: Захоплює всі елементи форми, включаючи текст, файли та складні введення
- **Обізнаність про типи**: Автоматично обробляє різні типи введення без необхідності додаткового кодування
- **Ефективність**: Усуває ручний збір полів за допомогою одного виклику API
- **Адаптивність**: Зберігає функціональність при зміні структури форми

### Створення функції для комунікації з сервером

Тепер створимо надійну функцію для взаємодії з вашим API сервером, використовуючи сучасні шаблони JavaScript:

```javascript
async function createAccount(account) {
  try {
    const response = await fetch('//localhost:5000/api/accounts', {
      method: 'POST',
      headers: { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      },
      body: account
    });
    
    // Check if the response was successful
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    return await response.json();
  } catch (error) {
    console.error('Account creation failed:', error);
    return { error: error.message || 'Network error occurred' };
  }
}
```

**Розуміння асинхронного JavaScript:**

```mermaid
sequenceDiagram
    participant JS as JavaScript
    participant Fetch as Fetch API
    participant Server as Backend Server
    
    JS->>Fetch: fetch() request
    Fetch->>Server: HTTP POST
    Server-->>Fetch: JSON response
    Fetch-->>JS: await response
    JS->>JS: Process data
```

**Що досягає ця сучасна реалізація:**
- **Використовує** `async/await` для читабельного асинхронного коду
- **Включає** належну обробку помилок за допомогою блоків try/catch
- **Перевіряє** статус відповіді перед обробкою даних
- **Встановлює** відповідні заголовки для JSON-комунікації
- **Надає** детальні повідомлення про помилки для налагодження
- **Повертає** послідовну структуру даних для успішних і помилкових випадків

### Потужність сучасного Fetch API

**Переваги Fetch API над старими методами:**

| Функція | Перевага | Реалізація |
|---------|----------|------------|
| На основі Promise | Чистий асинхронний код | `await fetch()` |
| Налаштування запиту | Повний контроль HTTP | Заголовки, методи, тіло |
| Обробка відповіді | Гнучкий аналіз даних | `.json()`, `.text()`, `.blob()` |
| Обробка помилок | Всеосяжне захоплення помилок | Блоки try/catch |

> 🎥 **Дізнайтеся більше**: [Async/Await Tutorial](https://youtube.com/watch?v=YwmlRkrxvkk) - Розуміння асинхронних шаблонів JavaScript для сучасної веб-розробки.

**Ключові концепти для комунікації з сервером:**
- **Асинхронні функції** дозволяють призупинити виконання для очікування відповіді сервера
- **Ключове слово await** робить асинхронний код схожим на синхронний
- **Fetch API** забезпечує сучасні HTTP-запити на основі Promise
- **Обробка помилок** гарантує, що ваш додаток реагує на мережеві проблеми належним чином

### Завершення функції реєстрації

Об'єднаємо все разом у повну, готову до використання функцію реєстрації:

```javascript
async function register() {
  const registerForm = document.getElementById('registerForm');
  const submitButton = registerForm.querySelector('button[type="submit"]');
  
  try {
    // Show loading state
    submitButton.disabled = true;
    submitButton.textContent = 'Creating Account...';
    
    // Process form data
    const formData = new FormData(registerForm);
    const jsonData = JSON.stringify(Object.fromEntries(formData));
    
    // Send to server
    const result = await createAccount(jsonData);
    
    if (result.error) {
      console.error('Registration failed:', result.error);
      alert(`Registration failed: ${result.error}`);
      return;
    }
    
    console.log('Account created successfully!', result);
    alert(`Welcome, ${result.user}! Your account has been created.`);
    
    // Reset form after successful registration
    registerForm.reset();
    
  } catch (error) {
    console.error('Unexpected error:', error);
    alert('An unexpected error occurred. Please try again.');
  } finally {
    // Restore button state
    submitButton.disabled = false;
    submitButton.textContent = 'Create Account';
  }
}
```

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

### Тестування вашої реалізації

**Відкрийте інструменти розробника браузера та протестуйте реєстрацію:**

1. **Відкрийте** консоль браузера (F12 → вкладка Console)
2. **Заповніть** форму реєстрації
3. **Натисніть** "Створити акаунт"
4. **Спостерігайте** повідомлення в консолі та зворотний зв'язок для користувача

![Скріншот, що показує повідомлення в консолі браузера](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.uk.png)

**Що ви повинні побачити:**
- **Стан завантаження** з'являється на кнопці надсилання
- **Логи консолі** показують детальну інформацію про процес
- **Повідомлення про успіх** з'являється при успішному створенні акаунта
- **Форма автоматично** скидається після успішного надсилання

> 🔒 **Міркування щодо безпеки**: Наразі дані передаються через HTTP, що не є безпечним для продакшну. У реальних додатках завжди використовуйте HTTPS для шифрування передачі даних. Дізнайтеся більше про [безпеку HTTPS](https://en.wikipedia.org/wiki/HTTPS) і чому це важливо для захисту даних користувачів.

### 🔄 **Педагогічна перевірка**
**Інтеграція сучасного JavaScript**: Перевірте своє розуміння асинхронної обробки форм:
- ✅ Як `event.preventDefault()` змінює стандартну поведінку форми?
- ✅ Чому API FormData є більш ефективним, ніж ручний збір полів?
- ✅ Як шаблони async/await покращують читабельність коду?
- ✅ Яку роль відіграє обробка помилок у досвіді користувача?

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

**Професійні шаблони**: Ви реалізували:
- **Принцип єдиної відповідальності**: Функції мають чіткі, сфокусовані цілі
- **Межі помилок**: Блоки try/catch запобігають збоям додатка
- **Зворотний зв'язок для користувача**: Стан завантаження та повідомлення про успіх/помилки
- **Трансформація даних**: FormData у JSON для комунікації з сервером

## Всеосяжна перевірка форм

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

Оптимальний підхід поєднує перевірку на рівні браузера для миттєвого зворотного зв'язку, перевірку JavaScript для покращеного досвіду користувача та перевірку на сервері для безпеки та цілісності даних. Ця надмірність забезпечує як задоволення користувачів, так і захист системи.

### Розуміння рівнів перевірки

```mermaid
graph TD
    A[User Input] --> B[HTML5 Validation]
    B --> C[Custom JavaScript Validation]
    C --> D[Client-Side Complete]
    D --> E[Server-Side Validation]
    E --> F[Data Storage]
    
    B -->|Invalid| G[Browser Error Message]
    C -->|Invalid| H[Custom Error Display]
    E -->|Invalid| I[Server Error Response]
```

**Стратегія багаторівневої перевірки:**
- **Перевірка HTML5**: Миттєві перевірки на рівні браузера
- **Перевірка JavaScript**: Користувацька логіка та досвід користувача
- **Перевірка на сервері**: Остаточна безпека та перевірка цілісності даних
- **Прогресивне покращення**: Працює навіть якщо JavaScript вимкнено

### Атрибути перевірки HTML5

**Сучасні інструменти перевірки у вашому розпорядженні:**

| Атрибут | Призначення | Приклад використання | Поведінка браузера |
|---------|-------------|----------------------|--------------------|
| `required` | Обов'язкові поля | `<input required>` | Запобігає порожньому надсиланню |
| `minlength`/`maxlength` | Обмеження довжини тексту | `<input maxlength="20">` | Забезпечує обмеження символів |
| `min`/`max` | Числові діапазони | `<input min="0" max="1000">` | Перевіряє межі чисел |
| `pattern` | Користувацькі правила regex | `<input pattern="[A-Za-z]+">` | Відповідає певним форматам |
| `type` | Перевірка типу даних | `<input type="email">` | Перевірка специфічного формату |

### Стилізація перевірки за допомогою CSS

**Створіть візуальний зворотний зв'язок для станів перевірки:**

```css
/* Valid input styling */
input:valid {
  border-color: #28a745;
  background-color: #f8fff9;
}

/* Invalid input styling */
input:invalid {
  border-color: #dc3545;
  background-color: #fff5f5;
}

/* Focus states for better accessibility */
input:focus:valid {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

input:focus:invalid {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
```

**Що досягають ці візуальні підказки:**
- **Зелені рамки**: Вказують на успішну перевірку, як зелене світло в центрі управління
- **Червоні рамки**: Сигналізують про помилки перевірки, які потребують уваги
- **Підсвічування фокусу**: Забезпечує чіткий візуальний контекст для поточного місця введення
- **Послідовна стилізація**: Встановлює передбачувані шаблони інтерфейсу, які користувачі можуть вивчити

> 💡 **Порада**: Використовуйте псевдокласи CSS `:valid` і `:invalid`, щоб забезпечити миттєвий візуальний зворотний зв'язок під час введення, створюючи чуйний і корисний інтерфейс.

### Реалізація всеосяжної перевірки

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

```html
<form id="registerForm" method="POST" novalidate>
  <div class="form-group">
    <label for="user">Username <span class="required">*</span></label>
    <input id="user" name="user" type="text" required 
           minlength="3" maxlength="20" 
           pattern="[a-zA-Z0-9_]+" 
           autocomplete="username"
           title="Username must be 3-20 characters, letters, numbers, and underscores only">
    <small class="form-text">Choose a unique username (3-20 characters)</small>
  </div>
  
  <div class="form-group">
    <label for="currency">Currency <span class="required">*</span></label>
    <input id="currency" name="currency" type="text" required 
           value="$" maxlength="3" 
           pattern="[A-Z$€£¥₹]+" 
           title="Enter a valid currency symbol or code">
    <small class="form-text">Currency symbol (e.g., $, €, £)</small>
  </div>
  
  <div class="form-group">
    <label for="description">Account Description</label>
    <input id="description" name="description" type="text" 
           maxlength="100" 
           placeholder="Personal savings, checking, etc.">
    <small class="form-text">Optional description (up to 100 characters)</small>
  </div>
  
  <div class="form-group">
    <label for="balance">Starting Balance</label>
    <input id="balance" name="balance" type="number" 
           value="0" min="0" step="0.01" 
           title="Enter a positive number for your starting balance">
    <small class="form-text">Initial account balance (minimum $0.00)</small>
  </div>
  
  <button type="submit">Create Account</button>
</form>
```

**Розуміння покращеної перевірки:**
- **Поєднує** індикатори обов'язкових полів із корисними описами
- **Включає** атрибути `pattern` для перевірки формату
- **Надає** атрибути `title` для доступності та підказок
- **Додає** допоміжний текст для керування введенням користувача
- **Використовує** семантичну структуру HTML для кращої доступності

### Розширені правила перевірки

**Що досягає кожне правило перевірки:**

| Поле | Правила перевірки | Користувацька перевага |
|------|-------------------|-----------------------|
| Ім'я користувача | `required`, `minlength="3"`, `maxlength="20"`, `pattern="[a-zA-Z0-9_]+"` | Забезпечує дійсні, унікальні ідентифікатори |
| Валюта | `required`, `maxlength="3"`, `pattern="[A-Z$€£¥₹]+"` | Приймає загальні символи валюти |
| Баланс | `min="0"`, `step="0.01"`, `type="number"` | Запобігає негативним балансам |
| Опис | `maxlength="100"` | Розумні обмеження довжини |

### Тестування поведінки перевірки

**Спробуйте ці сценарії перевірки:**
1. **Надішліть** форму з порожніми обов'язковими полями
2. **Введіть** ім'я користувача коротше 3 символів
3. **Спробуйте** спеціальні символи в полі імені користувача
4. **Введіть** негативну суму балансу

![Скріншот, що показує помилку перевірки при спробі надіслати форму](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.uk.png)

**Що ви спостерігатимете:**
- **Браузер відображає** нативні повідомлення про перевірку
- **Зміни стилізації** на основі станів `:valid` і `:invalid`
- **Надсилання форми** блокується, поки всі перевірки не пройдуть
- **Фокус автоматично** переміщується на перше недійсне поле

### Перевірка на стороні клієнта та сервера

```mermaid
graph LR
    A[Client-Side Validation] --> B[Instant Feedback]
    A --> C[Better UX]
    A --> D[Reduced Server Load]
    
    E[Server-Side Validation] --> F[Security]
    E --> G[Data Integrity]
    E --> H[Business Rules]
    
    A -.-> I[Both Required]
    E -.-> I
```

**Чому потрібні обидва рівні:**
- **Перевірка на стороні клієнта**: Забезпечує миттєвий зворотний зв'язок і покращує досвід користувача
- **Перевірка на сервері**: Гарантує безпеку та обробляє складні бізнес-правила
- **Комбінований підхід**: Створює надійні, зручні та безпечні додатки
- **Прогресивне покращення**: Працює навіть якщо JavaScript вимкнено

> 🛡️ **Нагадування про безпеку**: Ніколи не довіряйте лише перевірці на стороні клієнта! Зловмисники можуть обійти перевірки на клієнті, тому перевірка на сервері є важливою для безпеки та цілісності даних.

### ⚡ **Що ви можете зробити за наступні 5 хвилин**
- [ ] Протестуйте вашу форму з недійсними даними, щоб побачити повідомлення про перевірку
- [ ] Спробуйте надіслати форму з вимкненим JavaScript, щоб побачити перевірку HTML5
- [ ] Відкрийте DevTools браузера та перевірте дані форми, які надсилаються на сервер
- [ ] Експериментуйте з різними типами введення, щоб побачити зміни клавіатури на мобільних пристроях

### 🎯 **Що ви можете досягти за цю годину**
- [ ] Завершіть тест після уроку та зрозумійте концепти обробки форм
- [ ] Реалізуйте виклик перевірки з реальним зворотним зв'язком
- [ ] Додайте стилізацію CSS для створення професійних форм
- [ ] Створіть обробку помилок для дублювання імен користувачів та помилок сервера
- [ ] Додайте поля підтвердження пароля з перевіркою відповідності

### 📅 **Ваш тижневий шлях до майстерності форм**
- [ ] Завершіть повний банківський додаток із розширеними функціями форм
- [ ] Реалізуйте можливості завантаження файлів для фотографій профілю або документів
- [ ] Додайте багатокрокові форми з індикаторами прогресу та управлінням станом
- [ ] Створіть динамічні форми, які адаптуються на основі вибору користувача
- [ ] Реалізуйте автозбереження форм та відновлення для кращого досвіду користувача
- [ ] Додайте розширену перевірку, як-от перевірку електронної пошти та форматування номерів телефону

### 🌟 **Ваш місячний шлях до майстерності фронтенд-розробки**
- [ ] Створіть складні додатки форм із умовною логікою та робочими процесами
- [ ] Вивчіть бібліотеки та фреймворки форм для швидкої розробки
- [ ] Опануйте рекомендації щодо доступності та принципи інклюзивного дизайну
- [ ] Реалізуйте інтернаціоналізацію та локалізацію для глобальних форм
- [ ] Створіть бібліотеки компонентів форм та системи дизайну
- [ ] Внесіть свій вклад у проекти з відкритим кодом форм та поділіться найкращими практиками

## 🎯 Ваш графік майстерності розробки форм

```mermaid
timeline
    title Form Development & User Experience Learning Progression
    
    section HTML Foundation (15 minutes)
        Semantic Forms: Form elements
                      : Input types
                      : Labels and accessibility
                      : Progressive enhancement
        
    section JavaScript Integration (25 minutes)
        Event Handling: Form submission
                      : Data collection
                      : AJAX communication
                      : Async/await patterns
        
    section Validation Systems (35 minutes)
        Multi-layer Security: HTML5 validation
                            : Client-side logic
                            : Server-side verification
                            : Error handling
        
    section User Experience (45 minutes)
        Interface Polish: Loading states
                        : Success messaging
                        : Error recovery
                        : Accessibility features
        
    section Advanced Patterns (1 week)
        Professional Forms: Dynamic validation
                          : Multi-step workflows
                          : File uploads
                          : Real-time feedback
        
    section Enterprise Skills (1 month)
        Production Applications: Form libraries
                               : Testing strategies
                               : Performance optimization
                               : Security best practices
```

### 🛠️ Підсумок вашого інструментарію для розробки форм

Після завершення цього уроку ви опанували:
- **HTML5 форми**: Семантична структура, типи введення та функції доступності
- **Обробка форм JavaScript**: Управління подіями, збір даних та AJAX-комунікація
- **Архітектура перевірки**: Багаторівнева перевірка для безпеки та досвіду користувача
- **Асинхронне програмування**: Сучасний Fetch API та шаблони async/await
- **Управління помилками**: Всеосяжна обробка помилок та
**Запит:** Створіть повну систему перевірки форми реєстрації, яка включає: 1) Миттєвий зворотний зв'язок щодо перевірки кожного поля під час введення користувачем, 2) Користувацькі повідомлення про помилки, які з'являються під кожним полем введення, 3) Поле підтвердження пароля з перевіркою відповідності, 4) Візуальні індикатори (наприклад, зелені галочки для правильних полів і червоні попередження для неправильних), 5) Кнопка "Надіслати", яка стає активною лише тоді, коли всі перевірки пройдені. Використовуйте атрибути перевірки HTML5, CSS для стилізації станів перевірки та JavaScript для інтерактивної поведінки.

Дізнайтеся більше про [режим агента](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) тут.

## 🚀 Виклик

Показати повідомлення про помилку в HTML, якщо користувач вже існує.

Ось приклад того, як може виглядати фінальна сторінка входу після невеликого стилювання:

![Скріншот сторінки входу після додавання стилів CSS](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.uk.png)

## Тест після лекції

[Тест після лекції](https://ff-quizzes.netlify.app/web/quiz/44)

## Огляд і самостійне навчання

Розробники стали дуже креативними у своїх зусиллях щодо створення форм, особливо стосовно стратегій перевірки. Дізнайтеся про різні потоки форм, переглядаючи [CodePen](https://codepen.com); чи можете ви знайти цікаві та надихаючі форми?

## Завдання

[Стилізуйте ваш додаток банку](assignment.md)

---

**Відмова від відповідальності**:  
Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.