Формы и поля ввода — HTML и CSS

В этом уроке ты узнаешь

Объяснять роль <form>, name, action и method
Правильно связывать поля с <label>
Выбирать подходящие type, <select>, <textarea>, переключатели и флажки
Добавлять проверку с помощью required, min, max, minlength и pattern

Каждый раз, когда ты записываешься в кружок, ищешь видео или заказываешь пиццу, ты заполняешь форму. Формы — это способ, которым страница собирает сведения от людей. В этом уроке ты создашь форму с подписями, разными типами полей и встроенной проверкой — не написав ни строчки на JavaScript.

Форма и её поля

Элемент <form> объединяет поля. Атрибут action указывает, куда отправить данные, а method — как: get записывает данные в адресную строку (удобно для поиска), а post передаёт их не в адресе, а внутри запроса (для паролей и личных данных). У каждого поля должен быть атрибут name: сервер получает данные в виде пар name=value.

HTML· Измени код и запусти снова

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; }
  label { display: block; margin-top: 10px; font-weight: 600; }
  input { font: inherit; padding: 6px 8px; margin-top: 4px; width: 240px; }
  button { margin-top: 14px; padding: 8px 18px; font: inherit; color: white;
           background: #4f46e5; border: 0; border-radius: 6px; }
</style>

<form action="/signup" method="post">
  <label for="name">Your name</label>
  <input id="name" name="name" type="text" placeholder="Aysel">

  <label for="email">Email</label>
  <input id="email" name="email" type="email" placeholder="aysel@example.com">

  <label for="pass">Password</label>
  <input id="pass" name="pass" type="password">

  <button type="submit">Sign up</button>
</form>

Предпросмотр

Этот предпросмотр не умеет отправлять формы, но в поля можно вводить текст. На настоящем сайте данные ушли бы по адресу из action.

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

<label> (подпись) сообщает, для чего нужно поле. Свяжи его с id поля через атрибут for: <label for="email"> и <input id="email">. Тогда клик по подписи ставит курсор в поле (или отмечает флажок), а скринридер зачитывает подпись, когда поле получает фокус. Другой способ — поместить поле прямо внутрь <label>.

Типы полей

Атрибут type у <input> меняет вид поля. На телефоне он меняет и клавиатуру: для email появляется клавиша @, а для tel — цифровая клавиатура.

`type`	Для чего
`text`	одна строка текста
`email`	адрес электронной почты; формат проверяется
`password`	символы скрыты точками
`number`	число со стрелками; `min`, `max`, `step`
`date`	календарь для выбора даты
`checkbox`	флажок — можно отметить несколько
`radio`	один выбор из группы с одинаковым `name`
`range`, `color`	ползунок и выбор цвета

HTML· Измени код и запусти снова

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; }
  fieldset { border: 1px solid #cbd5e1; border-radius: 8px; }
  p { margin: 10px 0; }
</style>

<form>
  <fieldset>
    <legend>Favorite subject</legend>
    <label><input type="radio" name="subject" value="math"> Math</label>
    <label><input type="radio" name="subject" value="art"> Art</label>
    <label><input type="radio" name="subject" value="music"> Music</label>
  </fieldset>
  <p><label><input type="checkbox" name="news"> Send me news</label></p>
  <p><label for="city">City</label>
    <select id="city" name="city">
      <option>Baku</option><option>Ganja</option><option>Sumgait</option>
    </select></p>
  <p><label for="level">Level</label> <input id="level" name="level" type="range" min="1" max="10">
    <label for="color">Color</label> <input id="color" name="color" type="color" value="#4f46e5"></p>
  <p><label for="msg">Message</label><br>
    <textarea id="msg" name="msg" rows="3" cols="30"></textarea></p>
</form>

Предпросмотр

Нажми на слова «Math» или «Send me news» — благодаря <label> клик выбирает поле. Из переключателей с одинаковым name можно выбрать только один.

<fieldset> группирует связанные поля, а <legend> даёт группе название. <select> с <option> создаёт выпадающий список, а <textarea> — многострочное текстовое поле. У переключателей и флажков атрибут value определяет, что будет отправлено на сервер.

Встроенная проверка

Браузер может сам проверить данные перед отправкой — JavaScript не нужен. Для этого есть атрибуты:

required — поле нельзя оставить пустым.
minlength и maxlength — минимальная и максимальная длина текста.
min, max и step — границы и шаг для чисел и дат.
pattern — шаблон (регулярное выражение), которому должно соответствовать значение. Например, pattern="AZ[0-9]{4}" требует «AZ» и четыре цифры, как в почтовых индексах Азербайджана: AZ1000.
type="email" и type="url" проверяют формат автоматически.

Если поле не соответствует правилу, при нажатии кнопки отправки браузер показывает сообщение и не отправляет форму. А псевдоклассы CSS :valid и :invalid позволяют раскрасить правильные и неправильные поля по-разному.

HTML· Измени код и запусти снова

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; }
  label { display: block; margin-top: 8px; }
  input { font: inherit; padding: 6px; border: 2px solid #cbd5e1; border-radius: 6px; }
  input:valid { border-color: #16a34a; }
  input:invalid { border-color: #f59e0b; }
</style>

<form>
  <label for="user">Username (3–12 characters)</label>
  <input id="user" name="user" required minlength="3" maxlength="12">

  <label for="age">Age (10–99)</label>
  <input id="age" name="age" type="number" min="10" max="99" required>

  <label for="mail">Email</label>
  <input id="mail" name="mail" type="email" required>

  <label for="zip">Postal code, e.g. AZ1000</label>
  <input id="zip" name="zip" pattern="AZ[0-9]{4}" required>
</form>

Предпросмотр

Вводи данные в поля: рамка становится зелёной, когда значение правильное, и остаётся оранжевой, пока оно неверно. Попробуй ввести в поле индекса AZ1000, а затем az1000.

Главное

<form> объединяет поля; action говорит, куда, а method (get/post) — как отправлять; каждому полю нужен name.
<label for="id"> связывает подпись с полем: клик выбирает поле, а скринридер зачитывает название.
type меняет вид поля и клавиатуру на телефоне: email, number, date, checkbox, radio и другие.
required, minlength, min, max и pattern велят браузеру проверить данные перед отправкой.
Проверка в браузере — для удобства; сервер всё равно должен проверять данные сам.

Проверь себя

Вопросов: 10. Каждый правильный ответ приносит XP.

1 / 10

Что нужно, чтобы клик по подписи ставил курсор в поле?