You are here
Uso de formularios con jQuery Mobile Programación 

Uso de formularios con jQuery Mobile

Uso de formularios con jQuery Mobile

En la entrega anterior, tuvimos la oportunidad de iniciar con la estructuración de un formulario, capaz de ser visible adecuadamente en los dispositivos móviles.

Para ello hicimos uso de la librería jQuery Mobile, la cual se encarga de dar los estilos adecuados a cada parte del formulario, una vez que le son agregados los atributos necesarios a cada una de las secciones.

En esta ocasión continuaremos con la elaboración de dicho form, pero haciendo uso de otra clase de elementos, como lo son los botones de tipo radio, las cajas de menú de selección, casillas de marcado y deslizadores.

Uso de botones radio y checkboxes

La funcionalidad de los botones de tipo radio y las casillas de marcado es muy similar, sin embargo su objetivo es distinto.

Por un lado los radio buttons son generalmente utilizados para escoger una sola opción, mientras que los checkboxes se implementan para que el usuario selecciones una o más opciones.

Ambos elementos son también candidatos a poder actualizarse y trabajar bien con dispositivos de tipo móvil.

Sin embargo requieren de un poco más de trabajo en el código, en comparación con los elementos de tipo input que manejamos en el artículo anterior.

En los ejemplos que manejamos anteriormente, bastaba con envolver cada campo del formulario con una etiqueta de tipo div que contara con el atributo “data-role” y el valor “fieldcontain”. Pero cuando se trabaja con botones de radio y casillas de verificación, se requiere de una etiqueta más.

Dentro del div que envolverá a los campos, debemos agregar un elemento de tipo fieldset, el cual se encargará de contener todas las piezas que pertenezcan al mismo grupo de opciones.

El fieldset deberá tener un atributo “data-role” con el valor “controlgroup”.

<fieldset data-role=”controlgroup”>

Una vez definido el fieldset, se pasa a agregar cada elemento radio button o checkbox dentro de éste.

Por ejemplo si quisiéramos establecer un grupo de opciones dentro de un formulario, para permitir que el usuario nos indique cuál es el mejor curso de la página, agregaríamos un código como el siguiente:

<div data-role=”fieldcontain”>

<fieldset data-role=”controlgroup”>

<legend>¿Cuál es el mejor tutorial de La Uneweb?:</legend>

<input type=”radio” name=”mejortutorial” id=”tutorial1″ value=”jQuery”>

<label for=”tutorial1″>jQuery</label>

<input type=”radio” name=”mejortutorial” id=”tutorial2″ value=”jQuery Mobile”>

<label for=”tutorial2″>jQuery Mobile</label>

<input type=”radio” name=”mejortutorial” id=”tutorial3″ value=”MooTools”>

<label for=”tutorial3″>MooTools</label>

</fieldset>

</div>

Para los checkboxes sería básicamente lo mismo. Si queremos un grupo se selección, que le permita al usuario escoger varias opciones de una lista de tutoriales haríamos lo siguiente:

<div  data-role=”fieldcontain”>

<fieldset data-role=”controlgroup”>

<legend>¿Cuáles son los mejores tutoriales de La Uneweb?:</legend>

<input type=”checkbox” name=”mejortutorial” id=”tutorial1″ value=”jQuery”>

<label for=”tutorial1″>jQuery</label>

<input  type=”checkbox”  name=”mejortutorial”  id=”tutorial2″  value=”jQuery Mobile”>

<label for=”tutorial2″>jQuery Mobile</label>

<input type=”checkbox” name=”mejortutorial” id=”tutorial3″ value=”MooTools”>

<label for=”tutorial3″>MooTools</label>

</fieldset>

</div>

Es importante que en ambos casos, incluyamos el label de cada elemento con su respectivo atributo for”, ya que de esta manera el usuario tendrá más área para poder dar clic y seleccionar una opción.

También existe la funcionalidad para cambiar dichos elementos de selección, en botones horizontales. Para lograr esto, basta con agregar el atributo “data-type” con el valor “horizontal” al elemento fieldset que contiene el rol de “controlgroup”.

Sin embargo, esta opción no es muy recomendada si vamos a manejar texto muy largo en las opciones.


Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts