Атрибут type тега input. Повышаем usability

как заполнять атрибут type у inputПривет, Друзья и Коллеги! Сегодня хочу поговорить про юзабилити контактных форм. Речь пойдет об атрибуте type тега input. Возможно вы заметили из прошлых статей, посвященных формам обратной связи, что для поля, в котором пользователь будет вводить свой номер телефона, прописано type=”tel”, а для поля, в котором нужно вводить email прописан атрибут type="email".

Все это сделано не случайно. Ведь можно было оставить type="text", и все работало бы не плохо.

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

Особенно это актуально для мобильных браузеров, так, указав type="tel" в устройстве с сенсорным экраном автоматически откроется клавиатура с цифрами. Что не может не порадовать пользователя :)

атрибут imput type tel

Если у вас есть input, в котором пользователь должен оставить email, то средствами html5 можно сделать проверку на наличие символа "@" и не позволять отправку формы, до того, как будет введен более-менее корректный адрес. Делается это путем дописывания атрибута required:

<input type="email" name="mail" placeholder="Введите ваш email" required/>

атрибут type у тега input

Как видите, на рисунке справа, в у пользователя, при клике по полю с атрибутом type="email" появились 2 дополнительные кнопочки. Одна с символом "@", а другая с точкой. Что несомненно тоже облегчает заполнение данного поля.

Атрибут required можно использовать и для других полей. Он будет контролировать наличие символов. То есть, если вам важно, чтобы все поля формы были заполнены, смело ставьте его и тогда форма не будет отправлена, пока все её поля не будут заполнены, а пользователь увидит подсказку:

Атрибут type email в input

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

Ну и в завершении сказать, что если у вас достаточно высокая доля трафика с мобильных устройств, то вам обязательно нужно использовать эти атрибуты. Да и в любом другом случае тоже. Спецификация html5 - утверждена, так что теперь правильно делать именно так так.

А на сегодня - все. Пока. Хорошего вам настроения!

8 комментариев

  1. DMITRY

    Рад , что нашел твой блог!
    Спасибо!

    1. dimadv7

      Спасибо :)

  2. Сергей

    А подскажи пожалуйста, можно ли, чтоб у поля с type=”tel” сохранялся дизайн который у type=”text”?
    у меня после присвоения type=”tel” форма суживается в полтора раза. Задать фиксированную ширину не могу, так как сайт адаптивный и ширина поля ввода меняется на разных расширениях.
    Спасибо.

    1. dimadv7

      Конечно можно, задайте такие же свойства как у инпута с type="text". Честно говоря, немного странный вопрос. У вас в таблице стилей, скорее всего следующая структура

      input[type="text"] {

      То есть для всех полей с инпут type="text", но когда вы изменили его, то у вас соответственно пропали стили для соответствующего поля.

    2. Сергей

      Дело в том, что не смог найти в своей таблице стилей строки отвечающие за ширину поля.
      Наверное они в использованном мной flat ui bootstrap фреймворке, не хотел туда залазить с исправлениями, там все очень для меня замутно через адаптивность

    3. dimadv7

      Ну а как же по другому? Нужно залезть. Сделайте резервную копию и не переживайте)

  3. serialmint.ru

    Простите как сделать так чтоб поле сообщения не растягивалось, точнее чтобы можно было в CSS не только указать ширину в % но и высоту - без всякого растягивания?

    1. dimadv7

      Не совсем понял вопрос, ну в пикселях или в процентах задать и высоту. В чем проблема то?

Добавить комментарий