Маска ввода

Что такое маска ввода

Маска ввода задаёт шаблон заполнения поля: какие символы и на каких местах можно вводить. Например, поле даты может разделять цифры точками, а поле номера заказа принимать две группы цифр с дефисом. Человек вводит значение в заданной структуре вместо того, чтобы самостоятельно расставлять разделители.

Маску используют в контактных формах, регистрации, заявках и анкетах, когда допустимый формат известен заранее. Она может сократить ошибки в разделителях и длине записи. Но это не гарантирует больше заявок: слишком жёсткий шаблон способен не пропустить настоящий телефон или нужный код.

Как работает шаблон

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

Обозначения не универсальны. В одном инструменте цифру задают одним символом, в другом другим. В документации stepFORM по маскам для цифры используется 9. Поэтому числовому коду из примера соответствует шаблон 99-9999. Это обозначение настройки, а не значение, которое посетитель должен ввести.

Сначала определите, какие ответы допустимы. Код фиксированной длины можно ограничить одним шаблоном, а для телефона посетителя из любой страны придётся учитывать разные коды и длины номера. Не знаете формат? Посмотрите, какие данные действительно встречаются в заявках, прежде чем включать ограничение. Маска не должна решать за бизнес, какие клиенты ему подходят.

Маска, подсказка и валидация

Валидация может проверять длину, допустимые символы, существование даты или другие условия. Всё зависит от правил: если проверяют только число цифр в телефоне, нельзя считать, что заодно подтвердили владельца номера или возможность дозвониться. Даже существующая дата ещё не говорит, что на неё можно записаться.

HTML-атрибут pattern тоже не стоит называть маской. По описанию MDN, он задаёт регулярное выражение для проверки значения. Сам по себе этот атрибут не расставляет разделители при наборе. Обязательность поля определяется отдельно: требование соблюдать формат не равно требованию оставить ответ.

Пример с датой: формат правильный, значение неверное

Рассмотрим простую маску: две цифры, точка, две цифры, точка и четыре цифры. Порядок указан явно: день, месяц, год. Это учебный пример проверки структуры, а не описание календарной проверки в stepFORM.

Запись 31.02.2026 подходит по числу цифр и разделителям. В календаре её нет. То же различие видно на 29.02.2026 и 29.02.2028: структура одинакова, но только вторая дата существует.

Для записи на услугу нужны ещё правила самой услуги. Есть ли свободное время? Принимает ли специалист в этот день? Можно ли выбрать прошедшую дату? Маска ни на один из этих вопросов сама по себе не отвечает. Если для задачи нужен выбор дня, рассмотрите календарь, но его ограничения и доступность записи тоже нужно проверить.

Где маска полезна, а где мешает

Телефон

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

Проверьте вставку номера с пробелами, скобками и знаком +. Человек может скопировать контакт, а не печатать его по цифре. Если нужны подтверждение номера или проверка связи, это отдельная процедура, например подтверждение кодом. Наличие маски не означает, что такая процедура подключена.

Код заказа и индекс

Фиксированная структура хорошо подходит к коду, который ваша система действительно выдаёт в одном формате. Однако 0042 нужно сохранить с нулями в начале: это идентификатор, и превращение в число 42 меняет его запись. Цифровая маска не гарантирует, что следующий сервис сохранит код без такого преобразования.

С индексами сначала учитывайте географию доставки: в разных странах встречаются разные длины и сочетания букв с цифрами. Не устанавливайте единое числовое ограничение, если принимаете адреса с другой структурой.

Имя, комментарий и свободный ответ

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

Что получает заявка после отправки

Запись на экране и переданное значение могут различаться. Одна реализация сохраняет код 12-3456 вместе с дефисом, другая передаёт 123456. Ни один вариант не универсально правильный. Важно заранее согласовать формат с системой, которая ищет заказ или обрабатывает заявку.

Не останавливайтесь на экране формы. Посмотрите сохранённый ответ и тот канал, где с ним будут работать: уведомление, выгрузку или подключённую систему. Если код виден в форме правильно, а поиск заказа не находит его после передачи, проблема может быть в преобразовании значения, а не в ответе посетителя.

Что проверить перед запуском

• Набор и исправление. Введите значение целиком, удалите символ в середине, выделите несколько цифр и замените их. Курсор и разделители не должны мешать исправлению.
• Вставку и автозаполнение. Попробуйте запись с разделителями и без них. Проверьте, не пропадают ли цифры и не появляется ли повторный код страны.
• Пустой и неполный ответ. Уточните, какие поля обязательны. Если значение не принято, объясните, что дописать, и сохраните уже введённые данные.
• Мобильный ввод. Проверьте форму на телефоне с экранной клавиатурой. Узкая ширина браузера полезна для проверки вёрстки, но не заменяет такой тест.
• Сохранённое значение. Сделайте тестовую отправку и сравните ответ с исходной записью, включая нули в начале и разделители.

Не заставляйте человека угадывать формат по пустым подчёркиваниям. Дайте полю постоянную подпись и короткое пояснение, например «Дата рождения, день.месяц.год». Рекомендации W3C по инструкциям к формам отдельно рассматривают форматы и подсказки. Placeholder не заменяет подпись и исчезает, когда поле заполняют.

Подходящая клавиатура и маска тоже разные вещи. Атрибут inputmode подсказывает браузеру вид экранной клавиатуры, но сам не проверяет значение. Эти технические свойства интерфейса не означают, что в конструкторе есть одноимённые настройки.

Маска ввода в stepFORM

В stepFORM маска доступна в виджете «Текстовый ввод». Настройка и поддерживаемые обозначения есть в документации выше. Выбирайте шаблон под данные конкретного поля, а после настройки проверьте, удобно ли заполнить его и какой ответ сохранился при тестовой отправке. Одна маска не подтверждает реальность номера и не проверяет правила записи на услугу.

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

Частые вопросы

Маска ввода и валидация это одно и то же?

Нет. Маска направляет ввод по шаблону, валидация проверяет значение по правилам. Они могут использоваться вместе. Простой шаблон даты не подтверждает, что такой день существует.

Подтверждает ли маска настоящий номер телефона?

Нет. Соответствие формату не подтверждает, что номер доступен и принадлежит человеку, который его указал. Для этого нужна отдельная проверка; её наличие нельзя вывести из наличия маски.

Можно ли использовать маску для даты?

Да, чтобы задать структуру записи. Но необходимо отдельно проверить календарную корректность и условия задачи. Например, 31.02.2026 подходит простому числовому шаблону, хотя такой даты не существует.

Маска делает поле обязательным?

Не сама по себе. Обязательность и допустимый формат задают разные требования. Проверяйте отдельно, можно ли пропустить поле и что произойдёт с неполным ответом.

Повышает ли маска конверсию формы?

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

Сохраняются ли разделители и нули в начале?

Это зависит от реализации и обработки данных после формы. Сделайте тестовую отправку и проверьте сохранённый ответ и передачу в рабочую систему. Для кода 0042 потеря начальных нулей меняет сам идентификатор.

Связанные материалы

• Документация по маскам ввода: настройка маски в виджете «Текстовый ввод».
• Почему форма не приносит заявки: диагностика потерь, включая мобильный ввод и ошибки.