​​​​› Ахуенный дефолтный UX инпутов для мобил

Частенько далекие, от мира Сего, разрабы используют только input[type=text] вместо того, чтобы внести чутка больше магии ввиде UX для юзера. А еще чаще – подпиливают тонну пердежных плагинов в кастомные инпуты с всплывающими окнами, там где это не нужно и анриал юзать на тач-девайсах.

Приведу примеры отображения на iOS, Safari:
◦ Select – дропдавн с возможностью кастомизации через стили, с крутецким выбором пунктов на мобилах;
◦ input[type=date] – на мобилах имеет такой же барабан, как и select, но с тремя колонками и выбором дд/мм/гггг;
◦ input[type=tel] – создавался, как видно по названии, для инпутов ввода номера телефона, но может использоваться и для ввода цифровых данных. На мобиле отображает большие цифры, буквы не мешаются под рукой;
◦ input[type=email] – популярнейший тип инпута, наряду с input[type=password], созданный для ввода мыла. На клавиатуре появляется собачка (@);
◦ input[type=url] – крутое решение для инпутов ввода урлов: клавиатура пополняется тремя новыми клавишами - ., / и .com; ◦ input[type=search] – создан для инпута поиска по сайту. Надпись Enter заменяется на Search и при нажатии вызывает submit. К тому же, система распознает это поле и дает возможность искать по сайту, используя строку браузера (скриншот)

Типы инпутов, описанных выше, я собрал на код-карандаше. Смотрите, тестите, юзайте.

Ахтунг! Не стоит забывать что разные типы имеют свои собственные браузерные стили. Например, на iOS Safari:input имеет box-shadow, а input[type=search] закругленные углы.

И, конечно же, загуглив по запросу types of inputs html, вы найдете еще крутых типов инпута.

#ux #html