Изучение Material Design Lite: Текстовые поля

Изучение Material Design Lite: Текстовые поля

От автора: следующим шагом в изучении плюсов и минусов Material Design Lite (MDL) будут Текстовые поля. Данные поля используются повсеместно: от форм поиска, форм комментариев до контактов. Часто вместе с текстовым полем идет кнопка.

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

Базовое текстовое поле

Для начала создается пустой блок DIV с классами mdl-textfield и mdl-js-textfield, поверх этого блока оборачивается тег формы. Если вы смотрели предыдущие уроки из серии, вы должны быть знакомы с этими классами. В нашем случае класс mdl-textfield отвечает за стилизацию через CSS, а класс mdl-js-textfield за динамическое поведение с помощью JS.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Внутри все еще пустого DIV’а создаем текстовое поле input (или textarea) и лейбл к нему (обязателен). Этим элементам добавляем соответствующие классы.

Вот и все, что требуется; только что мы построили базовое текстовое поле в MDL!

Расширяющиеся текстовые поля

В MDL есть еще один очень часто используемый шаблон, и это Расширяющиеся текстовые поля. Сначала перед глазами у нас только иконка, но по клику на нее она раскрывается в полноценное текстовое поле. Часто этот шаблон применяют к формам поиска.

Добавим к блоку DIV класс mdl-textfield—expandable, тем самым превратив наше текстовое поле в расширяющееся. Также необходимо обернуть наши инпут и лейбл в еще один DIV с классом mdl-textfield__expandable-holder. И последнее, нужно сменить тип инпута на search.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Затем, с помощью лейбла ссылающегося на конкретный инпут, необходимо создать кнопку за пределами блока mdl-textfield__expandable-holder.

Проверка введенных данных

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

К нашему превеликому счастью, в MDL уже встроены все необходимые валидаторы. Не нужно добавлять дополнительную разметку или присваивать классы. Установите тип текстового поля, и MDL сам подчеркнет поле красным, если тип данных не совпадает.

Но мы можем установить и свои стандарты форматов текста, а также изменить визуальную реакцию на ввод текста. К примеру:

Для отображения уведомления об ошибке, сначала необходимо ограничить типы данных, дозволенных к вводу в поле инпут через атрибут pattern. Данный атрибут принимает регулярные выражения (Regex).

В нашем случае я хочу, чтобы имя пользователя состояло только из букв латинского алфавита без пробелов. Значит, нам потребуется следующее регулярное выражение: [A-Z,a-z]*.

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

Теперь добавим сообщение об ошибке под лейблом в теге span с классом mdl-textfield__error. Может быть, понадобится добавить парочку своих стилей, чтобы выровнять позицию элемента и положение текста.

Все готово! Теперь, при вводе чисел, специальных символов или пробелов под инпутом должен отображаться текст сообщения об ошибке, выделенный красным цветом. Давайте попробуем:

Заключение

Как мы выяснили, в MDL легко придать текстовым полям приятную форму, применив несколько распространенных шаблонов, таких как Всплывающие лейблы или расширяющееся текстовое поле. Также мы на практике убедились в простоте добавления сообщений об ошибках при вводе некорректных данных.

Автор: Thoriq Firdaus

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки: , ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree