У тега <input> есть атрибут type, который меняет не только смысл поля, но и то, как оно ведёт себя: type="password" прячет символы точками, type="number" добавляет стрелки для увеличения числа, а на телефоне для type="email" или type="tel" появляется своя, удобная клавиатура.
В этом уроке
Попробуй поменять один из типов на date или tel - вид поля справа изменится сам.
input и атрибут type
Без атрибута type поле <input> ведёт себя как обычное текстовое поле - это значение по умолчанию. Указывая конкретный тип, ты не просто подписываешь поле для себя - браузер меняет его реальное поведение: показывает подходящую клавиатуру на телефоне, добавляет свои элементы управления (например, стрелки у чисел или выбор даты в календаре) и делает базовую проверку формата ещё до отправки формы.
<input type="email" name="email" placeholder="you@example.com"> - на телефоне появится клавиатура с @ и без лишних кнопок, а браузер проверит хотя бы базовый формат.
<input type="text" name="email" placeholder="you@example.com"> - технически сработает, но поле не получит ни удобную клавиатуру, ни встроенную проверку формата - хотя это бесплатно и просто добавляется одним словом в type.
Типы, которые не то, чем кажутся
Некоторые типы работают не совсем так, как ожидает новичок. type="number" не запрещает вводить ничего, кроме цифр - в поле реально можно набрать e, + и -, потому что спецификация допускает научную запись вроде 1e3 (это 1000), а не только простые целые числа. А type="email" проверяет только упрощённый общий шаблон адреса - не гарантирует, что такой ящик реально существует и что письмо на него дойдёт.
<input type="email" required><!-- + подтверждение по почте на сервере --> - клиентская проверка на глаз плюс реальное подтверждение через письмо на сервере.
<input type="email" required><!-- и всё, дальше не проверяем --> - опора только на проверку в браузере: она смотрит на формат текста, а не на то, существует ли такой адрес на самом деле.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Использовать type="text" для email, телефона или числа | Поле работает, но теряет бесплатную удобную клавиатуру на телефоне и базовую проверку формата | Указывать конкретный тип - email, tel, number и так далее |
| Считать, что type="number" пропускает только цифры | В поле всё равно можно ввести e, + и - для научной записи - это по спецификации, не баг | Не полагаться на type="number" как на строгий фильтр символов - при необходимости проверять значение дополнительно |
| Считать проверку type="email" в браузере достаточной защитой | Браузер проверяет только общий формат текста, а не то, существует ли такой адрес на самом деле | Добавлять реальную проверку на сервере (например, письмо с подтверждением) |
Шпаргалка
| Тип | Особенность |
|---|---|
| text | Обычное текстовое поле - значение по умолчанию |
| Клавиатура с @ на телефоне, упрощённая проверка формата (не факта существования) | |
| number | Стрелки для числа; пропускает e, + и - для научной записи |
| password | Скрывает введённые символы точками |
| tel, date, url | Своя клавиатура или элемент выбора на телефоне под конкретный формат |
Коротко: отвечаем на вопросы
Правда ли, что type="number" не даёт ввести ничего, кроме цифр?
Нет. В поле всё равно можно ввести буквы e, знаки + и - - они нужны для научной записи чисел вроде 1e3 (это 1000). Это задокументированная особенность спецификации, а не ошибка браузера.
Гарантирует ли type="email", что адрес настоящий и рабочий?
Нет. Браузер проверяет только упрощённый общий формат текста (что-то похожее на адрес), а не то, существует ли такой почтовый ящик на самом деле и дойдёт ли до него письмо. Для реальной проверки нужна проверка на сервере, например письмо с подтверждением.
Меняют ли типы вроде tel, email или number вид клавиатуры на телефоне?
Да, это реальное и документированное поведение - мобильные браузеры показывают клавиатуру, подходящую под тип поля (например, с @ для email или только с цифрами для number). Но это удобство ввода, а не проверка правильности данных - валидация происходит отдельно.
