Средний
10 уроков
(1 час 4 минуты)
Курс
jQuery mobile
Данный видеокурс посвящен jQuery Mobile — веб-фреймворку, который также известен как мобильный фреймворк. Разработка сфокусирована на кроссбраузерности с уклоном в сторону смартфонов и планшетов.

#5 — Компоненты интерфейса пользователя. Часть 3. Формы.

В этом уроке рассмотрим использование форм и их элементов. Формы jQuery Mobile также являются компонентами пользовательского интерфейса, для которых в фреймворке есть готовые визуальные решения.

Удобства использования формы jQuery Mobile

Фреймворк поддерживает использование обычных веб-форм для передачи данных приложению. По умолчанию передача происходит по технологии AJAX, с помощью методов get или post. Разработчик по своему желанию может не использовать AJAX для работы форм и использовать стандартный способ передачи данных из формы jQuery Mobile.

О типах полей и атрибутах для форм jQuery Mobile

Фреймворк jQuery Mobile поддерживает базовые типы полей формы для ввода данных, и отображает их в соответствии с текущей темой и указанным вариантом цвета. Кроме этого jQuery Mobile максимально оптимизирует отображение элементов для удобного просмотра на мобильных устройствах. Например, при вводе многострочного текста в поле, фреймворк использует переносы слов на несколько строк и увеличивает высоту поля ввода. Это позволяет избавиться от неудобной полосы прокрутки, которая может возникать на различных устройствах.

В своем приложении разработчик может использовать все стандартные типы полей и атрибутов спецификации HTML5. Обязательные поля ввода могут быть помечены атрибутом required, для вывода подсказки поля ввода можно использовать атрибут placeholder. Если браузер пользователя не поддерживает тип поля или его атрибут, то пользователь увидит обычный элемент ввода текста без потери функциональности приложения.

Работа с текстом для формы jQuery Mobile

Очень удобно с помощью фреймворка jQuery Mobile использовать специфические элементы ввода текста.

Разработчик может определить поле ввода текста с подсказкой ввода значения в виде ползункового регулятора. Это обычный элемент формы с типом range и атрибутами min, max, step. В результате пользователь будет взаимодействовать с этим элементом и выбирать необходимое значение наиболее удобным для него способом.

Кроме этого можно использовать радиокнопки, которые будут представлены в виде удобного списка доступных вариантов выбора, группы полей типа checkbox и списки выбора одного или нескольких значений элементов select.

Продолжая разработку нашего тестового приложения создадим страницу с формой для добавления новой записи в базу заметок и используем все необходимые элементы ввода данных.

Приятного всем просмотра! Учитесь с удовольствием!

https://youtu.be/PjH6-hJRUdE Bootstrap — валидация форм своими руками
https://github.com/andrIvash/quote-me — Ссылка на репозиторий тестового приложения

Материалы к уроку:
Делись:

Оставь комментарий!

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

Рекомендуемые курсы