History

softchris 9837770ac1 🌐 Update translations via Co-op Translator		1 month ago
..
README.md	🌐 Update translations via Co-op Translator	1 month ago
assignment.md	🌐 Update translations via Co-op Translator	1 month ago

README.md

Unescape Escape

Создание банковского приложения. Часть 2: Форма входа и регистрации

Тест перед лекцией

Вы когда-нибудь заполняли форму онлайн и сталкивались с ошибкой формата электронной почты? Или теряли все введенные данные после нажатия кнопки "Отправить"? Наверняка, такие ситуации знакомы многим.

Формы — это мост между пользователями и функционалом вашего приложения. Как диспетчеры воздушного движения используют строгие протоколы для безопасного управления самолетами, так и хорошо спроектированные формы предоставляют четкую обратную связь и предотвращают дорогостоящие ошибки. Плохо сделанные формы, напротив, могут отпугнуть пользователей быстрее, чем недоразумение в переполненном аэропорту.

В этом уроке мы превратим ваше статическое банковское приложение в интерактивное. Вы научитесь создавать формы, которые проверяют ввод данных, взаимодействуют с серверами и предоставляют полезную обратную связь. Это как создание интерфейса управления, который позволяет пользователям ориентироваться в функциях вашего приложения.

К концу урока у вас будет готовая система входа и регистрации с проверкой данных, которая поможет пользователям избежать ошибок и добиться успеха.

Предварительные требования

Прежде чем приступить к созданию форм, убедитесь, что у вас все настроено правильно. Этот урок продолжает предыдущий, поэтому, если вы его пропустили, возможно, стоит вернуться и сначала освоить основы.

Необходимая настройка

Компонент	Статус	Описание
HTML-шаблоны	✅ Обязательно	Основная структура банковского приложения
Node.js	✅ Обязательно	Среда выполнения JavaScript для сервера
Сервер Bank API	✅ Обязательно	Бэкенд для хранения данных

💡 Совет для разработчиков: Вам нужно будет одновременно запустить два отдельных сервера — один для фронтенда банковского приложения, а другой для бэкенда API. Такая настройка отражает реальную разработку, где фронтенд и бэкенд работают независимо.

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

Ваша среда разработки будет включать:

Сервер фронтенда: Обслуживает ваше банковское приложение (обычно порт 3000)
Сервер API бэкенда: Обрабатывает хранение и извлечение данных (порт 5000)
Оба сервера могут работать одновременно без конфликтов

Проверка подключения к API:

curl http://localhost:5000/api
# Expected response: "Bank API v1.0.0"

Если вы видите ответ с версией API, можно продолжать!

Понимание HTML-форм и элементов управления

HTML-формы — это способ общения пользователей с вашим веб-приложением. Представьте их как телеграфную систему, которая соединяла отдаленные места в XIX веке — это протокол связи между намерениями пользователя и ответом приложения. При правильном проектировании они помогают избежать ошибок, направляют формат ввода и предоставляют полезные подсказки.

Современные формы значительно сложнее, чем простые текстовые поля. HTML5 ввел специализированные типы ввода, которые автоматически проверяют электронную почту, формат чисел и выбор даты. Эти улучшения повышают доступность и удобство использования на мобильных устройствах.

Основные элементы формы

Основные элементы, которые нужны каждой форме:

<!-- 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!

Типы кнопок и их поведение

<!-- 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-форм. Начнем с базовой структуры и постепенно добавим функции доступности и проверки.

<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, для улучшения пользовательского опыта
Включает novalidate для обработки проверки с помощью JavaScript вместо стандартных настроек браузера

Важность правильных меток

Почему метки важны для современного веб-разработки:

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 и улучшенную доступность.

<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 для отправки. Это поможет вам понять, как пользователи экранных читалок взаимодействуют с вашими формами.

Понимание методов отправки формы

Когда кто-то заполняет вашу форму и нажимает "Отправить", данные должны куда-то отправиться — обычно на сервер, который их сохранит. Существует несколько способов, как это может произойти, и знание того, какой из них использовать, поможет избежать проблем в будущем.

Давайте посмотрим, что происходит, когда кто-то нажимает кнопку отправки.

Поведение формы по умолчанию

Сначала давайте посмотрим, что происходит при базовой отправке формы:

Протестируйте текущие формы:

Нажмите кнопку Зарегистрироваться в вашей форме
Обратите внимание на изменения в адресной строке браузера
Заметьте, как страница перезагружается, а данные появляются в URL

Сравнение методов HTTP

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:

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

Что делает эта настройка:

Направляет отправку формы на конечную точку вашего API
Использует метод POST для безопасной передачи данных
Включает novalidate для обработки проверки с помощью JavaScript

Тестирование отправки формы

Следуйте этим шагам для тестирования вашей формы:

Заполните форму регистрации своими данными
Нажмите кнопку "Создать аккаунт"
Наблюдайте за ответом сервера в вашем браузере

Что вы должны увидеть:

Перенаправление браузера на URL конечной точки API
Ответ в формате JSON, содержащий данные вашего нового аккаунта
Подтверждение сервера, что аккаунт успешно создан

🧪 Время экспериментов: Попробуйте зарегистрироваться снова с тем же именем пользователя. Какой ответ вы получите? Это поможет вам понять, как сервер обрабатывает дублирующиеся данные и условия ошибок.

Понимание ответов JSON

Когда сервер успешно обрабатывает вашу форму:

{
  "user": "john_doe",
  "currency": "$",
  "description": "Personal savings",
  "balance": 100,
  "id": "unique_account_id"
}

Этот ответ подтверждает:

Создание нового аккаунта с указанными вами данными
Присвоение уникального идентификатора для дальнейшего использования
Возврат всей информации об аккаунте для проверки
Указание на успешное сохранение данных в базе

Современная обработка форм с помощью JavaScript

Традиционная отправка форм вызывает полное обновление страницы, как ранние космические миссии требовали полного сброса системы для корректировки курса. Такой подход нарушает пользовательский опыт и теряет состояние приложения.

Обработка форм с помощью JavaScript работает как современные системы навигации космических аппаратов — выполняя корректировки в реальном времени без потери контекста. Мы можем перехватывать отправку форм, предоставлять мгновенную обратную связь, аккуратно обрабатывать ошибки и обновлять интерфейс на основе ответов сервера, сохраняя положение пользователя в приложении.

Почему стоит избегать перезагрузки страницы?

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:

<!-- Remove the action attribute and add event handling -->
<form id="registerForm" method="POST" novalidate>

Добавьте логику регистрации в ваш файл app.js:

// 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 предоставляет мощные возможности для работы с формами:

// 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:

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:

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 - Понимание асинхронных JavaScript паттернов для современного веб-разработки.

Ключевые концепции для общения с сервером:

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

Завершение функции регистрации

Давайте объединим все вместе и создадим полноценную, готовую к производству функцию регистрации:

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';
  }
}

Этот улучшенный вариант включает:

Предоставляет визуальную обратную связь во время отправки формы
Отключает кнопку отправки, чтобы предотвратить повторные отправки
Обрабатывает как ожидаемые, так и неожиданные ошибки
Показывает удобные для пользователя сообщения об успехе и ошибках
Сбрасывает форму после успешной регистрации
Восстанавливает состояние интерфейса независимо от результата

Тестирование вашей реализации

Откройте инструменты разработчика в браузере и протестируйте регистрацию:

Откройте консоль браузера (F12 → вкладка Console)
Заполните форму регистрации
Нажмите "Создать аккаунт"
Наблюдайте за сообщениями в консоли и обратной связью для пользователя

Что вы должны увидеть:

Состояние загрузки появляется на кнопке отправки
Логи консоли показывают подробную информацию о процессе
Сообщение об успехе появляется при успешном создании аккаунта
Форма автоматически сбрасывается после успешной отправки

🔒 Соображения безопасности: В настоящее время данные передаются через HTTP, что небезопасно для использования в производстве. В реальных приложениях всегда используйте HTTPS для шифрования передачи данных. Узнайте больше о безопасности HTTPS и почему это важно для защиты данных пользователей.

Комплексная проверка формы

Проверка формы предотвращает неприятный опыт обнаружения ошибок только после отправки. Как и множество резервных систем на Международной космической станции, эффективная проверка использует несколько уровней проверки для обеспечения безопасности.

Оптимальный подход сочетает проверку на уровне браузера для мгновенной обратной связи, проверку на уровне JavaScript для улучшения пользовательского опыта и серверную проверку для обеспечения безопасности и целостности данных. Такая многослойная система гарантирует как удовлетворение пользователей, так и защиту системы.

Понимание уровней проверки

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`	Пользовательские правила регулярных выражений	`<input pattern="[A-Za-z]+">`	Проверяет соответствие определенным форматам
`type`	Проверка типа данных	`<input type="email">`	Проверка формата данных

Стилизация проверки с помощью 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, чтобы обеспечить мгновенную визуальную обратную связь во время ввода, создавая отзывчивый и удобный интерфейс.

Реализация комплексной проверки

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

<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"`	Разумные ограничения длины текста

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

Попробуйте следующие сценарии проверки:

Отправьте форму с пустыми обязательными полями
Введите имя пользователя короче 3 символов
Попробуйте использовать специальные символы в поле имени пользователя
Введите отрицательное значение баланса

Что вы заметите:

Браузер отображает встроенные сообщения о проверке
Стили меняются в зависимости от состояний :valid и :invalid
Отправка формы блокируется, пока все проверки не будут пройдены
Фокус автоматически перемещается на первое поле с ошибкой

Проверка на стороне клиента и сервера

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 для интерактивного поведения.

Узнайте больше о режиме агента здесь.

🚀 Вызов

Покажите сообщение об ошибке в HTML, если пользователь уже существует.

Вот пример того, как может выглядеть итоговая страница входа после небольшой стилизации:

Викторина после лекции

Обзор и самостоятельное изучение

Разработчики проявляют большую креативность в создании форм, особенно в отношении стратегий проверки. Узнайте о различных подходах к созданию форм, изучив CodePen; сможете ли вы найти интересные и вдохновляющие примеры форм?

Задание

Стилизуйте ваше банковское приложение

Отказ от ответственности:
Этот документ был переведен с использованием сервиса автоматического перевода Co-op Translator. Несмотря на наши усилия обеспечить точность, автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникшие в результате использования данного перевода.

README.md Unescape Escape