Основы Форм jQuery Mobile

jQuery Mobile автоматически стилизует HTML-формы, чтобы заставить их выглядеть привлекательными и благоприятными для касания.


Строение Формы jQuery Mobile

jQuery Mobile использует CSS для придания стиля элементам HTML-формы, делая их привлекательными и легкими в использовании.

В jQuery Mobile можно использовать следующие средства управления формой:

  • Поля Ввода ТекстаText Inputs
  • Поисковые Поля Ввода
  • Кнопки
  • Флажки
  • Меню Выбора
  • Ползунки
  • Переключатели

Работая с формами jQuery Mobile необходимо знать:

  • Каждый элемент <form> должен иметь атрибут метода и действия
  • Каждый элемент формы должен иметь уникальный атрибут "id". id должен быть уникальным для всех страниц сайта. Это связано с тем, что одностраничная модель навигации jQuery Mobile позволяет представлять несколько различных страниц в одно и то же время
  • Каждый элемент формы должен иметь метку. Установите атрибут for метки, чтобы он соответствовал id элемента

Пример

<form method="post" action="demoform.php">
  <label for="fname">Имя:</label>
  <input type="text" name="fname" id="fname">
</form>

Попробуйте сами »

Чтобы скрыть метку, используйте класс ui-hidden-accessible. Это часто используется, когда Вы хотите, чтобы атрибут заполнителя элемента служил меткой:

Пример

<form method="post" action="demoform.php">
  <label for="fname" class="ui-hidden-accessible">Имя:</label>
  <input type="text" name="fname" id="fname" placeholder="Имя...">
</form>

Попробуйте сами »

Контейнеры Полей

Чтобы метки и элементы формы смотрелись должным образом на более широких экранах, поместите их в элемент <div> или <fieldset> с атрибутом data-role="fieldcontain":

Пример

<form method="post" action="demoform.php">
  <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":

Пример

<label for="fname">Имя:</label>
<input type="text" name="fname" id="fname" data-role="none">

Попробуйте сами »

Отправка формы в jQuery Mobile

jQuery Mobile автоматически обработает отправку формы через AJAX и попытается интегрировать ответ сервера в DOM приложения.

Далее: Темы jQuery Mobile

Смотрите также
Комментарии
Написать

(обязательно)

(обязательно)

Это не спам (обязательно)