Вивчення Material Design Lite: Текстові поля

14

Від автора: наступним кроком у вивченні плюсів і мінусів Material Design Lite (MDL) будуть Текстові поля. Ці поля використовуються повсюдно: від пошуку форм, форм коментарів до контактів. Часто разом з текстовим полем йде кнопка.

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

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

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

Всередині все ще порожнього DIV а створюємо текстовий поле вводу (або textarea) і лейбл до нього (обов’язковий). Цим елементам додаємо відповідні класи.

Username

Ось і все, що вимагається; тільки що ми побудували базове текстове поле в MDL!

Розширюються текстові поля

У MDL є ще один дуже часто використовується шаблон, і це Розширюються текстові поля. Спочатку перед очима у нас тільки іконка, але по кліку на неї вона розкривається в повноцінне текстове поле. Часто цей шаблон застосовують до форм пошуку.

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

Search

Потім, з допомогою лейбла посилається на конкретний инпут, необхідно створити кнопку за межами блоку mdl-textfield__expandable-holder.

Перевірка введених даних

У будь-яких формах вирішальним чинником служить безпека і перевірка даних. Адже ми не хочемо, щоб наші користувачі зіткнулися з іншим або навіть шкідливим контентом. Тому ми повинні стежити за тим, щоб введені користувачем дані збігалися з типом поля. Якщо текстове поле для введення електронної пошти, то необхідно забивати текст у форматі пошти – у рядку повинен бути символ»@», а також найменування домену.

До нашого превеликий щастя, в MDL вже вбудовані всі необхідні валідатори. Не потрібно додавати додаткову розмітку або присвоювати класи. Виберіть тип текстового поля, і MDL сам підкреслить поле червоним, якщо тип даних не збігається.

Вивчення Material Design Lite: Текстові поля

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

Вивчення Material Design Lite: Текстові поля

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

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

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

Username

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

Username
Only alphabet and no spaces, please!

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

Висновок

Як ми з’ясували, в MDL легко надати текстових полів приємну форму, застосувавши кілька поширених шаблонів, таких як Спливаючі лейбли або розширюється текстове поле. Також ми на практиці переконалися в простоті додавання повідомлень про помилки при введення некоректних даних.