Поле ввода

Почти любая форма на сайте — обратный звонок, оформление заказа, регистрация — состоит из полей input. Один и тот же тег ведёт себя по-разному в зависимости от типа: type="email" проверяет формат адреса и показывает на смартфоне клавиатуру с символом @, type="tel" открывает цифровую раскладку, type="date" выводит встроенный календарь. Неизвестный тип браузер молча превращает в обычное текстовое поле, поэтому новые типы использовать безопасно — это плавная деградация, заложенная в сам HTML.

Пример хорошо размеченного поля

<label for="phone">Телефон</label>
<input id="phone" name="phone" type="tel"
       autocomplete="tel" required
       placeholder="+7 900 000-00-00">

Здесь работает каждая деталь. Метка поля связана с ним через for и id: клик по слову «Телефон» ставит курсор в поле, а экранный диктор его озвучит. Атрибут autocomplete="tel" позволяет браузеру подставить номер из профиля, required не даст отправить форму пустой.

Атрибуты, которые чаще всего забывают

• name — без него значение поля вообще не уйдёт на сервер.
• autocomplete — со значениями вроде name, email, tel, street-address оформление заказа заметно ускоряется.
• inputmode — подсказывает тип клавиатуры, например numeric для кода из СМС, когда type="number" не подходит.
• label вместо одного placeholder — подсказка внутри поля исчезает при вводе, и человек забывает, что в нём просили.

Проверка в браузере и на сервере

Встроенная проверка — required, pattern, min, max, типы email и url — удобна для подсказок, но не защищает: запрос можно отправить в обход формы. Данные всё равно проверяют на сервере. В WordPress это делает плагин формы, например Contact Form 7 (подробнее — в статье про форму обратной связи на WordPress) с тегами вида [email* your-email]; в 1С-Битриксе — модуль веб-форм или собственный обработчик.