HTML/CSS: Поле для ввода текста

• Тег label
• Атрибут placeholder
• Другие текстовые поля

Основной элемент форм в HTML — поле для ввода. Оно реализуется с помощью тега <input> и позволяет задать различные поля для ввода данных: текст, пароли, чекбоксы, радио кнопки, кнопки отправки, загрузка файла, ввод даты и так далее.

Начиная со стандарта HTML5 список полей пополнился множеством новых вариантов. Базовыми типами инпутов являются:

• Текст
• Пароли
• Чекбоксы
• Радио кнопки

Самый простой способ использования <input> — создание текстового поля для ввода. Именно <input> присутствует во всех полях поиска. Чтобы создать простое текстовое поле для ввода данных, необходимо внутрь формы добавить непарный тег <input> и указать у него атрибут type со значением text:

<form>
  <input type="text">
</form>

Тег label

Поле создано, но совершенно непонятно что там вводить: имя? фамилию? код от сейфа? Чтобы указать назначение поля, используется тег <label>. Это парный тег, который напоминает параграф, но относится именно к описанию поля формы.

<form>
  <label>Введите имя</label>
  <input type="text">
</form>

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

Для связи label используется один из двух вариантов:

• Связь по атрибуту id. Для этого у тега <input> указывается атрибут id с произвольным именем, а у <label> добавляется атрибут for с таким же именем, как и значение id у элемента input

<form>
  <label for="name">Введите имя</label>
  <input type="text" id="name">
</form>

• Связь через вложенность. Вы обратили внимание, что <label> — это парный тег? Для связи можно вложить input внутрь label, тогда они автоматически свяжутся друг с другом

<form>
  <label>Введите имя
    <input type="text">
  </label>
</form>

Атрибут placeholder

Встречаются ситуации, когда для поля есть описание, но совершенно непонятно, в каком формате нужно заполнить данные. Например, вначале указать имя, а потом фамилию, или наоборот? Чтобы помочь пользователю сориентироваться используется атрибут placeholder у тега <input>. Значение этого атрибута будет выведено внутри текстового поля.

<form>
  <label for="name">Введите имя и фамилию</label>
  <input type="text" id="name" placeholder="Иван Иванов">
</form>

Другие текстовые поля

Замечали, что при вводе паролей, браузер автоматически проставляет звёздочки вместо показа символов? Этого можно добиться указав значение password для атрибута type:

<form>
  <label for="pin">Введите пинкод</label>
  <input type="password" id="pin" placeholder="1234">
</form>

В стандарте HTML5 появилось ещё несколько интересных типов для тега <input>, которые реализуют обычное текстовое поле, но имеют свою реализацию. Например:

• email
• number
• search
• tel
• url

Их назначение в том, что значения автоматически проверяются браузером на корректность. Например, если ввести значение email, то браузер будет ожидать корректный шаблон для Email адреса. В противном случае он сам укажет, что значение неверное при попытке отправить форму.

Мобильные устройства также не обходят стороной эти поля. В современных версиях мобильных операционных систем клавиатура подстраивается под тип поля, которое заполняется. Если выставлен тип email, то на клавиатуру сразу будет добавлен символ @, чтобы его не приходилось искать в дополнительных символах

Задание

Создайте форму, у которой файл с обработчиком данных лежит по адресу /people. Внутри формы создайте 2 текстовых поля