Від автора: наступним кроком у вивченні плюсів і мінусів Material Design Lite (MDL) будуть Текстові поля. Ці поля використовуються повсюдно: від пошуку форм, форм коментарів до контактів. Часто разом з текстовим полем йде кнопка.
Насправді, в MDL текстове поле аналогічно кнопці; поліпшені HTML тег до такої міри, щоб відповідати вимогам MDL. Давайте ще раз повторимо, перед подальшою роботою необхідно підключити бібліотеки MDL, стилі і JS файли у шапку документа.
Базове текстове поле
Для початку створюється порожній блок DIV з класами mdl-textfield і mdl-js-textfield, поверх цього блоку обертається тег форми. Якщо ви дивилися попередні уроки із серії, ви повинні бути знайомі з цими класами. У нашому випадку клас mdl-textfield відповідає за стилізацію через CSS, а клас mdl-js-textfield за динамічну поведінку за допомогою JS.
Всередині все ще порожнього DIV а створюємо текстовий поле вводу (або textarea) і лейбл до нього (обов’язковий). Цим елементам додаємо відповідні класи.
Ось і все, що вимагається; тільки що ми побудували базове текстове поле в MDL!
Можливі проблеми
Наш клас mdl-textfield__input добре працює тільки з текстовим типом инпута, наприклад, text, password, email, tel, url або search. Застосувавши даний клас до инпуту з типом color, date або file, можна отримати досить дивний результат. До того ж, текст лейблу буде дуже дивно відображатися, якщо додати до текстового поля плейсхолдер.
Спливаючий лейбл
Можна злегка поліпшити наше текстове поле, додавши спливаючий лейбл до нього. Щоб користувач фокусувався тільки на полі введення тексту, лейбл підстрибує вгору. Даний підхід досить поширений в дизайні, особливо в мобільних додатках, де місце обмежена.
З MDL дуже легко зробити спливаючі лейбли. У попередній HTML код необхідно додати клас mdl-textfield—floating-label до нашого блоку DIV.
Бінго! Тепер, з спливаючим лейблом, наше поле введення тексту виглядає набагато приємніше:
Можливі проблеми
Наш клас mdl-textfield__input добре працює тільки з текстовим типом инпута, наприклад, text, password, email, tel, url або search. Застосувавши даний клас до инпуту з типом color, date або file, можна отримати досить дивний результат. До того ж, текст лейблу буде дуже дивно відображатися, якщо додати до текстового поля плейсхолдер.
Спливаючий лейбл
Можна злегка поліпшити наше текстове поле, додавши спливаючий лейбл до нього. Щоб користувач фокусувався тільки на полі введення тексту, лейбл підстрибує вгору. Даний підхід досить поширений в дизайні, особливо в мобільних додатках, де місце обмежена.
З MDL дуже легко зробити спливаючі лейбли. У попередній HTML код необхідно додати клас mdl-textfield—floating-label до нашого блоку DIV.
Бінго! Тепер, з спливаючим лейблом, наше поле введення тексту виглядає набагато приємніше:
Розширюються текстові поля
У MDL є ще один дуже часто використовується шаблон, і це Розширюються текстові поля. Спочатку перед очима у нас тільки іконка, але по кліку на неї вона розкривається в повноцінне текстове поле. Часто цей шаблон застосовують до форм пошуку.
Додамо до блоку DIV клас mdl-textfield—expandable, тим самим перетворивши наше текстове поле розширюється. Також необхідно обернути наші инпут і лейбл ще один DIV з класом mdl-textfield__expandable-holder. І останнє, треба змінити тип инпута на search.
Потім, з допомогою лейбла посилається на конкретний инпут, необхідно створити кнопку за межами блоку mdl-textfield__expandable-holder.
Перевірка введених даних
У будь-яких формах вирішальним чинником служить безпека і перевірка даних. Адже ми не хочемо, щоб наші користувачі зіткнулися з іншим або навіть шкідливим контентом. Тому ми повинні стежити за тим, щоб введені користувачем дані збігалися з типом поля. Якщо текстове поле для введення електронної пошти, то необхідно забивати текст у форматі пошти – у рядку повинен бути символ»@», а також найменування домену.
До нашого превеликий щастя, в MDL вже вбудовані всі необхідні валідатори. Не потрібно додавати додаткову розмітку або присвоювати класи. Виберіть тип текстового поля, і MDL сам підкреслить поле червоним, якщо тип даних не збігається.
Але ми можемо встановити і свої стандарти форматів тексту, а також змінити візуальну реакцію на введення тексту. Наприклад:
Для відображення повідомлення про помилку, спочатку необхідно обмежити типи даних, дозволених до введення в поле инпут через атрибут pattern. Даний атрибут приймає регулярні вирази (Regex).
У нашому випадку я хочу, щоб ім’я користувача складалося тільки з букв латинського алфавіту без пробілів. Значить, нам потрібно таке формальний вираз: [A-Z,a-z]*.
Зауважте: Часто використовувані шаблони за регулярними виразами можна знайти на HTML5Pattern, наприклад, для перевірки пошти, пароль, телефону, поштового індексу та дати.
Тепер додамо повідомлення про помилку під лейблом в тезі span з класом mdl-textfield__error. Може бути, знадобиться додати парочку своїх стилів, щоб вирівняти позицію елемента і положення тексту.
Only alphabet and no spaces, please!
Все готово! Тепер, при введенні чисел, символів або прогалин під инпутом повинен відображатися текст повідомлення про помилку, виділений червоним кольором. Давайте спробуємо:
Висновок
Як ми з’ясували, в MDL легко надати текстових полів приємну форму, застосувавши кілька поширених шаблонів, таких як Спливаючі лейбли або розширюється текстове поле. Також ми на практиці переконалися в простоті додавання повідомлень про помилки при введення некоректних даних.