✂️ Поле телефона открывает цифровую клавиатуру

Открываешь форму на телефоне, тапаешь в поле для номера — и вылезает буквенная клавиатура. Человек жмёт «123», ищет плюс, промахивается по цифрам. На этом месте формы и бросают.

<label>
  Телефон
  <input type="tel" inputmode="tel">
</label>

<label>
  Индекс
  <input type="text" inputmode="numeric">
</label>

За клавиатуру отвечает отдельный атрибут — inputmode.

type говорит браузеру, какие данные в поле и как их проверять, а inputmode — только какую клавиатуру открыть на мобильном. Поэтому их ставят вместе: type="tel" inputmode="tel", и человек видит телефонную клавиатуру вместо букв. Ещё есть numeric, decimal, email, url и search.

Для индекса, кода из смс и номера карты бери type="text" с inputmode="numeric": у type="number" сбоку стрелки-спиннеры, а ведущие нули он съедает — индекс 01234 станет 1234.

❤️ — если полезно

@glo_academy | #snippets