Формы в HTML: form, input, label и проверка без JavaScript

Собрать форму из полей несложно, но потом выясняется: почта ушла пустой, флажок не пришёл, а кнопка «отмена» отправила форму. Почти всегда дело в двух атрибутах — name и type.

Форма в HTML — это <form> с полями внутри: <input>, <select>, <textarea> и кнопкой отправки. При отправке браузер собирает пары name=значение со всех полей, у которых есть name, и отправляет по адресу из action. Проверять заполнение он умеет сам, без JavaScript: хватит атрибутов required, type="email" и minlength.

Пример: запись на мастер-класс

Открой пример в песочнице HTML/CSS ссылкой под вторым блоком: разметка попадёт во вкладку index.html, стили — в styles.css. В песочнице форма никуда не уходит: вместо отправки консоль под результатом покажет, какие поля ушли бы на сервер. Заполни имя и почту и нажми «записаться» — в консоли появится Форма отправлена: name=…, email=…, workshop=turka, reminder=on.

HTML:

<form class="signup" action="/signup" method="post">
  <h1>Запись на мастер-класс</h1>

  <label for="name">Имя</label>
  <input id="name" name="name" type="text" required minlength="2" autocomplete="name">

  <label for="email">Почта</label>
  <input id="email" name="email" type="email" required autocomplete="email">

  <label for="workshop">Мастер-класс</label>
  <select id="workshop" name="workshop">
    <option value="turka">Кофе в турке</option>
    <option value="latte-art">Латте-арт</option>
  </select>

  <label class="check">
    <input name="reminder" type="checkbox" checked>
    напомнить за день
  </label>

  <button type="submit">записаться</button>
</form>

CSS:

body {
  margin: 0;
  padding: 1rem;
  font-family: system-ui, sans-serif;
}

.signup {
  display: grid;
  gap: 0.5rem;
  max-width: 20rem;
}

.signup h1 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}

input,
select,
button {
  padding: 0.5rem 0.75rem;
  border: 1px solid #c3c9d4;
  border-radius: 0.5rem;
  font: inherit;
}

input:user-invalid {
  border-color: #c62828;
}

.check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.check input {
  padding: 0;
}

button {
  margin-top: 0.5rem;
  border: 0;
  background: #3a86ff;
  color: #ffffff;
  cursor: pointer;
}

Как форма отправляет данные: form, action, method и name

action. Адрес, куда уйдут данные: action="/signup". Без него форма отправится на адрес текущей страницы.

method. get дописывает данные в адрес после знака вопроса, так устроены формы поиска: /search?q=кофе. post кладёт их в тело запроса, его берут для всего, что меняет данные на сервере: записи, входа, заказа.

name. Имя поля в отправленных данных. Поле без name браузер показывает и проверяет, но не отправляет. Если у почты нет name, сервер просто не узнает адрес.

Сам приём данных — уже работа сервера: прочитать пары, проверить их ещё раз и сохранить. Как это устроено, разобрано в статье про REST API.

Поля: input, select, textarea, флажки и переключатели

<input> — пустой элемент, его вид задаёт type:

select. Выпадающий список из <option>. Уходит value выбранного варианта, а не его текст: workshop=turka, хотя на экране «Кофе в турке».

textarea. Многострочный текст, например комментарий. В отличие от <input>, у него есть закрывающий тег, а значение по умолчанию пишут между тегами.

Переключатели. Чтобы из нескольких radio можно было выбрать только один, им дают одинаковый name и разные value: <input type="radio" name="size" value="m">.

Подписи: label

<label for="email"> связывают с полем через его id. Подпись тогда становится частью поля: щелчок по слову «Почта» ставит курсор в поле, а программа чтения с экрана называет подпись, когда человек попадает в поле. Второй способ — положить поле прямо внутрь <label>, как у флажка в примере: так в подпись можно щёлкнуть, чтобы поставить или снять галочку.

placeholder — серая подсказка внутри поля — подпись не заменяет: она исчезает, как только человек начинает печатать.

Проверка без JavaScript: required, type и :user-invalid

Браузер не даст отправить форму, пока поля не пройдут проверку, и сам покажет, что не так. Достаточно атрибутов:

• required — поле нельзя оставить пустым;
• type="email" — нужен адрес с @, type="url" — ссылка;
• minlength и maxlength — длина текста, min и max — границы числа или даты;
• pattern — своё правило в виде регулярного выражения, например pattern="[0-9]{6}" для индекса.

Подсветить ошибку помогает псевдокласс :user-invalid: он срабатывает, когда человек уже ввёл неверное значение и ушёл из поля. В примере так краснеет рамка почты, если ввести адрес без @. Старый :invalid красит поле сразу при загрузке, ещё до того, как в него что-то ввели.

Проверка в браузере — подсказка для человека, а не защита. Атрибуты можно убрать через инструменты разработчика или отправить данные в обход формы, поэтому сервер проверяет всё ещё раз.

Кнопки: submit, button и reset

submit — по умолчанию. <button> внутри формы без атрибута type отправляет её. Кнопка «отмена» без type тоже отправит форму — и это частая ошибка.

type=“button”. Обычная кнопка, которая ничего не отправляет: для неё пишут обработчик на JavaScript.

type=“reset”. Возвращает все поля к начальным значениям. Нужна редко: человек легко нажимает её по ошибке и теряет введённое.

Три правки, чтобы закрепить

Открой пример в песочнице и перед каждой правкой предскажи, что напишет консоль после отправки:

1. Убери у почты атрибут name="email". Форма отправится, но в консоли не будет email=…: поле без name не уходит.
2. Замени у почты type="email" на type="text" и введи anya. Форма уйдёт с email=anya: проверку адреса делал именно тип поля.
3. Сними флажок «напомнить за день». reminder=on из данных пропадёт: неотмеченный флажок не отправляется совсем.

Оформить поля по-своему помогут селекторы CSS, а задания с формами на JavaScript ждут в тренажёре HTML и CSS.