Manual XHTML: Formularios file:///E:/CLASES/2008%20-%202009/PIII%20Ficheros/WEB/Manual...

BUSCAR BLOG MARCAR BLOG Siguiente blog» Crear un blog | Acceder

Web manual-xhtml.blogspot.com

Formularios

1. Introducción
2. Dos métodos post y get
2.1. Método get
2.2. Método post
3. Empezando con form
4. Elemento input
5. Campos de texto
6. Botones de radio
7. Botón de comprobación checkbox
8. Botones de envio y de reset
9. Cajas de texto
10. Seleccionar con select
11. Elemento label
12. Agrupando con fieldset

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

1 de 8 1/25/2010 8:07 AM
Manual XHTML: Formularios file:///E:/CLASES/2008%20-%202009/PIII%20Ficheros/WEB/Manual...

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="[email protected]" />

2 de 8 1/25/2010 8:07 AM
Manual XHTML: Formularios file:///E:/CLASES/2008%20-%202009/PIII%20Ficheros/WEB/Manual...

<strong>readonly</strong>=<em>readonly</em> y <strong>value</strong>=<em>[email protected]</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 [email protected].

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.

3 de 8 1/25/2010 8:07 AM
Manual XHTML: Formularios file:///E:/CLASES/2008%20-%202009/PIII%20Ficheros/WEB/Manual...

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

4 de 8 1/25/2010 8:07 AM
Manual XHTML: Formularios file:///E:/CLASES/2008%20-%202009/PIII%20Ficheros/WEB/Manual...

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.

5 de 8 1/25/2010 8:07 AM
Manual XHTML: Formularios file:///E:/CLASES/2008%20-%202009/PIII%20Ficheros/WEB/Manual...

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:

Con label

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
Nombre: Apellido: Solter

6 de 8 1/25/2010 8:07 AM
Manual XHTML: Formularios file:///E:/CLASES/2008%20-%202009/PIII%20Ficheros/WEB/Manual...

Información académica
Universidad: Título obtenido

Página principal

5 aporte(s) de lectores:

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

Enrique aporta...

Oye.... muy buen tutorial... muchas gracias... muy bien explicado!!!

En horabuena tio!!

12:52 AM

Anónimo aporta...

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

11:58 AM

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 PM

Juan C. G. aporta...

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

12:57 PM

Publicar un comentario en la entrada

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.

Esta obra está bajo una licencia de Creative Commons.

Realizado por Emilio Astarita, lee más acerca de este manual.

7 de 8 1/25/2010 8:07 AM
Manual XHTML: Formularios file:///E:/CLASES/2008%20-%202009/PIII%20Ficheros/WEB/Manual...

8 de 8 1/25/2010 8:07 AM