Урок 5. Формы

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

Простая форма

<form action="/send" method="post">
  <p>
    <label for="name">Имя</label>
    <input type="text" id="name" name="name" required>
  </p>
  <p>
    <label for="email">Электронная почта</label>
    <input type="email" id="email" name="email" placeholder="name@example.com" required>
  </p>
  <p>
    <label for="message">Сообщение</label>
    <textarea id="message" name="message" rows="5"></textarea>
  </p>
  <button type="submit">Отправить</button>
</form>

Что здесь:

• <form> — сама форма. action — адрес, куда отправить данные, method — как: get или post.
• <input> — однострочное поле, пустой тег. Его вид задаёт атрибут type.
• <label> — подпись поля. Атрибут for равен id поля: тогда щелчок по подписи ставит курсор в поле, а программы чтения с экрана читают подпись вместе с полем.
• name — имя, под которым значение уйдёт на сервер. Поле без name не отправляется вовсе.
• placeholder — серая подсказка внутри пустого поля. Она не заменяет подпись: при вводе текста подсказка исчезает.
• required — поле обязательно: с пустым полем браузер форму не отправит и покажет предупреждение.
• <textarea> — многострочное поле, у него есть закрывающий тег. rows — высота в строках.
• <button type="submit"> — кнопка отправки.

Типы полей

На телефоне правильный type открывает подходящую клавиатуру: для email — с @, для tel — цифры. Это заметно удобнее, чем всегда писать type="text".

Флажки и переключатели

<p>
  <input type="checkbox" id="news" name="news" value="yes" checked>
  <label for="news">Получать новости</label>
</p>

<fieldset>
  <legend>Удобное время</legend>
  <input type="radio" id="morning" name="time" value="morning">
  <label for="morning">Утро</label>
  <input type="radio" id="evening" name="time" value="evening">
  <label for="evening">Вечер</label>
</fieldset>

• checkbox — независимый флажок: можно отметить, можно нет. checked — отмечен заранее.
• radio — переключатели с одинаковым name образуют группу: выбрать можно только один. Если дать им разные name, отметить получится все сразу — частая ошибка.
• value — что уйдёт на сервер, если вариант выбран. Без value флажок отправит слово on.
• <fieldset> объединяет поля в группу с рамкой, <legend> — подпись группы.

Выпадающий список

<label for="city">Город</label>
<select id="city" name="city">
  <option value="">— выберите —</option>
  <option value="minsk">Минск</option>
  <option value="brest">Брест</option>
  <option value="gomel" selected>Гомель</option>
</select>

Каждый вариант — <option>, selected — выбран заранее. На сервер уходит value выбранного варианта, а видит посетитель текст между тегами.

Проверка заполнения

Браузер сам проверяет поля перед отправкой, если указаны правила:

<input type="text" name="login" required minlength="3" maxlength="20">
<input type="number" name="age" min="6" max="99">
<input type="text" name="code" pattern="[0-9]{6}" title="Шесть цифр">

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

Что происходит при отправке

При нажатии кнопки браузер собирает пары name=значение всех полей и отправляет их по адресу из action:

• method="get" — данные дописываются к адресу: search.html?q=пирог. Так делают поиск и фильтры: такую ссылку можно сохранить и переслать.
• method="post" — данные идут в теле запроса и в адресе не видны. Так отправляют пароли, заявки, сообщения.

Если method не указан, используется get, а без action форма отправляется на адрес текущей страницы.

Посмотреть отправку можно и без сервера. Сохраните форму с method="get" на странице, откройте её с диска и отправьте:

<form>
  <label for="q">Поиск</label>
  <input type="search" id="q" name="q">
  <button>Найти</button>
</form>

После нажатия в адресной строке появится ?q= и введённое слово: страница открылась заново с данными формы. Кнопка <button> внутри формы по умолчанию отправляет её. Если кнопка нужна для другого (например, для JavaScript), пишите type="button".

HTML сам по себе данные не сохраняет и писем не отправляет. Чтобы заявки приходили на почту или записывались в базу, нужна программа на сервере — на PHP или другом языке, — или готовый сервис форм.

Коротко

• Форма — <form action="адрес" method="post">, поля — <input>, <textarea>, <select>, кнопка — <button type="submit">.
• У каждого поля — name (иначе не отправится) и подпись <label for="id">.
• type подбирайте по смыслу: email, tel, number, date, password.
• Переключатели radio одной группы — с одинаковым name.
• required, minlength, min, pattern — проверка в браузере, но сервер проверяет данные заново.
• get — данные в адресе, post — в теле запроса, для паролей и заявок.

Проверьте себя