comparte el articulo 

Uso de formularios con jQuery Mobile – Parte 1

Actualizado el 20/02/2013 < > 1 Comentario

Resumen: Estudiamos la manera en que jQuery Mobile maneja y despliega los formularios de una página para su uso en dispositivos móviles

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.

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

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

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

Añadir Comentario (Subir al texto)

1 Comentario

  1. daniman

    Hola, en esta parte hay un error en el código ultimo del formulario, en el textarea falta cerrar la etiqueta

    saludos y gracias por la guia!

    Martes, 28 de abril 2015

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras