Від автора: наступним кроком у вивченні плюсів і мінусів 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 є ще один дуже часто використовується шаблон, і це Розширюються текстові поля. Спочатку перед очима у нас тільки іконка, але по кліку на неї вона розкривається в повноцінне текстове поле. Часто цей шаблон застосовують до форм пошуку.
Додамо до блоку 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 легко надати текстових полів приємну форму, застосувавши кілька поширених шаблонів, таких як Спливаючі лейбли або розширюється текстове поле. Також ми на практиці переконалися в простоті додавання повідомлень про помилки при введення некоректних даних.
