Поля Ввода Формы jQuery Mobile

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

Текстовые Поля ввода jQuery Mobile

Можно также использовать новые типы <input> HTML5:

Пример

<form method="post" action="demoform.php">
  <div data-role="fieldcontain">
    <label for="fullname">Имя:</label>
    <input type="text" name="fullname" id="fullname">

    <label for="bday">Дата Рождения:</label>
    <input type="date" name="bday" id="bday">

    <label for="email">E-mail:</label>
    <input type="email" name="email" id="email" placeholder="Ваш email..">
  </div>
</form>

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

Подсказка: Используйте заполнитель, чтобы указать короткую подсказку, которая описывает предполагаемое значение поля ввода:

<input placeholder="некоторый текст">

Текстовая область

Используйте <textarea> для многострочных текстовых полей ввода.

Примечание: Текстовая область будет автоматически расти, чтобы вместить новые строки, когда Вы вводите некоторый текст.

Пример

<form method="post" action="demoform.php">
  <div data-role="fieldcontain">
    <label for="info">Дополнительная информация:</label>
    <textarea name="addinfo" id="info"></textarea>
  </div>
</form>

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

Поисковый ввод

Поле ввода с type="search" является новым в HTML5 и определяет текстовое поле для того, чтобы ввести строку поиска:

Пример

<form method="post" action="demoform.php">
  <div data-role="fieldcontain">
    <label for="search">Поиск:</label>
    <input type="search" name="search" id="search">
  </div>
</form>

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

Переключатели

Переключатели используются, когда пользователь может выбрать только одно из ограниченного количества вариантов.

Чтобы создать набор переключателей, добавьте поле ввода с типом type="radio" и соответствующую метку. Оберните переключатели в элемент <fieldset>. Можно также добавить элемент <legend>, чтобы определить заголовок для <fieldset>.

Подсказка: Используйте data-role="controlgroup", чтобы собрать в группу кнопки:

Пример

<form method="post" action="demoform.php">
  <fieldset data-role="controlgroup">
    <legend>Выберите Ваш пол:</legend>
      <label for="male">Мужской</label>
      <input type="radio" name="gender" id="male" value="male">
      <label for="female">Женский</label>
      <input type="radio" name="gender" id="female" value="female">
  </fieldset>
</form>

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

Флажки

Флажки используются, когда пользователь может выбрать одну или более опций из заданного количества вариантов:

Пример

<form method="post" action="demoform.php">
  <fieldset data-role="controlgroup">
    <legend>Выберите цвета, которые Вам нравятся:</legend>
      <label for="red">Красный</label>
      <input type="checkbox" name="favcolor" id="red" value="red">
      <label for="green">Зеленый</label>
      <input type="checkbox" name="favcolor" id="green" value="green">
      <label for="blue">Голубой</label>
      <input type="checkbox" name="favcolor" id="blue" value="blue">
  </fieldset>
</form>

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

Еще примеры

Чтобы сгруппировать переключатели или флажки горизонтально, используйте data-type="horizontal":

Пример

<fieldset data-role="controlgroup" data-type="horizontal">

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

Можно также обернуть контейнер полей вокруг <fieldset>:

Пример

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>Выберите Ваш пол:</legend>
  </fieldset>
</div>

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

Если Вы хотите, чтобы одна из Ваших кнопок была "выбрана заранее", используйте HTML атрибут checked для <input>:

Пример

<input type="radio" checked>
<input type="checkbox" checked>

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

Далее: Язык сценариев для сети

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

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

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

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