🔖 HTML лайфхак: Правильная клавиатура на мобильнике
Когда пользователь вводит дату рождения на мобильном — какая клавиатура должна появиться? Цифровая! Но разработчики часто делают так:
<!-- ❌ Неправильно -->
<input type="tel" placeholder="Дата рождения">
Почему
type="tel"? Потому что раньше других способов не было. Костыль! 🤦🔸 Правильный способ
Используй атрибут `inputmode="numeric"`:
<!-- ✅ Правильно -->
<label for="bd">Дата рождения</label>
<input type="text" id="bd" inputmode="numeric">
Что получится
🔸 С type="tel": появляются символы
# и * (не нужны для даты)🔸 С inputmode="numeric": только цифры
0-9 (идеально!)Другие значения inputmode
<!-- Email -->
<input inputmode="email" placeholder="почта@example.com">
<!-- Телефон -->
<input inputmode="tel" placeholder="+7 9XX XXX XXXX">
<!-- URL -->
<input inputmode="url" placeholder="https://example.com">
<!-- Поиск -->
<input inputmode="search" placeholder="Поиск...">
<!-- Десятичное число -->
<input inputmode="decimal" placeholder="12.99">
🔸 Почему это важно
✅ Юзер видит нужную клавиатуру сразу
✅ Меньше ошибок при вводе
✅ Быстрее заполняет форму
✅ Работает на iOS и Android
🔸 Бонус: выключи автокапитализацию
Для полей "Почта или телефон":
<input type="text" autocapitalize="off" inputmode="numeric">
Буквы остаются строчными. Удобнее вводить почту!
Другие лайфхаки смотри по ссылке ⬇️
📎 Статья
🎙 Новости
📝 База вопросов