Формы

Что такое форма

Форма собирает данные от пользователя и отправляет их куда-то (на сервер, в функцию). Это самый старый интерактивный механизм веба, и он работает без JavaScript: браузер сам умеет собрать значения и отправить их.

<form action="/subscribe" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required />
  <button type="submit">Отправить</button>
</form>

При отправке браузер формирует запрос с email=ana@x.com и отправляет его на /subscribe. В Next action может быть сразу Server Action.

Из чего состоит форма

<button> внутри формы по умолчанию имеет type="submit". Кнопки, которые ничего не отправляют (открывают модалку, удаляют строку), получают type="button".

Типы input — и когда их использовать

Другие элементы: <textarea> (длинный текст), <select> + <option> (список), <fieldset> + <legend> (группа связанных полей).

checkbox, radio или select: один выбор из 2–5 видимых вариантов → radio; один из многих → select; несколько вариантов → checkbox-ы.

Нативная валидация

Состояние стилизуют через :invalid, :valid, :user-invalid (только после взаимодействия пользователя).

Проверка в браузере — для удобства пользователя, а не для безопасности. Её может обойти кто угодно → всегда проверяйте и на сервере.

Чтение данных в JS

form.addEventListener('submit', e => {
  e.preventDefault()
  const data = Object.fromEntries(new FormData(e.currentTarget))
})

FormData читает все поля с name — тот же объект получает Server Action. Как работать с формами в React (controlled, React Hook Form, Zod) — в теме Формы.

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

• Поле без name → значение пропадает при отправке.
• Поле без label (только placeholder) → недоступно, а подсказка исчезает при вводе.
• Кнопки без type, которые случайно отправляют форму.
• Проверка только на клиенте.

Коротко

• name решает, что отправится; label for + id связывают подпись.
• Правильный тип input = проверка + нужная клавиатура бесплатно.
• Всегда проверяйте и на сервере.

Официальные источники

• MDN — Web forms
• MDN — <input> types
• MDN — Client-side form validation
• MDN — FormData