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

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

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

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

<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
<link href='http://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.

<form action="">
  <div class="mdl-textfield mdl-js-textfield">
  </div>
</form>

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

<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.

<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, к примеру, для проверки почты, пароля, телефона, почтового индекса или даты.

<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. Может быть, понадобится добавить парочку своих стилей, чтобы выровнять позицию элемента и положение текста.

<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

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: , ,

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree