HTML inputmode, autocomplete и enterkeyhint: удобные мобильные формы без JavaScript

Поисковый запрос, под который написана статья: HTML inputmode как использовать. Если пользователь открывает форму на телефоне, ему важно быстро ввести номер, email, код подтверждения или адрес. Атрибуты inputmode, autocomplete и enterkeyhint помогают улучшить UX без JavaScript: браузер сам покажет подходящую клавиатуру, предложит автозаполнение и изменит текст кнопки Enter.

Зачем нужен inputmode в HTML

inputmode подсказывает браузеру, какую экранную клавиатуру показать. Важно: он не валидирует данные и не меняет тип поля. Это именно подсказка для ввода.

<label>
  Код из SMS
  <input type="text" inputmode="numeric" autocomplete="one-time-code">
</label>

Здесь поле остаётся текстовым, но на мобильном устройстве чаще всего откроется цифровая клавиатура. Это удобно для кодов, индексов, номеров заказов и других значений, где не нужны буквы.

Популярные значения inputmode

• text — обычная текстовая клавиатура.
• numeric — цифры, удобно для кодов и PIN.
• decimal — числа с десятичным разделителем.
• tel — телефонная клавиатура с цифрами, плюсом и символами.
• email — клавиатура с быстрым доступом к @ и точке.
• url — клавиатура для адресов сайтов.
• search — клавиатура для поиска.
• none — просьба не показывать клавиатуру, используется редко.

Правильный выбор type и inputmode

Новички часто ставят type="number" для всего, что состоит из цифр. Это ошибка, если значение не является числом в математическом смысле. Телефон, индекс, номер карты, SMS-код — это строки, а не числа. У них могут быть ведущие нули, пробелы, плюс или фиксированная длина.

<!-- Плохо для SMS-кода: браузер может убрать ведущий ноль -->
<input type="number" name="code">

<!-- Лучше -->
<input
  type="text"
  name="code"
  inputmode="numeric"
  autocomplete="one-time-code"
  maxlength="6">

Используйте type="number", когда пользователь действительно вводит количество, цену, возраст или другое число, с которым вы будете выполнять вычисления.

Пример: форма входа по SMS-коду

Рассмотрим практический пример. Нам нужна форма, где пользователь вводит телефон и код подтверждения.

<form action="/login" method="post">
  <label for="phone">Телефон</label>
  <input
    id="phone"
    name="phone"
    type="tel"
    inputmode="tel"
    autocomplete="tel"
    placeholder="+7 999 123-45-67"
    required>

  <label for="sms-code">Код из SMS</label>
  <input
    id="sms-code"
    name="sms_code"
    type="text"
    inputmode="numeric"
    autocomplete="one-time-code"
    enterkeyhint="done"
    maxlength="6"
    required>

  <button type="submit">Войти</button>
</form>

Что здесь происходит:

• type="tel" и inputmode="tel" помогают открыть телефонную клавиатуру.
• autocomplete="tel" разрешает браузеру подставить сохранённый номер.
• autocomplete="one-time-code" может предложить код из SMS.
• enterkeyhint="done" подсказывает браузеру показать на клавиатуре кнопку вроде «Готово».

autocomplete: не только удобство, но и меньше ошибок

Атрибут autocomplete сообщает браузеру, какие данные ожидаются в поле. Благодаря этому пользователь может быстро заполнить имя, email, адрес, телефон или данные доставки.

<form action="/checkout" method="post" autocomplete="on">
  <input name="name" autocomplete="name" placeholder="Имя">
  <input name="email" type="email" autocomplete="email" placeholder="Email">
  <input name="phone" type="tel" autocomplete="tel" placeholder="Телефон">
  <input name="street" autocomplete="street-address" placeholder="Адрес">
  <input name="postal" inputmode="numeric" autocomplete="postal-code" placeholder="Индекс">
</form>

Для интернет-магазинов это особенно полезно: меньше ручного ввода — меньше ошибок и выше шанс, что пользователь завершит заказ.

enterkeyhint: управляйте кнопкой на клавиатуре

enterkeyhint меняет смысл кнопки Enter на мобильной клавиатуре. Это небольшая деталь, но она делает интерфейс понятнее.

<input type="search" enterkeyhint="search" placeholder="Найти товар">
<input type="email" enterkeyhint="next" placeholder="Email">
<textarea enterkeyhint="send" placeholder="Сообщение"></textarea>

Частые значения: enter, done, go, next, previous, search, send. Поддержка зависит от браузера и клавиатуры, поэтому воспринимайте этот атрибут как улучшение, а не как критически важную логику.

Мини-шпаргалка для типичных полей

<!-- Email -->
<input type="email" inputmode="email" autocomplete="email">

<!-- Сайт -->
<input type="url" inputmode="url" autocomplete="url">

<!-- Поиск -->
<input type="search" inputmode="search" enterkeyhint="search">

<!-- Индекс -->
<input type="text" inputmode="numeric" autocomplete="postal-code">

<!-- Цена -->
<input type="text" inputmode="decimal" placeholder="199.90">

Советы и частые ошибки

• Не заменяйте проверку данных атрибутом inputmode. Проверяйте значения на сервере и, при необходимости, на клиенте.
• Не используйте type="number" для телефонов и кодов. Это может испортить формат и ведущие нули.
• Добавляйте label. Поле с понятной подписью удобнее и доступнее.
• Не отключайте autocomplete без причины. Автозаполнение ускоряет работу пользователя.
• Тестируйте на реальном смартфоне. Разные браузеры и клавиатуры могут вести себя немного по-разному.

Если вы хотите уверенно собирать такие формы, понимать семантику HTML и верстать страницы без хаоса в коде, посмотрите курс «Вёрстка сайта с нуля 2.0» — практичный путь от HTML-разметки до готового макета.

Итог

HTML inputmode помогает показать подходящую клавиатуру, autocomplete ускоряет заполнение, а enterkeyhint делает мобильный ввод понятнее. Эти атрибуты не требуют JavaScript, легко добавляются в существующие формы и заметно улучшают пользовательский опыт.