Формы jQuery Mobile

jQuery Mobile автоматически добавляет элементы HTML-форм, которые обеспечивают удобный для касания вид.

Структура формы jQuery Mobile

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

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

  • Текстовое поле
  • Поле поиска
  • Одиночные переключатели
  • Флажки
  • Меню выбора
  • Слайдер
  • Переключатель с翻转

Когда вы работаете с формами jQuery Mobile, вам следует знать следующую информацию:

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

Пример

<form method="post" action="demoform.asp">
  <label for="fname">First name:</label>
  <input type="text" name="fname" id="fname">
</form>

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

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

Пример

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

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

Контейнер поля

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

Пример

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fname">First name:</label>
    <input type="text" name="fname" id="fname">
    <label for="lname">Last name:</label>
    <input type="text" name="lname" id="lname">
  </div>
</form>

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

Совет:Атрибут fieldcontain устанавливает стили для label и формных элементов на основе ширины страницы. При ширине страницы более 480px label автоматически располагается в одной строке с формным элементом. При ширине менее 480px label размещается над формным элементом.

Совет:Чтобы избежать автоматического применения стилей jQuery Mobile к нажимаемым элементам, используйте атрибут data-role="none":

Пример

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

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

Подача формы в jQuery Mobile

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