Тег <input>: поля ввода
Как подобрать тип input, связать поле с подписью и включить полезное автозаполнение.
Зачем нужен этот элемент
input создаёт поле ввода, поведение которого зависит от type. Браузер может показать подходящую клавиатуру, предложить автозаполнение и выполнить базовую проверку. Это помогает пользователю, но не заменяет серверную валидацию.
Подпись label должна быть видна и связана с id поля. Placeholder может привести пример значения, но не заменяет подпись: после ввода текста подсказка исчезает. Используйте autocomplete по назначению, например email или name.
Синтаксис и пример
<label for="email">Электронная почта</label>
<input id="email" name="email" type="email" autocomplete="email" placeholder="name@example.com" required>Что важно в разметке
| Параметр | Как использовать |
|---|---|
| type | text, email, search, checkbox и другие режимы. |
| name | Ключ для передачи значения форме. |
| required | Требование заполнить поле перед обычной отправкой. |
| autocomplete | Подсказка браузеру о назначении поля. |
Частая ошибка
Не выбирайте type=»number» для телефона или индекса: это идентификаторы, а не числа для вычислений. Для телефона подходит tel.
Небольшая практика
Добавьте поле имени с autocomplete=»name». Кликните по подписи: курсор должен переместиться в связанное поле.
Разберите также <label>, <form>: эти элементы пригодятся в том же интерфейсе.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.