Latest web development tutorials

jQuery Mobile formulario de entrada

cuadro de entrada de texto jQuery Mobile

Entrar en el campo a través de la codificación de los elementos HTML estándar, jQuery Mobile agregará su estilo para hacer que se vea más atractivo y más fácil de usar en los dispositivos móviles. También puede utilizar el nuevo HTML5 <input> Tipo:

Ejemplos

<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>

Trate »

Consejo: Utilice el marcador de posición para especificar una descripción breve que describe el valor esperado del campo de entrada:

<input placeholder="sometext">

campo de texto

Para varias líneas de entrada de texto puede utilizar <textarea>.

NOTA: Cuando se escribe un texto, campos de texto serán redimensionadas automáticamente para adaptarse a la nueva fila añadida.

Ejemplos

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

Trate »


Buscar cuadro de entrada

type = "buscar" tipo de cuadro de entrada es nuevo en HTML5, que se define como un campos de búsqueda de introducción de texto:

Ejemplos

<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>

Trate »


botón de opción

Cuando los usuarios seleccionan un número limitado de seleccione una opción sólo cuando se utilizan los botones de radio.

Con el fin de crear una serie de botones de radio, agregar la entrada y la etiqueta correspondiente con type = "radio" es. El botón de opción encerrada en el elemento <fieldset>. También puede añadir un <legend> elemento para definir <fieldset> título.

Consejo: El uso de datos-role = "grupo control" botón para armar:

Ejemplos

<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>

Trate »


caja

Cuando el usuario selecciona una o más opciones en un número limitado de opciones, casillas de verificación uso:

Ejemplos

<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>

Trate »


Ejemplos

más ejemplos

Para una combinación de botones de radio horizontales o casillas de verificación, utilice el tipo de datos = "horizontal":

Ejemplos

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

Trate »

También puede utilizar un campo contenedor rodeado de <fieldset>:

Ejemplos

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

Trate »

Si desea que su botón en unos atributos pre-seleccionado, utilice el código HTML <input> se revisa:

Ejemplos

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

Trate »

Usted puede hacer estallar en el formulario:

Ejemplos

<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline"> Mostrar forma móvil </a>

<Div data-role = "popup" id = "MyPopup" class = "ui-content">
<Form method = "post" action = "demoform.php">
<Div>
<H3> Información de acceso </ h3>
<Label for = clase "usrnm" = "ui-oculta-accesible"> Nombre de usuario: </ label>
<Input type = "text" name = "usuario" id = "usrnm" marcador de posición = "nombre de usuario">
<Label for = clase "pswd" = "ui-oculta-accesible"> Contraseña: </ label>
<Entrada type = "password" name = "passw" id = "pswd" marcador de posición = "contraseña">
</ Div>
</ Form>
</ Div>

Trate »