Latest web development tutorials

JQuery Мобильный формы ввода

ввод текста окно JQuery Мобильный

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

примеров

<form method="post" action="demo_form.php">
<div class="ui-field-contain">
<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="你的电子邮箱..">
</div>
</form>

Попробуйте »

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

<input placeholder="sometext">

Text Field

Для многострочно ввода текста можно использовать <TextArea>.

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

примеров

<form method="post" action="demo_form.php">
<div class="ui-field-contain">
<label for="info">附加信息:</label>
<textarea name="addinfo" id="info"></textarea>
</div>
</form>

Попробуйте »


Поиск поля ввода

тип = "поиск" тип ввода является новым в HTML5, который определяется как полей поиска ввод текста:

примеров

<form method="post" action="demo_form.php">
<div class="ui-field-contain">
<label for="search">搜索:</label>
<input type="search" name="search" id="search">
</div>
</form>

Попробуйте »


кнопка радио

Когда пользователь выбирает ограниченное число выбрать только один вариант, когда с помощью кнопок радио.

Для того чтобы создать ряд переключателей, добавить вход и соответствующий ярлык с типом = "радио" есть. Кнопка радио заключена внутри элемента <FIELDSET>. Вы можете также добавить заголовок <Легенда> элемент для определения <FIELDSET>.

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

примеров

<form method="post" action="demo_form.php">
<fieldset data-role="controlgroup">
<legend>Choose your gender:</legend>
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male">
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female">
</fieldset>
</form>

Попробуйте »


флажок

Когда пользователь выбирает один или несколько параметров в течение ограниченного числа вариантов, использование флажков:

примеров

<form method="post" action="demo_form.php">
<fieldset data-role="controlgroup">
<legend>Choose as many favorite colors as you'd like:</legend>
<label for="red">Red</label>
<input type="checkbox" name="favcolor" id="red" value="red">
<label for="green">Green</label>
<input type="checkbox" name="favcolor" id="green" value="green">
<label for="blue">Blue</label>
<input type="checkbox" name="favcolor" id="blue" value="blue">
</fieldset>
</form>

Попробуйте »


примеров

Другие примеры

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

примеров

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

Попробуйте »

Вы также можете использовать поле контейнера, окруженную <FIELDSET>:

примеров

<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<legend>请选择您的性别:</legend>
</fieldset>
</div>

Попробуйте »

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

примеров

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

Попробуйте »

Вы можете поп на форме:

примеров

<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline"> Show Popup форму </a>

<Div данных роли = "всплывающее окно" ID = "myPopup" класс = "Пользовательский интерфейс-контент">
<Метод Form = "пост" действие = "demoform.php">
<Div>
<H3> Войти Информация </ h3>
<Метка для = класса "usrnm" = "щ-скрытых доступных"> Имя пользователя: </ метка>
<Тип входного = "текст" имя = "пользователь" ID = "usrnm" заполнитель = "Имя пользователя">
<Метка для = класса "PSWD" = "щ-скрытых доступных"> Пароль: </ метка>
<Тип = Введите имя "пароль" = "PASSW" ID = "PSWD" заполнитель = "пароль">
</ Div>
</ Форма>
</ Div>

Попробуйте »