Welcome to my Form
     

       

         Name


         
       
       

         Email
         
       
       

         Message
         
       
       Submit
     

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Mulish", sans-serif;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

main {
  width: 40rem;
  box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
  margin: 0 auto;
  height: 45rem;
  border-radius: 2rem;
  padding: 2rem;
}

h1 {
  text-align: center;
  font-size: 3rem;
  padding: 1rem 2rem;
}

form {
  margin: 3rem 0;
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}

.input__container {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
}

.input__container label { font-size: 1.6rem; }

.input__container input,
textarea {
  padding: 1rem 2rem;
  border-radius: 5px;
  border: 1px solid #555;
  resize: none;
}

button {
  align-self: flex-start;
  padding: 1rem 2rem;
  border-radius: 5px;
  border: none;
  background: #333;
  color: #fff;
  cursor: pointer;
}

Подпишите обработчик события submit:

form.addEventListener("submit", function (event) { });

Запретите перезагрузку страницы при отправке и получите значение email:

form.addEventListener("submit", function (event) {
    // Отменяем стандартное поведение формы
    event.preventDefault();
    // Берём значение поля email, введённое пользователем
    const email = document.getElementById("email").value;
});

Добавьте регулярное выражение для проверки email и покажите сообщение в зависимости от результата:

form.addEventListener("submit", function (event) {
    // Отменяем стандартное поведение формы
    event.preventDefault();

    // Берём значение поля email, введённое пользователем
    const email = document.getElementById("email").value;

    // Проверяем email с помощью простого regex-выражения
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    if (!emailPattern.test(email)) {
      alert("Неверный формат email");
      return;
    }

    // Если всё успешно, показываем сообщение об отправке
    alert("Форма успешно отправлена");
});

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

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

Ничто не заменит тщательное тестирование. Пробуйте различные сценарии:

• Пустые поля — форма не должна отправляться.
• Некорректный email — должно появляться предупреждение.
• Длинные сообщения — textarea не должна ломать верстку.
• Проверка на мобильных устройствах и в разных браузерах.

Добавьте инструменты разработчика в браузере (Console, Network) чтобы отлавливать ошибки JavaScript и следить за сетевыми запросами.

Когда такой подход не подходит

• Если требуется сложная логика проверки (валидация по внешним сервисам, антифрод), одного client-side недостаточно — добавьте серверную проверку.
• Если нужны вложения (файлы большого объёма), потребуется дополнительная обработка на сервере и прогресс-бар.

Альтернативные подходы

• Формы через сторонние сервисы (Typeform, Google Forms) — быстрый запуск без бэкенда.
• Использование библиотек/фреймворков (React/Vue + Formik/Vuelidate) — для сложных интерфейсов.
• HTML5 + Constraint validation API для более богатой встроенной валидации.

Критерии приёмки

• Форма рендерится корректно в основных браузерах (Chrome, Firefox, Safari).
• Все обязательные поля отмечены и проверяются.
• Пользователь получает понятные ошибки при неверных данных.
• Отсутствуют JS-ошибки в консоли при отправке.

Чеклист по ролям

• Дизайнер:

  • Проверил визуальные состояния фокуса и ошибки.
  • Утвердил размеры и отступы для мобильной версии.

• Разработчик:

  • Подключил CSS и JS, добавил обработчики событий.
  • Реализовал серверную валидацию (если есть бэкенд).

• QA:

  • Протестировал кейсы позитив/негатив.
  • Проверил доступность (Tab, screen reader).

Набор тестов (пример)

1. Попытка отправить пустую форму — ожидается запрет отправки.
2. Ввод “user@” в поле email — ожидается сообщение об ошибке.
3. Ввод корректного email и сообщения — ожидается успех (alert или редирект).
4. Тест на мобильных: проверка расположения элементов и размера кликабельных областей.

Безопасность и конфиденциальность

Важно проверять данные на стороне сервера: клиентская валидация легко обходится. Если вы собираете персональные данные, убедитесь в соответствии локальным законам о защите данных (например, GDPR для ЕС): минимизируйте сбор данных, храните их безопасно и сообщайте пользователю цель сбора.

Важно: никогда не логируйте чувствительные данные в публичные логи.

Короткий глоссарий

• required — HTML-атрибут, отмечающий поле как обязательное.
• regex — регулярное выражение для проверки строк.
• textarea — многострочное текстовое поле.

Резюме

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

Важно: адаптируйте форму под реальные требования вашего проекта — иногда нужна интеграция с CRM, антиспамом или системой уведомлений.

Дополнительно: рассмотрите интеграцию с CAPTCHA и логированием попыток отправки, если ожидаете высокий объём спама.