Формы: как сайт спрашивает

Всё, что человек вводит на сайте, живёт внутри тега form. Он собирает данные полей и отправляет их по адресу из атрибута action.

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

1<form action="/booking" method="post">2  <!-- поля -->3  <button type="submit">Записаться</button>4</form>

label — не просто текст рядом с полем. Он связан с полем, и связь даёт две вещи: клик по подписи ставит курсор в поле (важно для маленьких флажков), а голосовая программа произносит подпись, когда фокус попадает в поле.

Связать можно двумя способами.

1<!-- через id: подпись и поле связаны по имени -->2<label for="name">Как тебя зовут</label>3<input type="text" id="name" name="name">45<!-- через вложенность: поле внутри подписи -->6<label>7  Как тебя зовут8  <input type="text" name="name">9</label>

Тег input один, а поведение задаёт атрибут type. Правильный тип — это не только внешний вид: на телефоне под каждый тип открывается своя клавиатура, а браузер сам проверяет формат.

select — выпадающий список. Внутри — option. Удобен, когда вариантов больше пяти-шести.

textarea — многострочное поле. У него нет атрибута value: текст пишется между тегами.

button — кнопка. Тип submit отправляет форму, button — ничего не делает сам по себе.

1<label for="drink">Напиток</label>2<select id="drink" name="drink">3  <option value="">— выбери —</option>4  <option value="latte">Латте</option>5  <option value="raf">Раф</option>6</select>78<label for="note">Пожелания</label>9<textarea id="note" name="note" rows="4"></textarea>

Браузер умеет проверять данные сам — бесплатно и на всех языках.

• required — поле обязательное.
• minlength, maxlength — длина текста.
• min, max — границы числа или даты.
• pattern — свой шаблон через регулярное выражение.

К pattern обязательно добавляй title: браузер покажет его текстом ошибки. Без него человек увидит только «Данные не соответствуют формату» и не поймёт, что не так.

<form class="form">  <h2>Запись на дегустацию</h2>​  <p class="field">    <label for="name">Имя</label>    <input type="text" id="name" name="name" required minlength="2">  </p>​  <p class="field">    <label for="mail">Почта</label>    <input type="email" id="mail" name="mail" required placeholder="hi@polka.ru">  </p>​  <p class="field">    <label for="guests">Сколько человек</label>    <input type="number" id="guests" name="guests" min="1" max="6" value="2">  </p>​  <button type="submit">Записаться</button></form>

.form {  max-width: 320px;}​.field {  display: grid;  gap: 4px;  margin: 0 0 12px;}​label {  font-size: 14px;  font-weight: 600;}​input {  padding: 9px 12px;  font: inherit;  border: 1px solid #ccd;  border-radius: 8px;}​input:focus {  outline: 2px solid #6544e0;  outline-offset: 1px;}​button {  padding: 10px 20px;  font: inherit;  font-weight: 600;  color: #fff;  background: #6544e0;  border: 0;  border-radius: 999px;  cursor: pointer;}

Когда несколько полей относятся к одному вопросу — особенно переключатели — их оборачивают в fieldset, а общий вопрос пишут в legend.

Без этого голосовая программа прочитает «S», «M», «L» и не скажет, что это размер стакана.

1<fieldset>2  <legend>Размер стакана</legend>34  <label><input type="radio" name="size" value="s" checked> Маленький</label>5  <label><input type="radio" name="size" value="m"> Средний</label>6  <label><input type="radio" name="size" value="l"> Большой</label>7</fieldset>

<form>  <p>    <label for="name">Имя</label>    <input type="text" id="name" name="name" required>  </p>​</form>

label { display: block; font-weight: 600; margin-bottom: 4px; }input { padding: 8px; font: inherit; }p { margin: 0 0 12px; }

1<form>2  <p>3    <label for="name">Имя</label>4    <input type="text" id="name" name="name" required>5  </p>67  <p>8    <label for="mail">Почта</label>9    <input type="email" id="mail" name="mail" required placeholder="hi@polka.ru">10  </p>1112  <p>13    <label for="day">Удобная дата</label>14    <input type="date" id="day" name="day">15  </p>1617  <button type="submit">Записаться</button>18</form>

1label { display: block; font-weight: 600; margin-bottom: 4px; }2input { padding: 8px; font: inherit; }3p { margin: 0 0 12px; }