Формы

Зачем это нужно

Поиск, вход на сайт, регистрация, комментарий, заказ пиццы — всё это формы. Форма собирает данные от человека и отправляет их на сервер. HTML отвечает за то, какие поля есть и как они подписаны; что сервер сделает с данными, решает уже серверная программа.

Форма и поле

<form> — контейнер для полей. Самое частое поле — <input> (одиночный тег):

<form>
  <input type="text" name="query" placeholder="Что ищем?">
  <button>Найти</button>
</form>

Результат: поле для ввода с серой подсказкой «Что ищем?» и кнопка «Найти».

• type — вид поля;
• name — имя, под которым значение уйдёт на сервер. Без name поле не отправится!
• placeholder — подсказка внутри пустого поля (исчезает при вводе).

Типы полей <input>

type	Что это
text	обычный текст (по умолчанию)
email	почта — браузер проверит, есть ли @
password	пароль — символы скрыты точками
number	число, со стрелками вверх-вниз
tel	телефон — на смартфоне откроется цифровая клавиатура
date	дата — появится календарь
checkbox	флажок «да/нет»
radio	радиокнопка — один вариант из нескольких
color	выбор цвета

<input type="number" name="age" min="1" max="120">
<input type="date" name="birthday">

Результат: поле с числом (стрелками его нельзя увести за 1–120) и поле с календарём.

Подписи <label>

Каждому полю нужна подпись. Её связывают с полем двумя способами:

<!-- 1. через for и id -->
<label for="name">Имя</label>
<input type="text" id="name" name="name">

<!-- 2. обёрткой -->
<label>
  <input type="checkbox" name="agree"> Согласен с правилами
</label>

Результат: обычные надписи. Но теперь клик по надписи ставит курсор в поле (или ставит флажок), а программы чтения с экрана читают подпись вслух. for у подписи равен id поля.

Проверка данных

Браузер может сам проверить поля перед отправкой:

<input type="email" name="email" required>
<input type="password" name="pass" required minlength="8">

• required — поле обязательно;
• minlength / maxlength — сколько символов можно;
• min / max — пределы для чисел и дат.

Результат: если оставить поле пустым и нажать кнопку, браузер покажет «Заполните это поле» и не отправит форму.

Проверка в браузере — для удобства. Сервер всё равно обязан проверять данные сам: хитрый пользователь может убрать required через инструменты разработчика.

Радиокнопки, флажки, выпадающий список

Радиокнопки с одинаковым name образуют группу — выбрать можно только одну:

<label><input type="radio" name="size" value="s"> Маленькая</label>
<label><input type="radio" name="size" value="l" checked> Большая</label>

Результат: две круглые кнопки, отмечена «Большая» (checked). Отправится size=l.

Выпадающий список — <select> с вариантами <option>:

<select name="city">
  <option value="dushanbe">Душанбе</option>
  <option value="moscow" selected>Москва</option>
</select>

Результат: список, где сразу выбрана «Москва» (selected). На сервер уйдёт city=moscow — значение value, а не текст.

Многострочный текст — <textarea> (парный тег):

<textarea name="comment" rows="4"></textarea>

Кнопки

<button type="submit">Отправить</button>  <!-- отправляет форму (по умолчанию) -->
<button type="reset">Очистить</button>    <!-- очищает поля -->
<button type="button">Просто кнопка</button> <!-- ничего не делает без JavaScript -->

Куда отправляется форма

<form action="/signup" method="post">

• action — адрес, куда уйдут данные (без него — на ту же страницу);
• method="get" — данные дописываются в адрес: /search?query=кот (для поиска);
• method="post" — данные идут скрыто, в теле запроса (для паролей, регистрации).

Как это работает внутри

При нажатии кнопки отправки браузер проверяет все required, minlength и типы полей. Если всё в порядке, он собирает пары name=значение со всех полей формы и отправляет их по адресу action. Невыбранные флажки и радиокнопки не отправляются вовсе.

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

1. Нет name. Поле выглядит нормально, но его значение не уходит на сервер.
2. Радиокнопки с разными name. Тогда можно отметить все сразу — группа не работает.
3. for не совпадает с id. Подпись перестаёт быть связанной с полем.
4. Пароль через type="text". Пароль будет виден всем, кто смотрит на экран.
5. placeholder вместо <label>. Подсказка пропадает при вводе — человек забывает, что это было за поле.

Шпаргалка

Код	Что делает
<form action="…" method="post">	форма и куда её отправить
<input type="…" name="…">	поле ввода
<label for="id">	подпись к полю
required, minlength, min, max	проверка в браузере
placeholder="…"	подсказка в пустом поле
type="radio" + одинаковый name	выбор одного варианта
checked / selected	отмечено / выбрано по умолчанию
<select> + <option value>	выпадающий список
<textarea>	многострочный текст
<button type="submit">	кнопка отправки