# Создание банковского приложения. Часть 2: Форма входа и регистрации ## Тест перед лекцией [Тест перед лекцией](https://ff-quizzes.netlify.app/web/quiz/43) Вы когда-нибудь заполняли форму онлайн и сталкивались с ошибкой формата электронной почты? Или теряли все введенные данные после нажатия кнопки "Отправить"? Наверняка, такие ситуации знакомы многим. Формы — это мост между пользователями и функционалом вашего приложения. Как диспетчеры воздушного движения используют строгие протоколы для безопасного управления самолетами, так и хорошо спроектированные формы предоставляют четкую обратную связь и предотвращают дорогостоящие ошибки. Плохо сделанные формы, напротив, могут отпугнуть пользователей быстрее, чем недоразумение в переполненном аэропорту. В этом уроке мы превратим ваше статическое банковское приложение в интерактивное. Вы научитесь создавать формы, которые проверяют ввод данных, взаимодействуют с серверами и предоставляют полезную обратную связь. Это как создание интерфейса управления, который позволяет пользователям ориентироваться в функциях вашего приложения. К концу урока у вас будет готовая система входа и регистрации с проверкой данных, которая поможет пользователям избежать ошибок и добиться успеха. ## Предварительные требования Прежде чем приступить к созданию форм, убедитесь, что у вас все настроено правильно. Этот урок продолжает предыдущий, поэтому, если вы его пропустили, возможно, стоит вернуться и сначала освоить основы. ### Необходимая настройка | Компонент | Статус | Описание | |-----------|--------|-------------| | [HTML-шаблоны](../1-template-route/README.md) | ✅ Обязательно | Основная структура банковского приложения | | [Node.js](https://nodejs.org) | ✅ Обязательно | Среда выполнения JavaScript для сервера | | [Сервер Bank API](../api/README.md) | ✅ Обязательно | Бэкенд для хранения данных | > 💡 **Совет для разработчиков**: Вам нужно будет одновременно запустить два отдельных сервера — один для фронтенда банковского приложения, а другой для бэкенда API. Такая настройка отражает реальную разработку, где фронтенд и бэкенд работают независимо. ### Конфигурация сервера **Ваша среда разработки будет включать:** - **Сервер фронтенда**: Обслуживает ваше банковское приложение (обычно порт `3000`) - **Сервер API бэкенда**: Обрабатывает хранение и извлечение данных (порт `5000`) - **Оба сервера** могут работать одновременно без конфликтов **Проверка подключения к API:** ```bash curl http://localhost:5000/api # Expected response: "Bank API v1.0.0" ``` **Если вы видите ответ с версией API, можно продолжать!** --- ## Понимание HTML-форм и элементов управления HTML-формы — это способ общения пользователей с вашим веб-приложением. Представьте их как телеграфную систему, которая соединяла отдаленные места в XIX веке — это протокол связи между намерениями пользователя и ответом приложения. При правильном проектировании они помогают избежать ошибок, направляют формат ввода и предоставляют полезные подсказки. Современные формы значительно сложнее, чем простые текстовые поля. HTML5 ввел специализированные типы ввода, которые автоматически проверяют электронную почту, формат чисел и выбор даты. Эти улучшения повышают доступность и удобство использования на мобильных устройствах. ### Основные элементы формы **Основные элементы, которые нужны каждой форме:** ```html
``` **Что делает этот код:** - **Создает** контейнер формы с уникальным идентификатором - **Указывает** HTTP-метод для отправки данных - **Связывает** метки с полями ввода для доступности - **Определяет** кнопку отправки для обработки формы ### Современные типы ввода и атрибуты | Тип ввода | Назначение | Пример использования | |------------|---------|---------------| | `text` | Ввод текста | `` | | `email` | Проверка электронной почты | `` | | `password` | Скрытый ввод текста | `` | | `number` | Ввод чисел | `` | | `tel` | Номера телефонов | `` | > 💡 **Преимущество HTML5**: Использование специфических типов ввода обеспечивает автоматическую проверку, подходящие клавиатуры на мобильных устройствах и лучшую поддержку доступности без дополнительного JavaScript! ### Типы кнопок и их поведение ```html ``` **Что делает каждый тип кнопок:** - **Кнопки отправки**: Запускают отправку формы и отправляют данные на указанный сервер - **Кнопки сброса**: Восстанавливают все поля формы в их начальное состояние - **Обычные кнопки**: Не имеют стандартного поведения, требуют написания пользовательского JavaScript для выполнения функций > ⚠️ **Важное замечание**: Элемент `` является самозакрывающимся и не требует закрывающего тега. Современная практика — писать `` без косой черты. ### Создание формы входа Теперь давайте создадим практическую форму входа, которая демонстрирует современные практики HTML-форм. Начнем с базовой структуры и постепенно добавим функции доступности и проверки. ```html ``` **Разберем, что здесь происходит:** - **Структурирует** форму с помощью семантических элементов HTML5 - **Группирует** связанные элементы с использованием контейнеров `div` с осмысленными классами - **Связывает** метки с полями ввода через атрибуты `for` и `id` - **Добавляет** современные атрибуты, такие как `autocomplete` и `placeholder`, для улучшения пользовательского опыта - **Включает** `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

Register

``` **В приведенном выше коде мы:** - **Организовали** каждое поле в контейнеры `div` для лучшего стиля и макета - **Добавили** соответствующие атрибуты `autocomplete` для поддержки автозаполнения браузером - **Включили** полезный текст-заполнитель для направления ввода пользователя - **Установили** разумные значения по умолчанию с помощью атрибута `value` - **Применили** атрибуты проверки, такие как `required`, `maxlength` и `min` - **Использовали** `type="number"` для поля баланса с поддержкой десятичных чисел ### Исследование типов ввода и их поведения **Современные типы ввода предоставляют расширенные возможности:** | Функция | Преимущество | Пример | |---------|---------|----------| | `type="number"` | Цифровая клавиатура на мобильных устройствах | Упрощенный ввод баланса | | `step="0.01"` | Контроль точности десятичных чисел | Позволяет вводить копейки в валюте | | `autocomplete` | Автозаполнение браузера | Быстрое заполнение формы | | `placeholder` | Контекстные подсказки | Направляет ожидания пользователя | > 🎯 **Задача по доступности**: Попробуйте навигацию по формам, используя только клавиатуру! Используйте `Tab` для перехода между полями, `Space` для установки галочек и `Enter` для отправки. Это поможет вам понять, как пользователи экранных читалок взаимодействуют с вашими формами. ## Понимание методов отправки формы Когда кто-то заполняет вашу форму и нажимает "Отправить", данные должны куда-то отправиться — обычно на сервер, который их сохранит. Существует несколько способов, как это может произойти, и знание того, какой из них использовать, поможет избежать проблем в будущем. Давайте посмотрим, что происходит, когда кто-то нажимает кнопку отправки. ### Поведение формы по умолчанию Сначала давайте посмотрим, что происходит при базовой отправке формы: **Протестируйте текущие формы:** 1. Нажмите кнопку *Зарегистрироваться* в вашей форме 2. Обратите внимание на изменения в адресной строке браузера 3. Заметьте, как страница перезагружается, а данные появляются в URL ![Скриншот изменения URL браузера после нажатия кнопки "Зарегистрироваться"](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.ru.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
``` **Что делает эта настройка:** - **Направляет** отправку формы на конечную точку вашего API - **Использует** метод POST для безопасной передачи данных - **Включает** `novalidate` для обработки проверки с помощью JavaScript ### Тестирование отправки формы **Следуйте этим шагам для тестирования вашей формы:** 1. **Заполните** форму регистрации своими данными 2. **Нажмите** кнопку "Создать аккаунт" 3. **Наблюдайте** за ответом сервера в вашем браузере ![Окно браузера на адресе localhost:5000/api/accounts, показывающее JSON-строку с данными пользователя](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.ru.png) **Что вы должны увидеть:** - **Перенаправление браузера** на URL конечной точки API - **Ответ в формате JSON**, содержащий данные вашего нового аккаунта - **Подтверждение сервера**, что аккаунт успешно создан > 🧪 **Время экспериментов**: Попробуйте зарегистрироваться снова с тем же именем пользователя. Какой ответ вы получите? Это поможет вам понять, как сервер обрабатывает дублирующиеся данные и условия ошибок. ### Понимание ответов JSON **Когда сервер успешно обрабатывает вашу форму:** ```json { "user": "john_doe", "currency": "$", "description": "Personal savings", "balance": 100, "id": "unique_account_id" } ``` **Этот ответ подтверждает:** - **Создание** нового аккаунта с указанными вами данными - **Присвоение** уникального идентификатора для дальнейшего использования - **Возврат** всей информации об аккаунте для проверки - **Указание** на успешное сохранение данных в базе ## Современная обработка форм с помощью JavaScript Традиционная отправка форм вызывает полное обновление страницы, как ранние космические миссии требовали полного сброса системы для корректировки курса. Такой подход нарушает пользовательский опыт и теряет состояние приложения. Обработка форм с помощью JavaScript работает как современные системы навигации космических аппаратов — выполняя корректировки в реальном времени без потери контекста. Мы можем перехватывать отправку форм, предоставлять мгновенную обратную связь, аккуратно обрабатывать ошибки и обновлять интерфейс на основе ответов сервера, сохраняя положение пользователя в приложении. ### Почему стоит избегать перезагрузки страницы? ```mermaid sequenceDiagram participant User participant SPA participant Server User->>SPA: Submits form SPA->>Server: AJAX request Server-->>SPA: JSON response SPA->>User: Updates interface Note over User,SPA: No page reload! ``` **Преимущества обработки форм с помощью JavaScript:** - **Сохраняет** состояние приложения и контекст пользователя - **Предоставляет** мгновенную обратную связь и индикаторы загрузки - **Позволяет** динамическую обработку ошибок и проверку - **Создает** плавный, похожий на приложение пользовательский опыт - **Позволяет** условную логику на основе ответов сервера ### Переход от традиционных форм к современным **Проблемы традиционного подхода:** - **Перенаправляет** пользователей из вашего приложения - **Теряет** текущее состояние приложения и контекст - **Требует** полного обновления страницы для простых операций - **Предоставляет** ограниченный контроль над обратной связью пользователя **Преимущества современного подхода с JavaScript:** - **Оставляет** пользователей внутри вашего приложения - **Сохраняет** все состояние приложения и данные - **Позволяет** проверку и обратную связь в реальном времени - **Поддерживает** прогрессивное улучшение и доступность ### Реализация обработки форм с помощью JavaScript Давайте заменим традиционную отправку формы на современную обработку событий с помощью JavaScript: ```html ``` **Добавьте логику регистрации в ваш файл `app.js`:** ```javascript // Modern event-driven form handling function register() { const registerForm = document.getElementById('registerForm'); const formData = new FormData(registerForm); const data = Object.fromEntries(formData); const jsonData = JSON.stringify(data); console.log('Form data prepared:', data); } // Attach event listener when the page loads document.addEventListener('DOMContentLoaded', () => { const registerForm = document.getElementById('registerForm'); registerForm.addEventListener('submit', (event) => { event.preventDefault(); // Prevent default form submission register(); }); }); ``` **Разберем, что здесь происходит:** - **Предотвращает** стандартную отправку формы с помощью `event.preventDefault()` - **Извлекает** элемент формы с использованием современных методов DOM - **Получает** данные формы с помощью мощного API `FormData` - **Преобразует** FormData в обычный объект с помощью `Object.fromEntries()` - **Сериализует** данные в формат JSON для взаимодействия с сервером - **Логирует** обработанные данные для отладки и проверки ### Понимание API FormData **API FormData предоставляет мощные возможности для работы с формами:** ```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 по сравнению с устаревшими методами:** | Функция | Преимущество | Реализация | |---------|--------------|------------| | Основана на промисах | Чистый асинхронный код | `await fetch()` | | Настройка запросов | Полный контроль HTTP | Заголовки, методы, тело | | Обработка ответов | Гибкий парсинг данных | `.json()`, `.text()`, `.blob()` | | Обработка ошибок | Полный захват ошибок | Блоки try/catch | > 🎥 **Узнать больше**: [Учебник по Async/Await](https://youtube.com/watch?v=YwmlRkrxvkk) - Понимание асинхронных JavaScript паттернов для современного веб-разработки. **Ключевые концепции для общения с сервером:** - **Асинхронные функции** позволяют приостанавливать выполнение для ожидания ответа от сервера - **Ключевое слово await** делает асинхронный код похожим на синхронный - **Fetch API** предоставляет современные HTTP-запросы, основанные на промисах - **Обработка ошибок** гарантирует, что ваше приложение корректно реагирует на проблемы с сетью ### Завершение функции регистрации Давайте объединим все вместе и создадим полноценную, готовую к производству функцию регистрации: ```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.ru.png) **Что вы должны увидеть:** - **Состояние загрузки** появляется на кнопке отправки - **Логи консоли** показывают подробную информацию о процессе - **Сообщение об успехе** появляется при успешном создании аккаунта - **Форма автоматически сбрасывается** после успешной отправки > 🔒 **Соображения безопасности**: В настоящее время данные передаются через HTTP, что небезопасно для использования в производстве. В реальных приложениях всегда используйте HTTPS для шифрования передачи данных. Узнайте больше о [безопасности HTTPS](https://en.wikipedia.org/wiki/HTTPS) и почему это важно для защиты данных пользователей. ## Комплексная проверка формы Проверка формы предотвращает неприятный опыт обнаружения ошибок только после отправки. Как и множество резервных систем на Международной космической станции, эффективная проверка использует несколько уровней проверки для обеспечения безопасности. Оптимальный подход сочетает проверку на уровне браузера для мгновенной обратной связи, проверку на уровне 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` | Обязательные поля | `` | Предотвращает отправку пустой формы | | `minlength`/`maxlength` | Ограничения длины текста | `` | Устанавливает ограничения на количество символов | | `min`/`max` | Диапазоны чисел | `` | Проверяет границы чисел | | `pattern` | Пользовательские правила регулярных выражений | `` | Проверяет соответствие определенным форматам | | `type` | Проверка типа данных | `` | Проверка формата данных | ### Стилизация проверки с помощью 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
Choose a unique username (3-20 characters)
Currency symbol (e.g., $, €, £)
Optional description (up to 100 characters)
Initial account balance (minimum $0.00)
``` **Понимание улучшенной проверки:** - **Сочетает** индикаторы обязательных полей с полезными описаниями - **Включает** атрибуты `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.ru.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 отключен > 🛡️ **Напоминание о безопасности**: Никогда не полагайтесь только на проверку на стороне клиента! Злоумышленники могут обойти клиентские проверки, поэтому серверная проверка необходима для обеспечения безопасности и целостности данных. --- --- ## Вызов агента GitHub Copilot 🚀 Используйте режим Agent, чтобы выполнить следующий вызов: **Описание:** Улучшите форму регистрации, добавив комплексную проверку на стороне клиента и обратную связь для пользователя. Этот вызов поможет вам попрактиковаться в проверке форм, обработке ошибок и улучшении пользовательского опыта с помощью интерактивной обратной связи. **Задание:** Создайте полную систему проверки формы регистрации, которая включает: 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.ru.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). Несмотря на наши усилия обеспечить точность, автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникшие в результате использования данного перевода.