jQuery Mobile Formularios 2

Por: Mónica Arias Crisóstomo

 Formulario en HTML5

Un formulario es una herramienta imprescindible en HTML por que se encarga

de gestionar los datos introducidos por el usuario. Un sitio Web interactivo y
dinámico dispone de un formulario para gestionar la comunicación entre los
usuarios, para enviar archivos a un servidor, para procesar un pedido o
incluso, seleccionando diferentes controles de un formulario, cambiar la
interfaz de una página Web.
Este módulo esta dedicado
a crear formularios
<form>
directamente con código <p><input type="text">

usando HTML5, podemos Nombre</p>

<p><input type="text">
usar desde el blog de Apellido</p>
<p><textarea
notas hasta Dreamweaver, placeholder="Tu
comentario"></textarea></
con los mismos resultados; p>
<p><input type="submit"
al hacer los formularios > <input type="reset"></p>
</form>
usando HTML5
directamente, tendremos
más opciones, mejor
control y seguridad
optimizada, que si
usáramos solo el menú de
Dreamweaver para armar
el formulario.
 Los formularios se insertan a través de las etiquetas <form> y </form>.
Entre dichas etiquetas habrá que insertar los diferentes objetos que
formarán el formulario. la etiqueta <form> tiene los siguientes atributos:

El atributo action indica una dirección de correo electrónico a la que mandar

el formulario, o la dirección del programa que se encargará de procesar el
contenido del formulario.

Visita: http://www.w3schools.com/tags/att_form_action.asp
 El atributo enctype indica el modo en que será cifrada la
información para su envío. Por defecto tiene el
valor application/x-www-form-urlencoded.

El atributo method indica el método mediante el que se

transferirán las variables del formulario. Su valor puede
ser get o post.

El valor get se utiliza cuando no se van a producir cambios en ningún documento o

programa que no sea el navegador del usuario que pretende mandar el formulario,
como ocurre cuando se realizan consultas sobre una base de datos.

El valor post se utiliza cuando sí se van a producir cambios, como ocurre cuando el
usuario manda datos que deben ser almacenados en una base de datos.
Se recomienda utilizar el valor post.

Por ejemplo, podríamos insertar un formulario escribiendo el siguiente código:

<form action="mailto:formularios@correo.com" method="post" enctype=
"text/plain" >
...
</form>
Cuando se rellena un formulario y se envía, el navegador, mediante el método
de envió elegido (get o post) manda los datos a un servidor Web.

Un servidor Web se puede imaginar como un "disco duro" más grande. En los
servidores se suben las páginas Web. El espacio donde se suben la página Web
se llama "host" y debe ser contratado mediante alguna empresa que ofrece
servicio de hosting. Igual como los ordenadores, un servidor Web trabaja con
varios tipos de software o plataformas. Cuando hablamos de hosting Web dos de
las plataformas de mayor demanda son Windows y Linux. Aunque estos
sistemas operativos tienen diferencias de gran relevancia, en el ambiente web su
diferencia radica en el tipo de lenguajes de programación y bases de datos que
soportan, como lo veremos a continuación:
El servidor Linux: Estos servidores cuentan con soporte para PHP y bases de
datos MySQL y PostgreSQL entre otras por lo cual son la mejor opción para
sitios con aplicaciones desarrolladas en estos tipos de lenguajes.

El servidor Windows: En estos tipos de servidores se podrán publicar sitios

desarrollados en HTML, ASP, .NET e incluso PHP aunque no suele ser una
opción frecuente; respecto a las bases de datos cuentan con soporte para
Excel, Access, SQL Server, MySQL y PostgreSQL.
La pregunta que viene a
continuación es ¿cómo sabe el
navegador donde enviar los
datos del formulario para ser
procesados? Aquí entra en
acción el atributo @action.
Dependiendo de plataforma de hosting
(Windows o Linux) utilizamos un
lenguaje de programación específico.
Con este lenguaje de programación
(Php, ASP, etc.) se escribe el programa
que va a procesar los datos del
formulario.
El programa se va a guardar en un
documento con una extensión
específica del lenguaje ( .php, .asp,
etc... por ejemplo "procesar.php").
Este documento se debe subir en el
servidor Web junto con el documento
HTML que contiene el formulario.
El valor del atributo @action debe ser la dirección del documento Php o
ASP (por ejemplo action="procesar.php").

El servidor Web, mediante el programa Php o ASP, procesara los datos del
formulario y reenviara automáticamente una respuesta a una nueva
página Web.
Esta información nos sirve para tener una
base de conocimiento al desarrollar
nuestra App en jQuery Mobile. Ya que este
framework usa las mismas instrucciones
que HTML5 para la creación de
formularios.

Los hosting de pago entregan la

información de sus servidores para crear
los formularios, los gratuitos a veces no
dan esta información, por lo tanto,
debemos realizar varias pruebas hasta
encontrar los atributos method y action
apropiados para el envió de información a
través de formularios.

Este proceso lo realizaremos en próximos

módulos, por ahora, entendamos el
proceso y conozcamos las etiquetas o
directivas necesarias para que funcione.
A continuación veamos los distintos elementos que se pueden
incluir en un formulario.

Áreas de texto <textarea>: Las áreas de texto permiten a los

usuarios insertar varias líneas de texto. Por ello, suelen utilizarse
para que incluyan comentarios.

Para insertar un área de texto es necesario incluir las etiquetas

<textarea> y </textarea> entre las etiquetas <form> y </form>
del formulario.

Para que el área de texto tenga algún valor inicial, habrá que
insertarlo entre las etiquetas <textarea> y </textarea>
El atributo name indica el nombre del
área de texto. Es necesario dar
nombres diferentes a cada uno de los
elementos de un formulario, para poder
identificarlos a la hora de procesarlos.

El atributo rows indica el número de

líneas que podrán ser visualizadas en el
área de texto por lo que determina al
alto del área de texto.

El atributo cols indica el número de

caracteres por línea que podrán ser
Habría que escribir:
visualizados en el área de texto por lo
que determina al ancho del área de <textarea name="ejemploarea"
texto. cols="30" rows="3">Escribe el
texto que quieras</textarea>
Gracias a las barras de desplazamiento,
es posible insertar más líneas de las
especificadas en el atributo rows, y más
caracteres por línea de los
especificados en el atributo cols.
Elementos de entrada <input>: Para insertar un elemento de
entrada es necesario incluir la etiqueta <input> entre las
etiquetas <form> y </form> del formulario.

El atributo name indica el nombre que se desea dar al elemento

de entrada, mediante el cual será evaluado, y el atributo type
indica el tipo de elemento de entrada.

Vamos a ver los diferentes tipos de elementos de entrada, y el

resto de atributos que pueden definirse para cada uno de ellos.
Campo de texto: Para insertar un
campo de texto, el atributo type debe
tener el valor text.

El atributo size indica el número de

caracteres que podrán ser visualizados
en el campo de texto, determina el
ancho de la caja.

El atributo maxlenght indica el Habría que escribir:

número de caracteres que podrán ser
insertados en el campo de texto. <input name="campo“
type="text"
El atributo value indica el valor inicial value="Campo de texto“
del campo de texto. size="20" maxlength="15">
Campo de contraseña: Para insertar **************
un campo de contraseña, el atributo
type debe tener el valor password.

El resto de atributos son los mismos

que para un campo de texto normal.

La única diferencia es que todas las Habría que escribir:

letras escritas en el campo de
contraseña serán visualizadas como <input name="contra“
asteriscos. type="password“
value="contraseña“
size="20“
maxlength="15">
Botón: Para insertar un botón, el
atributo type debe tener el
valor submit, restore o button.

Si el valor es submit, al pulsar sobre

el botón se enviará el formulario.

Si el valor es restore, al pulsar sobre

el botón se restablecerá el formulario,
borrándose todos los campos del
formulario que hayan sido modificados Habría que escribir:
y adquiriendo su valor inicial.
<input name="boton"
Si el valor es button, al pulsar sobre type="submit“
el botón no se realizará ninguna value="Enviar">
acción.

El atributo value indica el texto que

mostrará el botón.
 Casilla de verificación: Para
insertar una casilla de verificación,
el atributo type debe tener el valor
checkbox.

El atributo value indica el valor

asociado a la casilla de
verificación. Es necesario poner
este atributo, aunque el usuario no
pueda ver su valor. Es el valor a Habría que escribir:
enviar.
<input name="casilla“
La aparición del atributo checked type="checkbox“
indica que la casilla aparecerá value="acepto" checked>
activada inicialmente. Este
atributo no toma valores.
Botón de opción: Para insertar un
botón de opción, el atributo type debe
tener el valor radio. estudiar
El atributo value indica el valor
asociado al botón de opción. Es trabajar
necesario poner este atributo, aunque
el usuario no pueda ver su valor. Es el
valor a enviar.

La aparición del atributo checked

indica que el botón aparecerá activado
inicialmente. Este atributo no toma
valores. Habría que escribir:

Los botones de opción se utilizan <input name="prefiere“

cuando se desea que una variable del type="radio" value="estudiar"
formulario pueda tomar un solo valor
checked>
de entre varios posibles. Para ello, se
insertan varios botones de opción con <input name="prefiere“
el mismo nombre (que indica la type="radio“
variable) y con distintos valores. value="trabajar">
Solamente uno de estos botones podrá
estar activado, el que esté activado
cuando se envía el formulario, su valor
será el que tendrá la variable.
Cuando se envíe el formulario, si el primer botón está activado la
variable prefiere será igual a estudiar, si es el segundo el activado, la
variable prefiere valdrá trabajar.

Observa que lo que ponemos como valor no aparece escrito en la página es un

dato interno.

Existen otros tipos como el tipo hidden que sirve para definir un campo oculto,
campo que no ve el usuario, en este caso habría que incluir el
atributo value para que el formulario pase ese valor al programa que recoge
los datos del formulario.

Para que el usuario envié un fichero suyo a través del formulario tenemos el
tipo file, este tipo hay que utilizarlo con mucho cuidado ya que si permitimos
que cualquier internauta nos envié cualquier tipo de fichero nos podríamos
encontrar con sorpresas no siempre agradables.
Campos de selección <select>: Los campos de selección se utilizan para
insertar menús y listas desplegables.

Para insertar uno de estos menús o listas es necesario insertar las

etiquetas <select> y </select> en un formulario.

El atributo name indica el nombre del menú o lista será el nombre de la

variable que contendrá el valor seleccionado.

El atributo size indica el número de elementos de la lista que pueden ser

visualizados al mismo tiempo, determina el alto de la lista.

La aparición del atributo multiple indica que el usuario podrá seleccionar

varios elementos de la lista al mismo tiempo, ayudándose de la tecla Ctrl. Este
atributo no toma valores.

La aparición del atributo disabled indica que la lista estará desactivada, por lo
que el usuario no podrá seleccionar sus elementos. Este atributo tampoco toma
valores.
 Cada uno de los elementos de la lista ha de insertarse entre las
etiquetas <option> y </option>.

El atributo value indica el valor a enviar si se selecciona el elemento. Si no se

especifica este atributo, se enviará el texto de la opción, que se encuentra
entre las etiquetas <option> y </option>.

La aparición del atributo selected indica que el elemento aparecerá

seleccionado. Este atributo no toma valores.

------ Elige mascota -------- ------ Elige mascota --------

Perro
Gato

Habría que escribir:

<select name="mascota">
<option selected>--- Elige mascota ---</option>
<option>Perro</option>
<option>Gato</option>
</select>
 Para insertar la lista:

Habría que escribir:

<select name="animal" size="3" multiple>

<option selected>---Elige animales---</option>
<option value="ave">Loro</option>
<option>Perro</option>
<option>Gato</option>
<option>Pez</option>
</select>
 Ejercicio en Clase:

Crea un formulario HTML5 responsive

Añade a tu formulario HTML5

validación, estilo y resolución
adaptable a todas las
pantallas (responsive) con
HTML5 input types, atributos
y CSS3.

Los formularios son un poco

aburridos, pero con algún
efecto CSS3 y un poco de
imaginación, vamos a
demostrar como hacerles
atractivos y responsive.
 01.- Página Básica

El primer paso es crear una página básica HTML5. Vamos a crear el formulario como
componente que puede añadirse a cualquier página existente, preparado para usar.

1 <!doctype html>
2 <html>
3 <head>
4 <title>Formulario HTML5 Responsive</title>
5 </head>
6 <body>
7 </body>
8 </html>

02.- Incluye fuentes web

El formulario se va a colocar en un contenedor genérico al que se le puede añadir estilos

acordes a tu página. vamos a usar una imagen de fondo y una fuente de Google. Coge el
código de Google web fonts (por ejemplo Open Sans), y colócalo en el head de la página.

<head>
2 <title>Formulario HTML5 Responsive</title>
3 <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
4 </head>
 03.- Crea el contenedor

Crea una etiqueta <div> y aplícale una clase como .form

Crea un archivo CSS y establece el ancho a 470px, altura en auto, añade 5px de padding
en ambos lados, izquierda y derecha, y deja los márgenes en auto. Esto se puede ajustar
para cuadrar mejor en tu web.

1 .form{
En el HTML: <div class="form"> En el CSS: 2 width: 470px;
<form>….</form> 3 padding: 0 5px;
4 margin: 0 auto;
</div> 5 }

04.- Añade campos input

1 <form>
El formulario va a incluir una selección de campos 2 <input type="text">
soportados por HTML5 para demostrar como 3 <input type="text">
funcionan. El primer paso es añadir una etiqueta 4 <input type="text">
de apertura y de cierre <form></form>. Vamos a 5 <input type="text">
usar 5 campos y un botón de enviar. Empieza 6 <input type="text">
añadiendo los 5 campos como input type text y el 7 <input type="submit">
sexto como submit. 8 </form>
 05.- Input type
Los dos primeros campos van a ser
nombres, permanecerán como text. El
tercero será el email – “email”, y el
cuarto fecha – “date”, y el último
campo será la web – “url”.
06.- Nombrando los campos
Los campos del formulario necesitan
un nombre único para identificarlos.
Por ejemplo, los dos primeros campos
de texto los llamaremos nombre y
apellidos. El campo email será
simplemente email, fechainicio y web
será direccionweb. Puedes modificar el
nombre y llamarlos como quieras.
1 <form>
2 <input type="text">
3 <input type="text">
4 <input type="email">
5 <input type="date">
6 <input type="url">
7 <input type="submit">
8 </form>
<form>
2 <input type="text" name="nombre">
3 <input type="text" name="apellidos">
4 <input type="email" name="email">
5 <input type="date" name="fechainicio">
6 <input type="url" name="direccionweb">
7 <input type="submit">
8 </form>
 07.- Etiquetas
Vamos a etiquetar los campos para
identificarlos. Añade etiquetas <label>
de apertura y de cierre </label>
encima de cada campo y pon un
nombre acorde con el campo. Después
añade el atributo “required” a los
campos que necesitas que estén
completos para enviar el formulario.
08.- Estilo del texto
La base del formulario ya esta hecha,
es el momento de empezar con los
estilos. Añade el body tag al CSS y
escoge tamaño, anchura y color global
para el estilo del texto. Esto modificara
las labels, pero podrás modificarlas
más adelante si quieres.
<label>Nombre</label>
2 <input type="text" name="nombre" required>
3 <label>Apellidos</label>
4 <input type="text" name="apellidos" required>
5 <label>Email</label>
6 <input type="email" name="email" required>
7 <label>Fecha de Inicio</label>
8 <input type="date" name="fechainicio" required>
9 <label>Página Web</label>
10 <input type="url" name="direccionweb">
1 body{
2 font-family: "Open Sans", Arial, sans-serif;
3 font-size: 14px;
4 font-weight: 350;
5 color: #333;
6 }
 09.- Anchura del formulario

Para hacer el formulario responsive, daremos

un porcentaje de anchura los campos input.
La opción más común esta entre el 100% y
Input {
el 95%, pero se puede modificar para
2 width: 98%;
ajustarlo a tu web. Añade el selector input en
3 }
tu CSS y establece la anchura a 100% o a
otra que escojas. Esto colocará
inmediatamente las labels encima de su
campo.

10.- Estilo de los campos

Para mejorar el estilo de los campos input,

vamos a añadir estilos a los textos y arreglar
la altura. Establece la altura en 40px y añade 1 input{
la anchura y el tamaño de fuente que 2 width: 98%;
deseas. Para estar seguros del resultado una 3 height: 40px;
buena idea es guardar y hacer una vista 4 font: 300 24px "Open Sans", Arial, sans-serif;
preliminar para ver si se complementan bien. 5 }
Añade un color de fondo si quieres enfatizar
cada campo.
 11.- Crea algo de espacio
1 input{
Las etiquetas y campos están muy 2 width: 98%;
juntos unos encima de otros. Para 3 height: 40px;
añadir algo de espacio, añade margin 4 font: 300 24px "Open Sans", Arial, sans-serif;
bottom de 10px al atributo input. Para 5 margin: 5px 0 10px 0;
añadir algo de espacio entre el texto y 6 }
la etiqueta, añade margin top de 5px.

12.- Texto placeholder

El atributo placeholder permite añadir

texto a un campo cuando esta vacío.
Cuando se selecciona el campo – se 1 <label>Nombre</label>
hace clic sobre él – y el usuario 2 <input type="text" name="nombre"
empieza a escribir, entonces placeholder="tu texto aquí" required>
desaparece. Para añadir texto
placeholder a cualquier campo,
simplemente añade placeholder=”tu
texto aquí”.
 13.- Input fecha

Los input type date trabajan de manera diferente según el navegador. En Chrome se ve
una flecha que abre un calendario para escoger fecha, mientras que en otros navegadores
no se verá nada.
14.- Valor de URL

El campo url permite a los usuarios añadir su web. Para asegurar que el campo funciona
correctamente, hay que añadir http:// antes de la dirección. Para asegurar esto, incluimos
el prefijo value=”http://” al campo.

1 <label>Página Web</label>
2 <input type="url" value="http://" name="direccionweb">

15.- Estilo del botón 1 input[type=submit]{

2 background-color:#FF9900;
El botón de submit por defecto se muestra de manera 3 height:50px;
diferente en los navegadores. Para arreglar esto y hacer 4 width:98%;
que el botón cuadre con el formulario, necesitas añadir 5 //border:none;
un selector a tu CSS. Añade input[type=submit]{} y 6 font-weight:400;
crea los estilos del botón entre las llaves. Te dejo unos 7 letter-spacing:2px;
estilos de ejemplo para el botón. Nota: hay estilo borde, 8 color:#FFFFFF;
si quieres crear un efecto plano añade border:none. 9 }
 16.- Añade un título

Para crear un propósito claro para tu formulario puedes añadir un título a tu formulario.
Crea etiquetas <h2> o <h3> y dales estilo. Te dejo un ejemplo de estilo de texto que
puedes usar o modificar.

1 <h2>Quiero Inscribirme</h2>
2 <label>Nombre</label>
3 <input type="text" name="nombre"
required>

En CSS:

1 h2{
2 font-size: 40px;
3 color: #FF9900;
4 text-shadow: 2px 2px #222;
5 font-family: "Open Sans";
6 border-bottom: 2px solid #FFF;
7 text-align: center;
8 margin: 0 0 5px 0;
9 }
 17.- Termina tu formulario HTML5 responsive

Para añadir interés puedes añadir una imagen de fondo y/o una sombra y esquinas
redondeadas al contenedor del formulario. Para hacerlo responsive, simplemente
redimensiona la clase .form y los campos se adaptarán automáticamente. Establece la
altura del formulario en auto para compensar.

1 .form{
2 width: 470px;
3 height: auto;
4 backgroud-image: url(aquí la ruta de la imagen de fondo);
5 margin: 0 auto;
6 padding: 0 1%;
7 box-shadow: 5px 5px 0 #AAA;
8 border-radius: 5px;
9 }
 Así debería de verse nuestro
formulario al final, pero ustedes ya
pueden agregarle sus propios estilos