HTML-формы

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

Элемент <form>

Все поля формы оборачиваются в элемент <form>. У него два важных атрибута:

• action — адрес сервера, куда отправятся данные при сабмите
• method — способ отправки: GET (данные в URL) или POST (данные в теле запроса)

<form action="/api/contact" method="POST">
  <!-- поля формы -->
</form>
html

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

<input> — основное поле ввода

Элемент <input> — самый универсальный в формах. Его внешний вид и поведение определяет атрибут type:

<!-- текстовое поле -->
<input type="text" name="name" placeholder="Ваше имя">

<!-- email — браузер проверит формат -->
<input type="email" name="email" placeholder="example@mail.ru">

<!-- телефон -->
<input type="tel" name="phone" placeholder="+7 (999) 000-00-00">

<!-- число -->
<input type="number" name="guests" min="1" max="20">

<!-- дата -->
<input type="date" name="arrival">

<!-- пароль — скрывает символы -->
<input type="password" name="password">

<!-- чекбокс -->
<input type="checkbox" name="agree" id="agree">

<!-- радио-кнопка -->
<input type="radio" name="tour" value="classic" id="tour-classic">
<input type="radio" name="tour" value="premium" id="tour-premium">
html

Атрибут name определяет ключ, под которым значение поля попадёт в данные формы — без него поле игнорируется при отправке.

<label> — подпись к полю

Элемент <label> связывает текстовое описание с полем ввода. Это важно и для удобства — клик по лейблу фокусирует поле, — и для доступности — скринридеры читают лейбл вслух.

Связать лейбл с полем можно двумя способами:

<!-- Способ 1: атрибут for совпадает с id поля -->
<label for="name">Ваше имя</label>
<input type="text" id="name" name="name">

<!-- Способ 2: обернуть поле в label -->
<label>
  Ваше имя
  <input type="text" name="name">
</label>
html

Первый способ чаще встречается на практике — он даёт больше свободы в вёрстке.

<textarea> — многострочный текст

Для длинных сообщений используется <textarea>. В отличие от <input>, это парный тег:

<textarea name="message" rows="4" placeholder="Ваш вопрос или пожелания"></textarea>
html

Атрибуты rows и cols задают размер по умолчанию, но их обычно переопределяют через CSS.

<select> — выпадающий список

<select name="duration">
  <option value="">— Выберите длительность тура —</option>
  <option value="3">3 дня</option>
  <option value="5">5 дней</option>
  <option value="7">7 дней</option>
</select>
html

Первый <option> с пустым значением служит подсказкой — как placeholder для текстового поля.

Кнопка отправки

<button type="submit">Отправить заявку</button>
html

Тип submit означает, что клик по кнопке отправит форму. Есть и другие типы: button (просто кнопка без отправки) и reset (очищает форму — почти никогда не нужен).

Полезные атрибуты

<!-- Обязательное поле — браузер не даст отправить форму без него -->
<input type="text" name="name" required>

<!-- Недоступное поле — нельзя редактировать и фокусировать -->
<input type="text" name="id" disabled>

<!-- Только для чтения — нельзя редактировать, но значение отправляется -->
<input type="text" name="city" value="Санкт-Петербург" readonly>

<!-- Автофокус при загрузке страницы -->
<input type="text" name="name" autofocus>
html

Базовые стили для формы

Браузеры по умолчанию стилизуют поля по-своему, и результат выглядит по-разному в Chrome, Firefox и Safari. Хорошая практика — сбросить стили и задать свои:

input,
textarea,
select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  font-size: 16px;
  font-family: inherit; /* важно — по умолчанию не наследуется */
  color: inherit;
  background: #fff;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #4a90e2;
}
css

В следующем уроке научимся читать значения полей через JavaScript и проверять их до отправки — напишем свою систему валидации.