Formularios HTML5 con jQueryMobile

Tras la iniciación a la maquetación con jQueryMobile que publiqué ayer, toca complementarla con una introducción a los formularios.

Como es habitual en todo formulario HTML, los campos estarán encerrados entre etiquetas form, con su action y su method definidos. Existen varios tipos de controles, que son mas que suficientes para poder crear formularios complejos, que puedes consultar aquí.

Una de las opciones que nos reporta jQueryMobile es la de poder crear formularios “mini”, con una versión más pequeña de sus controles para facilitar la visualización en las pantallas de los móviles. Para ello debemos añadir el atributo data-mini=”true” en el controlgroup.

El atributo placeholder (del que también hablamos en este blog) juega un papel importante aquí. Si quieres ocultar la etiqueta label por motivos de accesibilidad pero que los lectores de pantalla puedan leerla, podras servirte de la clase ui-hidden-accessible y, con el atributo placeholder, usar el elemento de formulario con la etiqueta dentro.

Para deshabilitar un elemento del formulario usaremos el atributo disabled. En el caso de que necesitemos aplicar el estilo disabled a un elemento que no sea un control de formulario, podemos utilizar la clase ui-disabled sobre el elemento.

Ahora un ejemplo de un formulario con las etiquetas como placeholder y controles mini, para ilustrar lo explicado.

<form action="procesar.php" method="post" id="formEjemplo">
    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-mini="true">
            <legend>Login ejemplo:</legend>
            <label for="user" class="ui-hidden-accessible">Usero:</label>
            <input type="text" name="user" id="user" value="" placeholder="User" />
            <label for="password" class="ui-hidden-accessible">Usuario:</label>
            <input type="password" name="password" id="password" value="" placeholder="password" />
        </fieldset>
    </div>
</form>

Si usas un contenedor para controles de formularios (que es un elemento de jQueryMobile) y quieres ocultar la etiqueta y usar el texto placeholder, tienes que ocultarla en los atributos del div con class=”ui-hide-label” en lugar de en los del label, como en este ejemplo:

<div data-role="fieldcontain" class="ui-hide-label">
    <label for="user">Usero:</label>
    <input type="text" name="user" id="user" value="" placeholder="User" />
</div>

Y con esto ya puedes empezar a hacer tus formularios optimizados para móviles.

Iniciación a jQueryMobile: Maquetando web para móviles con HTML5

A la hora de programar webs para móvil el framework de javascript jQueryMobile, basado en jQuery, nos ofrece una gran productividad, simplificando profundamente las cuestiones de maquetación. Si ya conoces jQuery y jQueryUI la curva de aprendizaje será muy pequeña.

Este framework es compatible con todos los navegadores y sistemas operativos móviles actuales, es ligero (20kb), casi no utiliza imágenes, se puede combinar con PhoneGAP para realizar aplicaciones nativas y es libre y gratuito.

A la hora de crear la estructura, como en cualquier web, lo primero es empezar por la cabecera (la etiqueta HEAD). Ahí agregamos las referencias necesarias a jQuery, jQuery Mobile y el theme básico de CSS. Para definir el ancho de pantalla utilizamos meta viewport, lo dejaremos definido con la constante width=device-width y la escala mínima y máxima a 1; initial-scale=1.0 maximum-scale=1.0.

Una vez que hemos terminado de referenciar las librerías necesarias, creamos la estructura de la plantilla principal de la página utilizando HTML5, y luego definimos las areas de contenido (content region) que proporciona jQueryMobile. El atributo data-role nos permitirá maquetar con comodidad y estructurar la página. Especificaremos la página (data-role=”page”), el encabezado (data-role=”header”), el contenido (data-role=”content”) y el pié (data-role=”footer”). Estos data-role los utiliza jQueryMobile para en Widgets funcionales y con los estilos del theme utilizado las secciones definidas.

Creo que lo mejor es un ejemplo que ilustre lo comentado:

<!DOCTYPE html>
<html>
<head>
    <title>Página prueba</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>
<body> 
 
<!-- Página principal -->
<section data-role="page" data-title="Página de inicio">
 
    <header data-role="header">
        <h1>HW</h1>
    </header>
    <!-- end header -->
 
    <section data-role="content">
        <p>Hello world!</p>
    </section>
    <!-- end content -->
 
    <footer data-role="footer">
        <p>DonnieRock 2012</p>
    </footer>
    <!-- end footer -->  
 
</section>
<!-- end page -->
 
</body>
</html>

Pero el verdadero cambio respecto a la programación web tradicional es el concepto “page within page”. Dentro del mismo documento están incrustadas todas las páginas. De ahí que en el ejemplo de arriba utilizaramos el atributo data-role=page, porque tendremos que definir varias páginas, que se diferenciarán entre ellas por su atributo id, que será obligatorio para poder navegar entre ellas.

La navegación entre distintas páginas de un mismo documento es bastante sencilla, tenemos que poner en el ‘href’ del enlace el ‘id’ de la página destino y ya está. Podemos especificar el tipo de transición con el atributo data-transition, la transición por defecto es slide pero existen varias que puedes consultar en la página de jQuery. También podemos definir la dirección de la transición con el atributo data-direction.

Recuperaré el código del primer ejemplo, con alguna modificacación, para explicar esto:

<!DOCTYPE html>
<html>
<head>
    <title>Página prueba</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>
<body> 
 
<!-- Página principal -->
<section data-role="page" id="page1" data-title="Página de inicio">
 
    <header data-role="header">
        <h1>HW</h1>
    </header>
    <!-- end header -->
 
    <section data-role="content">
        <p>Hello world!</p>
    </section>
    <!-- end content -->

    <footer data-role="footer">
        <p>
            DonnieRock 2012 
           <a href="#page2" data-role="button" data-transition="slidedown">Ir a la página 2</a>
        </p>
    </footer>
    <!-- end footer -->  
 
</section>
<!-- end page 1-->

<!-- Segunda página -->
<section data-role="page" id="page2" data-title="Página 2">
 
    <header data-role="header">
        <h1>HW2</h1>
    </header>
    <!-- end header -->
 
    <section data-role="content">
        <p>Hello, again, world!</p>
    </section>
    <!-- end content -->
 
    <footer data-role="footer">
        <p>
            DonnieRock 2012 
           <a href="#page1" data-role="button" data-transition="slidedown" data-direction="reverse">Ir a la página 1</a>
        </p>
    </footer>
    <!-- end footer -->  
 
</section>
<!-- end page 2-->
 
</body>
</html>

Finalmente nos queda por elegir el “theme”. Podemos crearlo fácilmente con el ThemeRoller que hay en la web de jQueryMobile, con multitud de themes que podemos crear y asignar a cada componente que usemos en nuestra aplicación. También hay themes ya predefinidos, si no queremos rompernos la cabeza. Los themes son diferenciados por una letra identificativa, gracias a la cual podemos identificar el theme y aplicarlo a cualquier componente que queramos, usando el atributo data-theme. Tienes información sobre los distintos themes en la página de jQueryMobile. El theme además puede ser modificado con facilidad tocando los archivos css.

<section data-role="page" id="page1" data-title="Página de inicio" data-theme="b">
 
    <header data-role="header">
        <h1>HW</h1>
    </header>
    <!-- end header -->
 
    <section data-role="content">
        <p>Hello world!</p>
    </section>
    <!-- end content -->

    <footer data-role="footer">
        <p>
            DonnieRock 2012 
           <a href="#page2" data-role="button" data-transition="slidedown">Ir a la página 2</a>
        </p>
    </footer>
    <!-- end footer -->  
 
</section>

Bueno, espero con esto ya tienes unas nociones básicas de cómo empezar. Más adelante tocaré otros temas, como los formularios o la integración con PhoneGAP, de momento podéis ir ojeando esto.