You are here
Elaboración de un formulario en JQuery Mobile Sin categoría 

Elaboración de un formulario en JQuery Mobile

Elaboración de un formulario en JQuery Mobile

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 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>

 


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