HTML: Поле для ввода текста
Основной элемент форм в 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 текстовых поля
Команда проекта находится в телеграм-сообществе. Там можно задать любой вопрос и повлиять на проект
Если вы зашли в тупик, то самое время поговорить с нашим асситентом Тота во вкладке "ИИ-помощник":
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи. В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в обратной связи нашего сообщества
Ваше упражнение проверяется по этим тестам
const { test } = require('tests');
test(({ query, expect }) => {
const form = query(document, 'form');
const inputs = form.querySelectorAll('input');
expect(form).to.have.attr('action', '/people');
expect(inputs).to.have.length(2);
});
Решение учителя откроется через:
20:00
