Привет, Друзья и Коллеги! Сегодня хочу поговорить про юзабилити контактных форм. Речь пойдет об атрибуте type тега input. Возможно вы заметили из прошлых статей, посвященных формам обратной связи, что для поля, в котором пользователь будет вводить свой номер телефона, прописано type=”tel”, а для поля, в котором нужно вводить email прописан атрибут type="email".
Все это сделано не случайно. Ведь можно было оставить type="text", и все работало бы не плохо.
Но дело в том, что, указывая этот атрибут мы явно говорим браузеру, какое содержимое должно находиться в форме.
Особенно это актуально для мобильных браузеров, так, указав type="tel" в устройстве с сенсорным экраном автоматически откроется клавиатура с цифрами. Что не может не порадовать пользователя :)
Если у вас есть input, в котором пользователь должен оставить email, то средствами html5 можно сделать проверку на наличие символа "@" и не позволять отправку формы, до того, как будет введен более-менее корректный адрес. Делается это путем дописывания атрибута required:
<input type="email" name="mail" placeholder="Введите ваш email" required/>
Как видите, на рисунке справа, в у пользователя, при клике по полю с атрибутом type="email" появились 2 дополнительные кнопочки. Одна с символом "@", а другая с точкой. Что несомненно тоже облегчает заполнение данного поля.
Атрибут required можно использовать и для других полей. Он будет контролировать наличие символов. То есть, если вам важно, чтобы все поля формы были заполнены, смело ставьте его и тогда форма не будет отправлена, пока все её поля не будут заполнены, а пользователь увидит подсказку:
Это подсказка в каждом браузере имеет свой вид. Стилизовать ее можно псевдоклассами, которые поддерживаются не всеми браузерами. Поэтому, пока не буду о них рассказывать.
Ну и в завершении сказать, что если у вас достаточно высокая доля трафика с мобильных устройств, то вам обязательно нужно использовать эти атрибуты. Да и в любом другом случае тоже. Спецификация html5 - утверждена, так что теперь правильно делать именно так так.
А на сегодня - все. Пока. Хорошего вам настроения!
8 комментариев
Рад , что нашел твой блог!
Спасибо!
Спасибо :)
А подскажи пожалуйста, можно ли, чтоб у поля с type=”tel” сохранялся дизайн который у type=”text”?
у меня после присвоения type=”tel” форма суживается в полтора раза. Задать фиксированную ширину не могу, так как сайт адаптивный и ширина поля ввода меняется на разных расширениях.
Спасибо.
Конечно можно, задайте такие же свойства как у инпута с type="text". Честно говоря, немного странный вопрос. У вас в таблице стилей, скорее всего следующая структура
input[type="text"] {То есть для всех полей с инпут type="text", но когда вы изменили его, то у вас соответственно пропали стили для соответствующего поля.
Дело в том, что не смог найти в своей таблице стилей строки отвечающие за ширину поля.
Наверное они в использованном мной flat ui bootstrap фреймворке, не хотел туда залазить с исправлениями, там все очень для меня замутно через адаптивность
Ну а как же по другому? Нужно залезть. Сделайте резервную копию и не переживайте)
Простите как сделать так чтоб поле сообщения не растягивалось, точнее чтобы можно было в CSS не только указать ширину в % но и высоту - без всякого растягивания?
Не совсем понял вопрос, ну в пикселях или в процентах задать и высоту. В чем проблема то?