Formularios

1. Introducción

Los formularios nos dan la posibilidad de recibir información de parte del usuario. Su utilización nos permitirá construir formularios de entrada de datos que podríamos recibir en nuestro e-mail o bien almacenar en una base de datos dentro de nuestro servidor, para luego por ejemplo, generar una página o una cookie de manera dinámica.

2. Dos métodos post y get

Hay dos métodos de envío de información mediante formularios que trataremos aquí: post y get.

2.1. Método get

El método get envía información al servidor como parte de la URL. El servidor analizará la URL pedida por el agente de usuario y separará la información relevante para su posterior procesamiento.

http://www.example.com/busqueda?palabra=xhtml

El signo ? es el delimitador que nos permite separar la consulta de la URL. busqueda podría ser un programa CGI que recibirá la información posterior a ? e interpretará tal cadena para crear una variable palabra = xhtml. En muchos casos sencillos y para enviar cádenas de pocos carácteres este método funciona bien, sin embargo para otros casos es mejor utilizar otro método de envio.

2.2. Método post

Supongamos que quisieramos enviar una contraseña para loguearnos dentro de un servidor. No sería conveniente que la contraseña aparezca en la URL ya que otras personas podrían ver esta información.

Generalmente en este caso correspondería utilizar el método de envio post. Este método envía la información como parte de la petición del agente de usuario al servidor web (esta petición también incluye la URL, sin embargo nuestra información no formará parte de ella).

3. Empezando con form

El elemento principal y obligatorio de todo formulario es form y quizá sus dos atributos más importantes son method y action. El primero específica el método de envio (get o bien post), y en el segundo pondremos la URL del recurso que contendrá la secuencia de comandos encargada de hacer algo con esa información.

Sin embargo un formulario sin otros elementos no nos sirve de mucho. Hagamos entonces un recorrido por los elementos más comunes:

4. Elemento input

Ahora presentaremos al elemento input, que al específicarle su atributo type nos permite construir diferentes tipos de controles.

5. Campos de texto

Código para construir dos campos de texto:

<form>
  <p>Nombre: <input type="text" name="nombre"/></p>
  <p>Apellido: <input type="text" name="apellido"/></p>
</form>

El valor text en el atributo type indica que será un campo de texto

Ahora si quisieramos enviar esta información el agente de usuario armaría cadenas de texto, con pares del tipo nombre=VALOR1 y apellido=VALOR2 dónde VALOR1 y VALOR2 es la información escrita en las casillas de texto de Nombre y Apellido respectivamente, dichos valores se asocian al valor escrito en el atributo name del input de tipo text.

El resultado es el siguiente:

Nombre:

Apellido:

Ilustremos ahora algunas características con las que podemos dotar al input

<form> 
 <p>
 E-mail:
 <input type="text" name="mail" readonly="readonly" value="example@example.com" /> 
 <strong>readonly</strong>=<em>readonly</em> y <strong>value</strong>=<em>example@example.com</em>.
 </p>
 <p>
 Contraseña: 
 <input type="password" name="password"  /> 
 <strong>type</strong>=<em>password</em>
 </p>
 <p>
 Iniciales:
 <input type="text name" name="inicial" size="5" maxlength="2" />
 <strong>size</strong>=<em>3</em> y <strong>maxlength</strong>=<em>2</em>
 </p>
 <p>
 No foco: 
 <input type="text" disabled="disabled" value="jo jo" /> 
 <strong>disabled</strong>=<em>disabled</em> y <strong>value</strong>=<em>jo jo</em>
 </p>
</form>

Aquí el resultado:

E-mail: readonly=readonly y value=example@example.com.

Contraseña: type=password

Iniciales: size=3 y maxlength=2

No foco: disabled=disabled y value=jo jo

Observen detenidamente como varía el comportamiento y la apariencia de los cuadros de texto según los diferentes atributos y valores específicados.

6. Botones de radio

Estos botones se suelen presentar en grupo y nos permite elegir una opción entre varias. Para esto se específican valores iguales para el atributo name, mientras que para el type utilizamos el valor radio.

Piquemos código:

<form>
 <p>Sobre su edad:
 <input type="radio" name="edad" value="mayor" /> MAYOR
 <input type="radio" name="edad" value="menor" /> MENOR
 </p>
 <p>Su genero:
 <input type="radio" name="genero" value="hombre" /> HOMBRE
 <input type="radio" name="genero" value="mujer" /> MUJER
 </p>
</form>

El resultado:

Sobre su edad: MAYOR MENOR

Su genero: HOMBRE MUJER

Al especificar un valor distinto para name, se crea un nuevo grupo, mientras que dentro de un mismo grupo sólo podemos elegir una sola de las opciones.

7. Botón de comprobación checkbox

Ahora mostremos que pasa al poner en el atributo type el valor checkbox, que convierte a input en un Botón de comprobación.

Piquemos algo de código para dos input de tipo checkbox:

<form>
 <p>
  <input name="fuma" type="checkbox" checked="checked" value="si" /> Fumador
  <input name="deporte" type="checkbox" value="si" /> Deportista
 </p>
</form>

Observen el resultado:

Fumador Deportista

Uno de los input lleva el atributo checked con el valor checked, de esta forma le indicamos que debe aparecer marcado por defecto ni bien se presente el formulario.

Si enviaramos esta información al servidor, se armarían pares deporte=si y fuma=si en el caso de que las dos esten marcadas.

8. Botones de envio y de reset

Ahora supongamos que queremos enviar esta información a algún servidor. Como dijimos existen dos metodos de envío. Según qué enviaremos y la tecnología del servidor sabremos por cual optar. Para indicarle al agente de usuario el envío de información utilizaremos un botón de envío especificando el valor submit en el atributo type.

Probemos crear un cuadro de búsqueda para Google:

<form method="get" action="http://www.google.com/search">
 <p>
 <input name="q" type="text" /> 
  <input type="submit" value="Busca en Google" /></p>
</form>

La consulta a Google se formula de de esta manera http://www.google.com/search?q=cadena. Para obtener q=cadena debemos especificar el atributo name con el valor q, luego cadena será lo que se introduzca en el cuadro de búsqueda. Por último el input text enviará toda la consulta por el método get.

Vean el resultado y testeenlo:

Otro botón muy utilizado, es el de tipo reset que se encarga de deshacer todas las modificaciones que haya hecho el usuario sobre el formulario, es decir regresa todos los elementos anidados bajo el elemento form a los valores originales especificados en el documento.

Prueben cambiar el texto dentro del cuadro y luego presionen Reset

El código anterior:

<form>
 <input  type="text" value="Soy el original" />
 <input type="reset" />
</form>

9. Cajas de texto

Las cajas de texto se suelen utilizar para incluír una cantidad de texto mayor y de varias líneas, para la cual el input de type text no sería apropiado.

A picar código:

<form>
 <textarea rows="10" cols="50" >Quedo adentro del cuadro.</textarea>
</form>

Como resultado obtendremos:

Los atributos rows y cols, marcan la cantidad de líneas y el tamaño de ancho respectivamente, de la caja.

10. Seleccionar con select

Incluyendo el elemento select podremos armar una lista de selección múltiple, este elemento se combina con el elemento option para ir agregando las diferentes opciones.

Ejemplo de código:

<form>
 <p>
 Elija fruta:
 <select name="fruta">
  <option>Manzana</option>
  <option>Pera</option>
  <option>Kiwi</option>
  <option>Uva</option>
       </select>
 </p>
</form>

El resultado es el siguiente:

Elija fruta:

De nuevo select cuenta con el atributo name con el valor fruta.

Sí se enviara esta información a un servidor, el agente de usuario armará la cadena de carácteres con el par fruta=Pera que se enviará por get o post, suponiendo que se haya elegido la fruta Pera.

11. Elemento label

Este elemento nos permite asociar una cadena de texto a un control del formulario. Esto supone una cuota de semántica ya que se identifica al control con un texto y otra de accesibilidad debido a que los agentes de usuario permiten utilizar el control mediante el texto asociado.

Ejemplo de código:

<form>
 <p><label><input type="checkbox" /> Con label</label></p>
 <p><input type="checkbox"  /> Sin label</p>
</form>

Observen el resultado:

Sin label

En principio parecen identicas, pero prueben hacer clic sobre el texto Con label, al hacerlo la casilla de la izquierda al texto se seleccionara. En cambio al hacer clic sobre Sin label no ocurre nada.

Siempre que sea posible se recomienda utilizar el elemento label

12. Agrupando con fieldset

El agrupamiento es un recurso intersante para estructurar mejor nuestros formularios. El elemento fieldset nos da la posibilidad de agrupar diferentes secciones bajo un marco que puede llevar una descripción al anidarle otro elemento llamado legend.

Escribamos algunos controles y agrupemos bajo dos grupos:

Código:

<form>
 <fieldset>
  <legend>Información personal</legend>
  <label>Nombre: <input type="text" /></label>
  <label>Apellido: <input type="text" /></label>
  <label><input type="checkbox" /> Soltero</label>
 </fieldset>
 <fieldset>
  <legend>Información académica</legend>
  <label>Universidad: <input type="text" /></label>
  <label><input type="checkbox" /> Título obtenido</label>
 </fieldset>
</form>

Resultado de lo anterior:

Información personal
Información académica
Página principal

18 aporte(s) de lectores:

Anonymous Anónimo aporta...

Le he hecho un ojo por encima y se ve muy bueno... Solo creo que en el Tema 10 (listas) pudo mencionarse la etiqueta "optgroup" que igual es XHTML Stricto.

10:51 a.m.  
Anonymous Anónimo aporta...

Oye.... muy buen tutorial... muchas gracias... muy bien explicado!!!
En horabuena tio!!

12:52 a.m.  
Anonymous Anónimo aporta...

guau!!!
genial, de lo mejor que he encontrado, acabo de reenviarlo a unos amigos!!!
muy muy bueno!!!

11:58 a.m.  
Blogger microtuning aporta...

Joder tío!!!

Esta genial.Cuando leas este comentario más de 100 páginas sobre xhtml sabrán este tutorial!!!
Enorabuena.

3:53 p.m.  
Anonymous Anónimo aporta...

ASOMBROSO...Es de lo mejor que me he encontrado sobre el código XHTML

12:57 p.m.  
Anonymous Anónimo aporta...

esta bien se le entiende bastantes
felicidds

6:28 p.m.  
Blogger Unknown aporta...

Felicidades, gran tutorial, me ha ayudado para ponerme al día en una mañana. Gracias por trabajo!

3:08 p.m.  
Blogger Pablo Rodríguez aporta...

¡Excelente manual!, no conocía sobre xhtml, y apartir de ahora me encuentro haciendo un formulario..

6:17 p.m.  
Anonymous Anónimo aporta...

Muy buen tutorial!!

felicidades, me a ayudad mucho!
gracias

1:18 a.m.  
Anonymous Rubén Ramírez aporta...

Que tal, creo que esta super nice tu manual para aquellos que inician en las artes web.

Yo lo use para checar mi generador de formularios hecho en php.

Saludos.

rramirez@rramirez.com

5:38 p.m.  
Anonymous Anónimo aporta...

Es un excelente tutorial. Sin duda despejará muchas de las dudas que tengo sobre HTML y XHTML.

3:12 a.m.  
Anonymous Anónimo aporta...

Gracias pude hacer el ejercició del colegio en 20 minutos. Muy claro.

Pd podrias poner como separar grupos con una sola línea.

x ejemplo.

nombre ________
apellidos_______
----------------------------------
direccion_____________

10:22 a.m.  
Anonymous Anónimo aporta...

Tenia que hacer un trabajo y me a servido de mucho...
¡Gracias!

2:30 p.m.  
Anonymous Anónimo aporta...

sto me a sido de muxa utilidad para mi proyecto integrador ¡¡¡GRACIAS!!!

12:09 a.m.  
Anonymous Anónimo aporta...

Cojonudo

8:26 a.m.  
Blogger éniac aporta...

¿Se puede controlar la anchura de fieldset?
Un saludo.

7:07 p.m.  
Blogger pipegordillo aporta...

Hola amigo, quiciera saber como hago para que en un formulario html que trabaja con DB myadmin y un motor php, traiga la info del cliente cuando digito el id a los campos del mismo formulario html. cgracias

9:40 p.m.  
Blogger Ruelas aporta...

Muy buen tutoria, te quedo excelente, se lo recomendaré a todos mis amigos...

11:27 p.m.  

Publicar un comentario

ATENCIÓN: Por favor intenta aportar o preguntar sobre el tema que trata la página. Otro tipo de consultas o criticas puedes dejarlas en el libro de visitas. Los aportes y preguntas están moderados simplemente para evitar spam o comentarios fuera de lugar.