Про поля ввода

Читал комментарии под одной из статей на хабре. И я чертовски согласен с мнением пользователей nronnie и Fines_Unes. Каких только извращений в простых текстбоксах не встретишь на просторах интернета...

Например, селект с флагом страны и телефонным кодом. Сервису действительно нужен выбор среди 213 кодов? Много ли жителей с кодом Конго покупают билеты в кинотеатры РБ? Да сервис, скорее всего, даже СМС не обработает и не вышлет на номер с таким кодом. Зачем? А все эти маски ввода и префиксы с кодом, которые нельзя удалить? Хочешь зарегистрироваться? Нет, сначала купи симку с номером на +7. А ещё это ломает автодополнение браузера, вставку номера из телефонной книги, вставку из буфера обмена. Зачем ломать стандартные функции?

Бывает, ставишь курсор в поле, ещё не начал вводить, а все уже красное, ошибка! Да я ещё не ввёл ничего, какая ошибка? А ошибка "Неверный ввод". Почему неверный? Сделайте задержку валидации, выведите информативные сообщения об ошибках, приведите пример ожидаемых данных. А ещё календари для ввода даты рождения, которые начинаются с текущего дня текущего года и не имеют возможности ввода с клавиатуры. Сиди и отлистывай пару десятков лет. Посмотрите метрику и поставьте начальную дату исходя из среднего возраста основной ЦА.

На мой взгляд лучшее решение:
- обычное текстовое поле с нужным типом и/или клавиатурой
- отдельный лейбл к нему (сверху или сбоку)
- placeholder с примером данных
- небольшой раскрывающийся блок или тултип с пояснением по формату данных и особенностям ввода. Простое поле. Без масок, селектов с кодами, автокорректировок, валидации по странным правилам и тд. Пользователь, которому важно, чтобы ему пришло СМС с кодом, прислали счёт на почту или перезвонили для уточнения деталей сам заинтересован в том, чтобы ввести корректные данные.

Советую доклад Виталия Фридмана про формы, а также другие его доклады про UX. И в целом подписаться на него в соц. сетях, если вы занимаетесь пользовательскими интерфейсами.