Справочник HTML

Тег <input>: поле ввода

input создаёт однострочное поле или элемент выбора. Поведение зависит от значения type.

Пример

<label for="email">Почта</label>
<input id="email" name="email" type="email" autocomplete="email" required>

name участвует в отправке формы, id связывает поле с label, required включает обязательную проверку.

Частые типы

Text — обычный текст, email — почта, password — пароль, number — число, date — дата, checkbox — независимый выбор, radio — один вариант группы.

Полезные атрибуты

<input type="text" minlength="2" maxlength="40" placeholder="Например, Анна">

Placeholder остаётся подсказкой, а не заменой label. Autocomplete помогает браузеру подставить знакомые данные.

Ошибки

Нет label или name.
Number используют для телефона.
Важная инструкция помещена только в placeholder.

Попробуй

Создай поля имени, почты и пароля с правильными типами и подписями.

Как собрать удобное поле формы

Тип input влияет на клавиатуру телефона, встроенную проверку и доступные атрибуты. Для почты используй type="email", для числа — number, но телефон обычно лучше оставить type="tel": номера могут содержать плюс, пробелы и скобки. Атрибут name обязателен, если значение должно попасть при отправке формы.

Каждому полю нужна видимая label, связанная через for и id. Placeholder показывает пример, но не заменяет подпись: он исчезает после ввода. autocomplete помогает браузеру корректно подставлять имя, email и адрес. Сообщение об ошибке должно объяснять, что исправить, а не просто окрашивать рамку красным.

Разберём рабочий пример

<label for="email">Электронная почта</label>
<input id="email" name="email" type="email" autocomplete="email" required aria-describedby="email-hint">
<small id="email-hint">Пришлём только ссылку на урок.</small>

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

Проверка перед использованием

У поля есть связанная label.
Выбран подходящий type.
Добавлены name и autocomplete.
Ошибка объясняется текстом, а не только цветом.

Попробуй в браузере

Измени код и нажми «Запустить». Результат появится ниже.

Практикум по теме

Галочки и переключатели — Галочки можно отметить вместе. Круглые переключатели с одним name оставляют только один вариант.