Основы Форм jQuery Mobile
jQuery Mobile автоматически стилизует HTML-формы, чтобы заставить их выглядеть привлекательными и благоприятными для касания.
Строение Формы jQuery Mobile
jQuery Mobile использует CSS для придания стиля элементам HTML-формы, делая их привлекательными и легкими в использовании.
В jQuery Mobile можно использовать следующие средства управления формой:
- Поля Ввода ТекстаText Inputs
- Поисковые Поля Ввода
- Кнопки
- Флажки
- Меню Выбора
- Ползунки
- Переключатели
Работая с формами jQuery Mobile необходимо знать:
- Каждый элемент <form> должен иметь атрибут метода и действия
- Каждый элемент формы должен иметь уникальный атрибут "id". id должен быть уникальным для всех страниц сайта. Это связано с тем, что одностраничная модель навигации jQuery Mobile позволяет представлять несколько различных страниц в одно и то же время
- Каждый элемент формы должен иметь метку. Установите атрибут for метки, чтобы он соответствовал id элемента
Пример
<label for="fname">Имя:</label>
<input type="text" name="fname" id="fname">
</form>
Попробуйте сами »
Чтобы скрыть метку, используйте класс ui-hidden-accessible. Это часто используется, когда Вы хотите, чтобы атрибут заполнителя элемента служил меткой:
Пример
<label for="fname" class="ui-hidden-accessible">Имя:</label>
<input type="text" name="fname" id="fname" placeholder="Имя...">
</form>
Попробуйте сами »
Контейнеры Полей
Чтобы метки и элементы формы смотрелись должным образом на более широких экранах, поместите их в элемент <div> или <fieldset> с атрибутом data-role="fieldcontain":
Пример
<div data-role="fieldcontain">
<label for="fname">Имя:</label>
<input type="text" name="fname" id="fname">
<label for="lname">Фамилия:</label>
<input type="text" name="lname" id="lname">
</div>>
</form>
Попробуйте сами »
Атрибут fieldcontain стилизует метки и средства управления формой на основе ширины страницы. Когда ширина страницы больше чем 480px, это автоматически располагает метку на той же самой строке, что и элемент управления формой. Когда ширина меньше чем 480px, метка будет помещена выше элемента формы.
Подсказка: Чтобы запретить jQuery Mobile автоматически стилизовать касаемые элементы, используйте атрибут data-role="none":
Пример
<input type="text" name="fname" id="fname" data-role="none">
Попробуйте сами »
Отправка формы в jQuery Mobile
jQuery Mobile автоматически обработает отправку формы через AJAX и попытается интегрировать ответ сервера в DOM приложения.