HTML-формы

<form> собирает данные пользователя: action — куда отправить, method — как (get или post). Каждое поле — это <input>, а его название — <label>; атрибут for связывает label с id поля.

<form action="/subscribe" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Subscribe</button>
</form>

Без атрибута name значение поля не отправится. Клик по label активирует поле — это очень удобно на телефоне.

Атрибут type сообщает браузеру, для чего поле: text, email, password, number, date, checkbox, radio, file. Правильный тип подстраивает мобильную клавиатуру и проверяет ввод. Для длинного текста есть <textarea>, для выпадающего списка — <select>.

<input type="number" name="age" min="0" max="120">
<input type="date" name="birthday">
<input type="checkbox" id="agree" name="agree"> <label for="agree">I agree</label>
<select name="city">
  <option value="baku">Baku</option>
  <option value="ganja">Ganja</option>
</select>
<textarea name="message" rows="4"></textarea>

• required требует заполнить поле.
• minlength, maxlength, min, max и pattern задают ограничения.
• placeholder — подсказка, а не замена label.
• <button type="submit"> отправляет, type="reset" очищает.

Проверка в браузере — для удобства; ради безопасности обязательно проверяйте данные и на сервере.

<input type="text" name="user" minlength="3" maxlength="20" required placeholder="Username">
<input type="text" name="zip" pattern="[0-9]{4}" title="4 digits">