Элементы ввода форм jQuery Mobile

Ввод текста jQuery Mobile

Поле ввода написано с использованием стандартных элементов HTML, jQuery Mobile устанавливает для них особые стили, подходящие для мобильных устройств. Вы также можете использовать новые типы <input> HTML5:

Пример

<form method="post" action="demoform.asp">
  <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">Электронная почта：</label>
    <input type="email" name="email" id="email" placeholder="Ваш адрес электронной почты..">
  </div>
</form>

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

Совет:Используйте placeholder для указания краткого提示а, описывающего ожидаемое значение поля ввода:

<input placeholder="sometext">

Текстовое поле

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

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

Пример

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

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

Поисковая строка

Тип ввода type="search" - это новый тип в HTML5, предназначенный для определения текстового поля для ввода поисковых слов:

Пример

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="search">Search:</label>
    <input type="search" name="search" id="search">
  </div>
</form>

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

Радиокнопки

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

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

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

Пример

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

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

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

Пример

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

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