Поля ввода и их типы

Изучаем главный рабочий инструмент форм — поле input и его типы.

<input> — одиночный тег поля ввода; его поведение задаёт атрибут type.

Один тег — много обличий

Удивительно, но одно текстовое поле, флажок, переключатель и выбор даты — это всё один тег <input>. Меняется только атрибут type, и поле ведёт себя по-разному:

<input type="text" name="name">
<input type="email" name="email">
<input type="password" name="pass">
<input type="number" name="age">
<input type="date" name="birthday">

Текстовые типы

• type="text" — обычная строка текста;
• type="email" — для почты; браузер проверит, что есть @, а на телефоне покажет клавиатуру с @;
• type="password" — текст скрыт точками;
• type="number" — только числа, со стрелочками вверх/вниз;
• type="date" — удобный выбор даты из календаря.

Правильный type — это и удобство (нужная клавиатура на телефоне), и базовая проверка ввода «из коробки».

Флажки — checkbox

type="checkbox" — независимый флажок «вкл/выкл». Несколько флажков не связаны: можно отметить любое количество. К каждому добавляют подпись:

<input type="checkbox" name="agree" id="agree">
<label for="agree">Я согласен с условиями</label>

Переключатели — radio

type="radio" — выбор одного варианта из нескольких. Чтобы переключатели работали как группа (выбран только один), им дают одинаковый name:

<input type="radio" name="size" value="s"> S
<input type="radio" name="size" value="m"> M
<input type="radio" name="size" value="l"> L

Общий name="size" объединяет их в группу: выбор одного снимает остальные. Атрибут value хранит, какой именно вариант выбран.

Памятка по типам

Правильный type — это забота о пользователе

Может показаться, что разница между type="text" и type="email" мелочь — ведь почту можно ввести и в обычное текстовое поле. Но правильный тип заметно улучшает жизнь пользователя, особенно на телефоне:

• для email телефон покажет клавиатуру с готовым символом @;
• для number и tel — цифровую клавиатуру вместо буквенной;
• для date — удобный календарь, где не получится ввести «32 января»;
• для password — точки вместо символов, чтобы пароль не подсмотрели через плечо.

Плюс к удобству браузер ещё и сам проверяет ввод: поле email не примет строку без @. Всё это вы получаете бесплатно, просто указав верный type. Поэтому никогда не делайте всё подряд через type="text" — выбирайте тип под смысл поля.

Итог

• Поведение <input> определяет атрибут type.
• Правильный тип даёт удобную клавиатуру и базовую проверку ввода.
• checkbox — независимые флажки; radio с общим name — выбор одного варианта.