Что добавлял в форму?

Что я добавлял в формы на проектах?

На разных проектах приходилось решать разные задачи по улучшению форм. Я разделю ответ на несколько ключевых направлений, которые охватывают функциональность, UX/UI, доступность и безопасность.

1. Улучшение пользовательского опыта (UX) и валидации

• Валидация в реальном времени (on-the-fly validation): Добавлял проверку полей не только при отправке формы (onSubmit), но и при потере фокуса (onBlur) или в процессе ввода (с дебаунсом для производительности). Это дает мгновенную обратную связь.
• Кастомные сообщения об ошибках и состояния: Вместо стандартных браузерных alert или тултипов создавал визуально интегрированные в дизайн блоки с понятными сообщениями. Использовал CSS-классы (is-valid, is-invalid) или data-атрибуты для стилизации.

  // Пример в React: состояние и валидация
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');
  
  const handleEmailChange = (e) => {
      const value = e.target.value;
      setEmail(value);
      // Валидация с дебаунсом
      if (!/\S+@\S+\.\S+/.test(value)) {
          setError('Введите корректный email');
      } else {
          setError('');
      }
  };
  
  return (
      <div className={`form-group ${error ? 'invalid' : ''}`}>
          <input type="email" value={email} onChange={handleEmailChange} />
          {error && <div className="error-message">{error}</div>}
      </div>
  );
  

• Визуальные индикаторы прогресса: Для многошаговых форм (например, оформление заказа) добавлял прогресс-бар или пошаговую навигацию с четким указанием текущего этапа.
• Умные подсказки и автодополнение: Интегрировал автокомплит для полей адреса, имени, используя API (например, Dadata). Добавлял datalist для стандартизированных данных.

2. Доступность (A11y) — критически важный аспект

• Семантическая разметка: Всегда использовал правильные HTML-теги (<form>, <label> с for, <fieldset> с <legend> для группировки радиокнопок).
• ARIA-атрибуты: Добавлял aria-label, aria-describedby (для связи поля с пояснением или ошибкой), aria-invalid для программного объявления состояния валидации.

  <!-- Пример доступного поля с ошибкой -->
  <label for="phone">Телефон</label>
  <input
      type="tel"
      id="phone"
      name="phone"
      aria-describedby="phoneError"
      aria-invalid="true"
  />
  <div id="phoneError" class="error" role="alert">
      Неверный формат телефона.
  </div>
  

• Управление фокусом: После отправки или при возникновении ошибки программно перемещал фокус на первое проблемное поле или заголовок блока с ошибками, чтобы помочь пользователям скринридеров.
• Достаточный цветовой контраст и визуальные индикаторы: Помимо цвета, ошибки дублировались иконками или текстом.

3. Функциональные улучшения

• Маски ввода (Input Masking): Для номеров телефонов, ИНН, банковских карт использовал библиотеки (например, imaskjs) или кастомные решения на onInput.
• Загрузка файлов с предпросмотром: Для аватаров, документов — реализовывал drag-and-drop, валидацию по размеру и типу файла, отображение миниатюры.

  // Пример обработки файла с предпросмотром
  const handleFileSelect = (event) => {
      const file = event.target.files[0];
      if (!file.type.match('image.*')) {
          alert('Пожалуйста, выберите изображение.');
          return;
      }
      const reader = new FileReader();
      reader.onload = (e) => {
          document.getElementById('preview').src = e.target.result;
      };
      reader.readAsDataURL(file);
  };
  

• Условные поля: Показ/скрытие дополнительных полей в зависимости от выбора в селекте или чекбоксе (например, "Доставить по адресу" → появляются поля адреса).
• Управление состоянием сложных форм: Для нетривиальных форм использовал сторонние библиотеки (Formik, React Hook Form + Yup для валидации) или кастомные React-контексты/редьюсеры, что упрощает валидацию, сабмит и отслеживание состояния.

4. Оптимизация и безопасность

• Защита от двойного сабмита: Блокировка кнопки отправки (disabled или loading-состояние) после первого нажатия.
• Защита от XSS и SQL-инъекций: Хотя основная защита на бэке, всегда проводил санитизацию (очистку) пользовательского ввода на фронтенде, экранирование HTML-символов.
• Токены CSRF-защиты: Добавлял скрытые поля с токенами, которые генерирует бэкенд, для защиты от межсайтовой подделки запросов.

5. Интеграции и тестирование

• Капча (reCAPTCHA v2/v3 от Google): Для защиты от ботов, особенно в формах регистрации и обратной связи.
• Интеграция с платежными системами: Поля для ввода данных карты часто требовали подключения к Tinkoff Pay, ЮKassa или другим эквайрингам.
• Юнит- и E2E-тесты: Покрывал логику валидации юнит-тестами (Jest), а сценарии заполнения — E2E-тестами (Cypress, Playwright).

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