Форма — это место, где пользователь совершает действие: оставляет заявку, пишет комментарий, создает аккаунт. Если форма неудобная, пользователь просто уходит.

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

Шаг 1. Создаем каркас формы

Используем form, указываем method и action. Кнопка отправки должна быть с type="submit".

<form class="signup-form" action="/signup" method="post" novalidate>
  <button type="submit">Создать аккаунт</button>
</form>

Шаг 2. Добавляем поля и корректные label

У каждого поля должен быть label, связанный через for и id. Это улучшает доступность и кликабельность.

<form class="signup-form" action="/signup" method="post" novalidate>
  <div class="field">
    <label for="name">Имя</label>
    <input id="name" name="name" type="text" autocomplete="name" required />
  </div>

  <div class="field">
    <label for="email">Email</label>
    <input id="email" name="email" type="email" autocomplete="email" required />
  </div>

  <div class="field">
    <label for="password">Пароль</label>
    <input id="password" name="password" type="password" minlength="8" required />
  </div>

  <button type="submit">Создать аккаунт</button>
</form>

Шаг 3. Поля выбора и длинного текста

Для выбора из списка используем select, для сообщения — textarea.

<div class="field">
  <label for="role">Роль</label>
  <select id="role" name="role">
    <option value="student">Новичок</option>
    <option value="junior">Junior</option>
    <option value="other">Другое</option>
  </select>
</div>

<div class="field">
  <label for="about">О себе</label>
  <textarea id="about" name="about" rows="4"></textarea>
</div>

Шаг 4. Добавляем базовые стили формы

.signup-form {
  max-width: 420px;
  display: grid;
  gap: 14px;
}

.field {
  display: grid;
  gap: 6px;
}

input,
select,
textarea,
button {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
}

button {
  background: #111827;
  color: #ffffff;
  cursor: pointer;
}

Частые ошибки

  • Плейсхолдер вместо настоящего label.
  • Нет name у полей, из-за чего данные не уходят на сервер.
  • Неправильные type у input.
  • Кнопка отправки без type="submit".

Мини-чеклист

  • Каждое поле имеет label.
  • У каждого поля есть name.
  • Типы полей соответствуют данным.
  • Поля читаемы и удобны на мобильном экране.

Такой базовый шаблон покрывает 80% повседневных задач с формами.

Обложка книги JavaScript с нуля: учимся программировать, создавая игры

Книга по JavaScript для начинающих

«JavaScript с нуля: учимся программировать, создавая игры»

Пошаговый формат с маленькими практическими задачами: от базового синтаксиса до первых игровых механик без перегруза теорией.

Читать книгу на ЛитРес →