Урок · HTML

Input: выбираем правильный тип поля

Редакция PraktumОбновлено 24 октября 202615 минут на урок с практикойУровень: новичок

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

Зачем этот урок сейчас

Одно и то же поле «телефон» можно сделать так, что на телефоне откроется цифровая клавиатура и браузер предложит номер из контактов, а можно — так, что придётся переключать раскладку и печатать вручную. Разница — в одном атрибуте type. Правильные типы полей делают форму короче на несколько минут для каждого посетителя.

Минимальный пример

<label for="name">Имя</label>
<input id="name" name="name" type="text" autocomplete="name" required>

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

<label for="phone">Телефон</label>
<input id="phone" name="phone" type="tel" autocomplete="tel">

У каждого поля подпись, имя для отправки и подсказка для автозаполнения. Тип email проверит наличие @ и покажет клавиатуру с этим символом, tel откроет цифровую клавиатуру.

Типы полей

number или tel

<!-- количество: число для вычислений -->
<input type="number" name="count" min="1" max="10" step="1" value="1">

<!-- телефон, индекс, карта: цифры, но не число -->
<input type="tel" name="phone" autocomplete="tel">
<input type="text" name="zip" inputmode="numeric" pattern="[0-9]{6}" autocomplete="postal-code">

type="number" предназначен для величин, которые считают: количество, возраст. Для телефона, индекса и номера карты он не подходит — убирает ведущие нули, добавляет ненужные стрелки и меняет значение при прокрутке колесом мыши. Для таких полей бери tel или text с inputmode="numeric": клавиатура цифровая, а значение остаётся строкой.

checkbox и radio

<fieldset>
  <legend>Уровень</legend>
  <label><input type="radio" name="level" value="start" checked> С нуля</label>
  <label><input type="radio" name="level" value="middle"> Уже верстаю</label>
</fieldset>

<label><input type="checkbox" name="news" value="yes"> Присылать новые уроки</label>

Радиокнопки одной группы получают одинаковый name — тогда выбрать можно только одну. На сервер уходит value выбранной. Галочки независимы: у каждой может быть своё имя. Неотмеченная галочка не отправляется вовсе, а отмеченная без value отправит слово on. Атрибут checked отмечает вариант заранее.

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

Встроенная проверка

<input type="password" name="password" minlength="8" autocomplete="new-password" required
       aria-describedby="password-hint">
<p id="password-hint">Не короче 8 символов</p>

<input type="text" name="code" pattern="[A-Z]{3}-[0-9]{3}" title="Формат: ABC-123">

Браузер не отправит форму, пока поля не пройдут проверку, и покажет подсказку у первого неверного. Требования пиши текстом рядом с полем и связывай через aria-describedby — не заставляй угадывать правила после ошибки. Встроенную проверку легко обойти, поэтому сервер проверяет данные снова.

password — это не защита

type="password" только прячет символы на экране от людей рядом. Это не шифрование: данные защищает HTTPS при передаче и сервер при хранении. Для формы регистрации ставь autocomplete="new-password" — браузер предложит надёжный пароль, а для входа — current-password. Кнопка «показать пароль» помогает не ошибиться при вводе.

checkbox или radio

Частые ошибки

• Используют placeholder вместо подписи label.
• Не указывают name — значение не отправляется.
• Дают радиокнопкам одной группы разные name, и выбирается несколько.
• Делают телефон и индекс полем type="number".
• Делают обязательными все поля, хотя для заявки хватает имени и контакта.

Доступность

Каждому полю — видимая подпись, группе переключателей — fieldset и legend, требованиям к вводу — текст, связанный через aria-describedby. autocomplete — не только удобство, но и требование доступности: людям с моторными и когнитивными трудностями тяжело вводить данные вручную.

Поддержка браузерами

Все перечисленные типы поддерживаются актуальными браузерами. Внешний вид date, time, color и range зависит от браузера и системы — значение при этом отправляется в едином формате. Если браузер не знает тип, он показывает обычное текстовое поле.

<label for="r-name">Имя</label>
<input id="r-name" name="name" autocomplete="name" required>

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

<label for="r-phone">Телефон</label>
<input id="r-phone" name="phone" type="tel" autocomplete="tel">

<label for="r-pass">Пароль</label>
<input id="r-pass" name="password" type="password" minlength="8" autocomplete="new-password" aria-describedby="r-pass-hint" required>
<p id="r-pass-hint">Не короче 8 символов</p>

<fieldset>
  <legend>Уровень</legend>
  <label><input type="radio" name="level" value="start" checked> С нуля</label>
  <label><input type="radio" name="level" value="middle"> Уже верстаю</label>
</fieldset>

<label><input type="checkbox" name="rules" value="yes" required> Принимаю правила</label>