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

После этого урока вы сможете выбирать подходящий тип для каждого поля и настраивать его поведение атрибутами.

Что уже умеем / что добавим

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

Что вы узнаете в рамках статьи

• Как атрибут type меняет поведение поля.
• Какие бывают полезные типы полей.
• Зачем нужен атрибут placeholder.
• Для чего служит атрибут name.
• Как помечать поля обязательными через required.

Ключевые термины

• type — атрибут, задающий тип поля ввода.
• placeholder — подсказка внутри пустого поля.
• name — имя поля, под которым отправляется его значение.
• required — атрибут обязательного для заполнения поля.
• Валидация — проверка правильности введённых данных.

Атрибут type

Атрибут type определяет, какие данные принимает поле и как оно себя ведёт. Одно и то же input с разными type работает по-разному:

<input type="text">
<input type="email">
<input type="password">

Поле text принимает любой текст. Поле email подсказывает браузеру, что ждём адрес, — на телефоне даже клавиатура изменится, добавив символ @, а браузер сможет проверить формат. Поле password скрывает вводимые символы точками. Выбор правильного type — это и удобство, и первая ступень проверки данных.

Полезные типы полей

Кроме text, email и password, есть и другие типы, покрывающие частые нужды:

<input type="tel">     <!-- телефон -->
<input type="number">  <!-- число -->
<input type="date">    <!-- выбор даты -->
<input type="checkbox"> <!-- флажок -->

Тип tel удобен для телефонов (на мобильных откроет цифровую клавиатуру), number — для числовых значений со стрелками увеличения, date покажет календарь для выбора даты, а checkbox создаст флажок, который можно отметить (например, «согласен с условиями»). Подбирайте тип под смысл данных — это делает форму заметно удобнее, особенно на телефонах.

Подсказка placeholder

Атрибут placeholder выводит серый текст-подсказку внутри пустого поля, который исчезает, как только пользователь начинает печатать:

<label for="email">Email</label>
<input type="email" id="email" placeholder="example@mail.ru">

Подсказка помогает понять, в каком виде вводить данные. Но важно: placeholder — это не замена label. Он исчезает при вводе, а значит, пользователь теряет ориентир, и скринридеры считывают его хуже, чем подпись. Правило такое: label — обязательно, placeholder — приятное дополнение с примером ввода.

Атрибут name

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

<input type="text" name="username" id="username">

Если представить, что форма отправляет пары «имя — значение», то name — это как раз левая часть пары. При обработке формы (на сервере или в скрипте) к данным обращаются именно по name. Поэтому у каждого поля, чьи данные нужны, должен быть осмысленный name. Это техническая, но обязательная деталь рабочих форм.

Обязательные поля: required

Атрибут required помечает поле как обязательное. Если пользователь попытается отправить форму, не заполнив его, браузер не даст этого сделать и покажет подсказку:

<label for="name">Ваше имя</label>
<input type="text" id="name" name="name" required>

Это простейшая встроенная валидация — проверка прямо в браузере, без единой строки скриптов. Обязательные поля стоит помечать required, чтобы форма не отправлялась пустой. В следующем уроке мы научимся ещё и стилизовать состояние таких полей, а пока важно само умение задавать обязательность.

Применяем в проекте

Сделаем поля формы обратной связи умнее. Зададим правильные типы, добавим подсказки-примеры, имена и пометим обязательные поля.

<form>
  <label for="name">Ваше имя</label>
  <input type="text" id="name" name="name" placeholder="Иван Иванов" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" placeholder="example@mail.ru" required>

  <label for="phone">Телефон</label>
  <input type="tel" id="phone" name="phone" placeholder="+7 900 000-00-00">

  <label for="message">Сообщение</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <button type="submit">Отправить</button>
</form>

Обновите страницу: поле email ждёт адрес и проверит его формат, поле телефона на мобильном откроет цифровую клавиатуру, в пустых полях видны подсказки-примеры, а обязательные поля не дадут отправить форму пустыми. У каждого поля есть name, чтобы данные корректно отправлялись. Форма стала заметно удобнее и надёжнее.

Частые ошибки

• Неверный type.
  Для email берите type="email", для телефона — tel; text для всего подряд теряет удобства.
• placeholder вместо label.
  Подсказка исчезает при вводе и не заменяет подпись; label обязателен.
• Поле без name.
  Без имени значение поля не отправляется — задавайте осмысленный name.
• Забытый required.
  Без него обязательное поле можно оставить пустым и отправить форму.

Итоги

Отличная работа — теперь ваши формы стали умными! Вы научились выбирать тип поля через type, добавлять подсказки placeholder, задавать имена name и помечать обязательные поля через required — а это уже первая, встроенная в браузер валидация. Такие детали превращают сырую форму в удобный инструмент. Ваша форма обратной связи стала заметно приятнее в заполнении.

Вы отлично справляетесь! В следующем уроке займёмся внешним видом формы: научимся стилизовать поля и их состояния — :focus, :hover, :disabled.