Formulario de jQuery Mobile

jQuery Mobile añade automáticamente una excelente apariencia fácil de tocar a los formularios HTML.

Estructura de formulario de jQuery Mobile

jQuery Mobile utiliza CSS para establecer el estilo de los elementos de formulario HTML, haciendo que sean más atractivos y fáciles de usar.

En jQuery Mobile, puede usar los siguientes controles de formulario:

  • Caja de texto
  • Caja de búsqueda
  • Casilla de selección
  • Casilla de verificación
  • Menú de selección
  • Barra de deslizamiento
  • Interruptor de cambio

Al lidiar con formularios de jQuery Mobile, debe conocer la siguiente información:

  • El elemento <form> debe establecer las propiedades method y action
  • Cada elemento de formulario debe establecer la propiedad "id" única. Este id debe ser único en la página del sitio. Esto se debe a que el modelo de navegación de una sola página de jQuery Mobile permite que muchas "páginas" se presenten al mismo tiempo.
  • Cada elemento del formulario debe tener una etiqueta (label). Configure la propiedad for del label para que coincida con el id del elemento.

实例

<form method="post" action="demoform.asp">
  <label for="fname">First name:</label>
  <input type="text" name="fname" id="fname">
</form>

Prueba personalmente

Para ocultar el label, utilice la clase ui-hidden-accessible. Esto es muy común, cuando necesita que la propiedad placeholder del elemento actúe como label:

实例

<form method="post" action="demoform.asp">
  <label for="fname" class="ui-hidden-accessible">Nombre：</label>
  <input type="text" name="fname" id="fname" placeholder="Nombre...">
</form>

Prueba personalmente

Contenedor de campo

Si necesita que el label y los elementos del formulario se muestren correctamente en pantallas de gran anchura, utilice elementos <div> o <fieldset> con la propiedad data-role="fieldcontain" para envolver el label o los elementos del formulario:

实例

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

Prueba personalmente

Consejo:La propiedad fieldcontain establece los estilos del label y los controles de formulario basándose en el ancho de la página. Cuando el ancho de la página es mayor de 480px, se colocará automáticamente el label al lado del control de formulario. Cuando es menor de 480px, el label se colocará encima del elemento de formulario.

Consejo:Para evitar que jQuery Mobile aplique estilos automáticos a elementos clicables, utilice la propiedad data-role="none":

实例

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname"} data-role="none">

Prueba personalmente

Enviar formularios en jQuery Mobile

Consejo:jQuery Mobile enviará automáticamente el formulario a través de AJAX y intentará integrar la respuesta del servidor en el DOM de la aplicación.