jQuery Mobile automáticamente formularios HTML de estilo para que se vean atractivo y agradable al tacto.
jQuery Mobile Form Estructura
jQuery Mobile utiliza CSS para elementos de formulario HTML de estilo, que las hace atractivas y fáciles de usar.
En jQuery Mobile se pueden utilizar los siguientes controles de formulario:
- Las entradas de texto
- Las entradas de la búsqueda
- Botones de radio
- Las casillas de verificación
- seleccionar menús
- deslizadores
- Interruptores de palanca flip
Cuando se trabaja con formas jQuery Mobile usted debe saber:
- La <form> elemento debe tener un método y un atributo de acción
- Cada elemento del formulario debe tener un único atributo "id". El ID debe ser único en las páginas del sitio. Esto se debe a una sola página modelo de navegación de jQuery Mobile permite a muchos diferentes "páginas" estén presentes al mismo tiempo,
- Cada elemento del formulario debe tener una etiqueta. Establecer el atributo de la etiqueta para que coincida con el id del elemento
Ejemplo
<form method="post" action="demoform.asp" >
<label for="fname"> First name: </label>
<input
type="text" name="fname" id="fname" >
</form>
Inténtalo tú mismo " Consejo: Utilice un marcador de posición para especificar un breve atisbo que describe el valor esperado de un campo de entrada:
Ejemplo
<label for="fname">First name:</label>
<input
type="text" name="fname" id="fname" placeholder="First name..." >
Inténtalo tú mismo " Consejo: Para ocultar la etiqueta, utilice el "ui-hidden-accessible" clase. A menudo se utiliza cuando se desea atributo marcador de posición del elemento que sirva para el etiquetado:
Ejemplo
<label for="fname"
class="ui-hidden-accessible" ">First name:</label>
<input
type="text" name="fname" id="fname" placeholder="First name..." >
Inténtalo tú mismo " Consejo: Si desea un "clear button" (un icono X en el lado derecho del campo de entrada que borra el contenido del campo), añadir los datos de-clara-BTN = "true" atributo:
Ejemplo
<label for="fname">First name:</label>
<input type="text" name="fname"
id="fname" data-clear-btn="true" >
Inténtalo tú mismo " El "clear button" se puede añadir en cualquier <input> elemento, a excepción de <textarea> . Los campos de búsqueda tienen este atributo se establece en "true" por defecto - para cambiarlo, sólo tiene que especificar data-clear-btn="false" .
Forma jQuery Mobile Botones
Botones en formas están codificados con el estándar HTML <input> elementos (botón RESET, enviar). Están decoradas de forma automática, que las hace atractivas y fáciles de usar en ambos dispositivos móviles y ordenadores de sobremesa:
Ejemplo
<input type="button" value="Button">
<input type="reset" value="Reset
Button">
<input type="submit" value="Submit Button">
Inténtalo tú mismo " Para el estilo, además, un botón de <input>, utilice cualquiera de los atributos Data- * enumerados en la siguiente tabla:
Valor en negrita indica valor predeterminado.
| Atributo | Valor | Descripción |
|---|---|---|
| data-corners | true | false | Especifica si el botón debe tener esquinas redondeadas o no |
| data-icon | Icons Reference | Especifica el icono del botón |
| data-iconpos | left | right | top | bottom | notext | Especifica la posición del icono |
| data-inline | true | false | Especifica si el botón debe ser en línea o no |
| data-mini | true | false | Especifica si el botón debe ser pequeño o no |
| data-shadow | true | false | Especifica si el botón debe tener o no sombras |
Incluir o excluir el atributo (s) que desea / no quiero:
<input type="submit" value="Submit" data-icon="check"
data-iconpos="right" data-inline="true">
Inténtalo tú mismo " Field Containers
Para hacer etiquetas y elementos de formulario se ven correctamente en pantallas más anchas, envolver un <div> o <fieldset> elemento con el "ui-field-contain" clase alrededor del elemento de etiqueta / forma:
Ejemplo
<form method="post" action="demoform.asp">
<div class="ui-field-contain" >
<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>
Inténtalo tú mismo " El "ui-field-contain" etiquetas de estilo de clase y los controles de formularios basados en el ancho de la página. Cuando el ancho de la página es mayor que 480px, se produce automáticamente la etiqueta en la misma línea que el control de formulario. Cuando menos de 480px, la etiqueta se coloca por encima del elemento de formulario.
Clave: Para evitar jQuery Mobile para automáticamente los elementos sangrables / estilo se puede hacer clic, utilizan el data-role="none" atributo:
Ejemplo
<label for="fname">First name:</label>
<input type="text" name="fname"
id="fname" data-role="none" >
Inténtalo tú mismo " Envío del formulario en jQuery Mobile
jQuery Mobile se encargará automáticamente el envío de formularios a través de AJAX, y tratará de integrar la respuesta del servidor en el DOM de la aplicación.