Uso de formularios con jQuery Mobile

En la actualidad, los formularios son una parte fundamental de la mayoría de los sitios web, ya que representan el principal medio de interacción entre los usuarios y la página. Gracias a su uso, el usuario puede ingresar algún tipo de información y obtener una respuesta por parte del sitio, por lo que su correcta usabilidad es muy importante.

Es por esta importancia, que el framework jQuery Mobile ha integrado dentro de su estructura, una serie de métodos que nos permiten hacer formularios usables, elegantes y funcionales en entornos móviles. En este artículo estudiaremos y analizaremos los detalles sobre cómo construir formularios y hacer uso de las convenciones de jQuery Mobile.

Manejo de formularios

jQuery Mobile utiliza los formularios de una manera particular, ya que todas las peticiones por defecto se realizan vía Ajax, es decir, los datos son enviados directamente a la locación que indicas en el atributo “action” del formulario para después obtener una respuesta, todo esto sin la necesidad de volver a cargar la página.

Todos los campos que pertenecen al formulario, son adaptados y mejorados para que puedan tener mejor usabilidad en un dispositivo móvil. Por ejemplo, los botones son ampliados automáticamente por jQuery Mobile, para que sean más fáciles de detectar y dar clic. En caso de que estas configuraciones por defecto no te agraden, el framework proporciona una opción para desactivar, ya se de forma general o exclusiva de un elemento.

Elaboración de un formulario

La estructura de un formulario debe verse afectada para lograr una correcta adaptación al entorno móvil. Ahora cada campo dentro de la etiqueta form, debe estar envuelto por un elemento div que contenga el atributo data-role con el valor “fieldcontain”. El uso de este div para envolver los campos del formulario, se recomienda para ayudar a jQuery Mobile a alinear la etiqueta y el campo correspondiente.

Por ejemplo, si quisiéramos realizar un formulario corto de registro, podemos agregar dos campos de tipo texto, uno para el nombre de usuario y otro para el correo electrónico, además un botón que se utilizará para enviar los datos al servidor. Todos estos elementos a su vez, deben estar envueltos en en div contenedor individualmente. Esto luciría de la siguiente manera en el código:

<div data-role="content">
<form action="registro.php" method="post">
<div data-role="fieldcontain">
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" id="nombre" value="" />
</div>
<div data-role="fieldcontain">
<label for="email">Email:</label>
<input type="text" name="email" id="email" value="" />
</div>
<div data-role="fieldcontain">
<input type="submit" name="submit" value="Enviar" />
</div>
</form>
</div>

Por defecto, los label del formulario toman una alineación superior, ya que esto da a los campos más espacio y hace que luzcan mejor en el dispositivo móvil. Por otro lado, si giramos la pantalla para utilizarla de manera horizontal, el formulario se adapta y aprovecha el espacio adicional, dando a los labels una alineación a la izquierda.

Envío del formulario

Como ya mencionamos anteriormente, el formulario toma el valor que le damos al atributo “action” dentro de la etiqueta “form” para determinar el destino de la información que el usuario ingresó. En nuestro caso, estamos utilizando una página php para recibir la información, pero es válido si tu prefieres utilizar otro tipo de lenguaje de lado servidor, o incluso simplemente apuntar a la misma página, el formulario no hará nada pero por lo menos no te marcará error al enviar la información.

El contenido de la página a la que apuntemos, variará según el tipo de respuesta que deseamos dar. En nuestro caso el archivo “registro.php” simplemente imprimirá en pantalla los datos ingresados por el usuario.

<div data-role="page">
<div data-role="header">
<h1>Resultados</h1>
</div>
<div data-role="content">
<?php
echo "<p> Nombre: " . $_REQUEST['nombre'] . "</p>";
echo "<p> Email: " . $_REQUEST['email'] . "</p>";
?>
</div>
</div>

Manejo de textareas

Otro gran ejemplo que nos ayuda a entender el manejo de jquery mobile sobre los elementos, son las textareas. Las áreas de texto, por defecto, puede ser elementos muy difíciles para trabajar en los dispositivos móviles, sobre todo cuando la cantidad de texto crece más allá del tamaño del textarea y las barras de desplazamiento aparecen.

Tomaremos como base nuestro formulario anterior y únicamente añadiremos un campo más, este será un textarea, dentro del cual el usuario deberá ingresar parte de sus hobbies.

<div data-role="content">
<form action="registro.php" method="post">
<div data-role="fieldcontain">
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" id="nombre" value="" />
</div>
<div data-role="fieldcontain">
<label for="email">Email:</label>
<input type="text" name="email" id="email" value="" />
</div>
<div data-role="fieldcontain">
<label for="hobbies">Hobbies:</label>
<textarea name="hobbies" id="hobbies" />
</div>
<div data-role="fieldcontain">
<input type="submit" name="submit" value="Enviar" />
</div>
</form>
</div>

Al visualizar el formulario en el dispositivo, podremos notar que el textarea se expande para abarcar lo más posible del ancho de la pantalla, y se muestra más largo que los elementos de texto anteriores. Esto hace que resulte más fácil para el usuario ingresar datos.

Cuando se llega al límite de líneas y el usuario continúa escribiendo, entonces jQuery Mobile expande automáticamente el área de texto. Con esto, se lograr evitar utilizar las barras desplazadoras, por lo que hay más espacio para el texto y resulta mucho más sencillo entender un escrito largo.

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>