comparte el articulo 

Uso de formularios con jQuery Mobile – Parte 2

Actualizado el 26/02/2013 < > 0 Comentarios

Resumen: Continuamos con la implementación de formularios utilizando jQuery Mobile, en esta parte centramos el estudio en los elementos orientados a la selección de opciones

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 Webera?:</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 Webera?:</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.

Menús de selección

Todo diseñador web que haya tenido la experiencia de trabajar con formularios en un proyecto, sabe que el estilo de los elementos select es uno de los más difíciles de adaptar y manejar. Esto se debe a que la visualización de estos elementos, esta definida por el explorador que se usa para ingresar a la página.

En el caso de los dispositivos móviles, esta no es la excepción. jQuery Mobile ha podido establecer una gran uniformidad en la apariencia inicial del select, pero una vez que se despliega el menú, cada dispositivo toma parte y renderíza el menú de manera distinta.

Para definir un elemento select con correcta visualización en dispositivos móviles, basta con establecer el siguiente código:

<div data-role="fieldcontain">
  <legend for="mejortutorial">¿Cuáles son los mejores tutoriales de La Webera?:</legend>
  <select name="mejortutorial" id="mejortutorial">
    <option value="jQuery">jQuery</option>
    <option value="jQuery Mobile">jQuery Mobile</option>
    <option value="MooTools">MooTools</option>    
  </select>
</div>

Al igual que con los botones de tipo radio y checkboxes, podemos agrupar un cierto número de selects. Para ello, también haremos uso de un fieldset que tome el rol de “controlgroup”.

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
  <legend>Fecha de nacimiento:</legend>

  <label for="dia">Día</label>
  <select name="dia" id="dia">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    ...
  </select>

  <label for="mes">Mes</label>
  <select name="mes" id="mes">
    <option value="1">Enero</option>
    <option value="2">Febrero</option>
    <option value="3">Marzo</option>
    ...
  </select>

  <label for="ano">Año</label>
  <select name="ano" id="ano">
    <option value="1920">1920</option>
    <option value="1921">1921</option>
    <option value="1922">1922</option>
    ...
  </select>
  </fieldset>
</div>

Al momento de visualizar esta estructura en el navegadores, podremos notar claramente la agrupación de selects, gracias a que jQuery Mobile agrega un diseño que simula un contenedor con esquinas redondeadas. Dicha agrupación, también puede desplegarse horizontalmente si así lo queremos, para lograrlo basta con agregar el atributo “data-type” y darle el valor “horizontal”.

Otros elementos

Además de embellecer y mejorar la usabilidad de los elementos tradicionales de un formulario, jQuery Mobile permite el uso de otra clase de elementos que quizás no son tan utilizados, pero que han llegado para marcar cierta tendencia.

Estos elementos no son muy vistos en páginas normales, ya que hacen uso de HTML5, y como todos sabemos, este no es interpretado correctamente por todos los navegadores. Entre estos encontramos a los deslizadores, los interruptores y a los campos de búsqueda.

Los campos para búsqueda se agregan de la siguiente manera:

<div data-role="fieldcontain">
  <label for="nombre">Nombre:</label>
  <input type="search" name="nombre" id="nombre" value="" />
</div>

Con el atributo type indicamos que es un campo para buscar, y gracias a esto podemos indicarle a jQuery Mobile que aplique otro tipo de visualización. Y es así, como un icono con una figura de lupa se agrega al borde izquierdo del campo, y un icono para eliminar el contenido de la caja se agrega a la izquierda.

Por su parte, para agregar un campo de tipo interruptor, basta con añadir un rol de tipo “slider” al elemento select:

<div data-role="fieldcontain">
  <label for="poder">Poder:</label>
  <select name="poder" id="poder" data-role="slider">
    <option value="0">Apagado</option>
    <option value="1">Encendido</option>
  </select>
</div>

Mientras que para obtener un deslizador, tenemos que darle un tipo “range” a un input, como se muestra en el siguiente código:

<div data-role="fieldcontain">
  <label for="temperatura">Temperatura:</label>
  <input type="range" name="temperatura" id="temperatura" min="0" max="100" value="30" data-highlight="true"> °C
</div>

Publicado el 26/02/2013, última actualización 26/02/2013.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras