От автора: следующим шагом в изучении плюсов и минусов Material Design Lite (MDL) будут Текстовые поля. Данные поля используются повсеместно: от форм поиска, форм комментариев до контактов. Часто вместе с текстовым полем идет кнопка.
На самом деле, в MDL текстовое поле аналогично кнопке; улучшенные HTML тег до такой степени, чтобы соответствовать требованиям MDL. Давайте еще раз повторим, перед дальнейшей работой необходимо подключить библиотеки MDL, стили и файлы JS в шапку документа.
|
1 2 3 4 |
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"> <link href='//fonts.googleapis.com/css?family=Roboto:400,300,300italic,500,400italic,700,700italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="//storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-red.min.css" /> <script src="//storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js"></script> |
Базовое текстовое поле
Для начала создается пустой блок DIV с классами mdl-textfield и mdl-js-textfield, поверх этого блока оборачивается тег формы. Если вы смотрели предыдущие уроки из серии, вы должны быть знакомы с этими классами. В нашем случае класс mdl-textfield отвечает за стилизацию через CSS, а класс mdl-js-textfield за динамическое поведение с помощью JS.
|
1 2 3 4 |
<form action=""> <div class="mdl-textfield mdl-js-textfield"> </div> </form> |
Внутри все еще пустого DIV’а создаем текстовое поле input (или textarea) и лейбл к нему (обязателен). Этим элементам добавляем соответствующие классы.
|
1 2 3 4 5 6 |
<form action="#"> <div class="mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" type="text" id="username"/> <label class="mdl-textfield__label" for="username">Username</label> </div> </form> |
Вот и все, что требуется; только что мы построили базовое текстовое поле в MDL!
Расширяющиеся текстовые поля
В MDL есть еще один очень часто используемый шаблон, и это Расширяющиеся текстовые поля. Сначала перед глазами у нас только иконка, но по клику на нее она раскрывается в полноценное текстовое поле. Часто этот шаблон применяют к формам поиска.
Добавим к блоку DIV класс mdl-textfield—expandable, тем самым превратив наше текстовое поле в расширяющееся. Также необходимо обернуть наши инпут и лейбл в еще один DIV с классом mdl-textfield__expandable-holder. И последнее, нужно сменить тип инпута на search.
|
1 2 3 4 5 6 |
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable"> <div class="mdl-textfield__expandable-holder"> <input class="mdl-textfield__input" type="search" id="site-search" /> <label class="mdl-textfield__label" for="site-search">Search</label> </div> </div> |
Затем, с помощью лейбла ссылающегося на конкретный инпут, необходимо создать кнопку за пределами блока mdl-textfield__expandable-holder.
Проверка введенных данных
В любых формах решающим фактором служит безопасность и проверка данных. Мы ведь не хотим, чтобы наши пользователи столкнулись с другим или даже вредоносным контентом. Поэтому мы должны следить за тем, чтобы введенные пользователем данные совпадали с типом поля. Если текстовое поле для ввода электронной почты, то необходимо вбивать текст в формате почты – в строке должен быть символ @, а также наименование домена.
К нашему превеликому счастью, в MDL уже встроены все необходимые валидаторы. Не нужно добавлять дополнительную разметку или присваивать классы. Установите тип текстового поля, и MDL сам подчеркнет поле красным, если тип данных не совпадает.
Но мы можем установить и свои стандарты форматов текста, а также изменить визуальную реакцию на ввод текста. К примеру:
Для отображения уведомления об ошибке, сначала необходимо ограничить типы данных, дозволенных к вводу в поле инпут через атрибут pattern. Данный атрибут принимает регулярные выражения (Regex).
В нашем случае я хочу, чтобы имя пользователя состояло только из букв латинского алфавита без пробелов. Значит, нам потребуется следующее регулярное выражение: [A-Z,a-z]*.
Заметьте: Часто используемые шаблоны по регулярным выражениям можно найти на HTML5Pattern, к примеру, для проверки почты, пароля, телефона, почтового индекса или даты.
|
1 2 3 4 5 6 |
<form action="#"> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" pattern="[A-Z,a-z]*" id="username" /> <label class="mdl-textfield__label" for="username">Username</label> </div> </form> |
Теперь добавим сообщение об ошибке под лейблом в теге span с классом mdl-textfield__error. Может быть, понадобится добавить парочку своих стилей, чтобы выровнять позицию элемента и положение текста.
|
1 2 3 4 5 6 7 |
<form action="#"> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" pattern="[A-Z,a-z]*" id="username" /> <label class="mdl-textfield__label" for="username">Username</label> <span class="mdl-textfield__error">Only alphabet and no spaces, please!</span> </div> </form> |
Все готово! Теперь, при вводе чисел, специальных символов или пробелов под инпутом должен отображаться текст сообщения об ошибке, выделенный красным цветом. Давайте попробуем:
Заключение
Как мы выяснили, в MDL легко придать текстовым полям приятную форму, применив несколько распространенных шаблонов, таких как Всплывающие лейблы или расширяющееся текстовое поле. Также мы на практике убедились в простоте добавления сообщений об ошибках при вводе некорректных данных.
Автор: Thoriq Firdaus
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.
