Formularios en HTML:

Los formularios son una caracterstica del estndar HTML Que permite a los autores recolectar informacin provista por los visitantes.
Estos formularios pueden resultar tiles para reunir informacin personal, de contacto, preferencias, opiniones, o de cualquier otro tipo
que el autor necesite. En este tutorial exploraremos todas las herramientas disponibles para construir formularios en HTML.
Un formulario puede insertarse en un documento HTML a travs del elemento HTML form que actuar como contenedor para todos los
elementos de entrada. Toda la informacin recolectada por un formulario puede ser enviada a un agente procesador (un archivo
conteniendo un script hecho especialmente para procesar esta informacin) que usualmente va especificado en el atributos "action". Lo
que el agente procesador haga con la informacin y cmo la maneje es un tema que no ser tratado en este sitio ya que no pertenece al
estndar HTML. Para manejar la informacin de un formulario debes usar un script del lado servidor.
Tambin puedes especificar cmo la informacin ser enviada en el valor del atributo "method": "post" (los datos del formulario son
adjuntados al cuerpo del mismo) "get" (los datos del formulario son adjuntados a la URL). Se supone que el agente procesador sabe
cul es el mtodo de envo del formulario.
De este modo, un formulario simple puede tener la siguiente declaracin:
<form method="post" action="handler.php">
...Controles...
</form>

Elementos de entrada
La mayora de los controles de entrada son visuales y pueden interactuar con el usuario. Su uso depende del tipo de control y tambin
del tipo de informacin que pueden recolectar. Los elementos de entrada de un formulario pueden ser definidos mediante el uso de
cuatro elementos: el elemento HTML input, el elemento HTML button, el elemento HTML select y el elemento HTML textarea. En este
tutorial dividiremos los controles por su funcionalidad.
Como regla general para todos los controles, el atributo "name" identificar la informacin para el agente procesados, y su valor
depender de la naturaleza del control (algunas veces, como en las casillas de verificacin o botones radio, ser el contenido del atributo
"value").
Nota: como las descripciones y atributos de cada control son levemente tratados en este tutorial, visita la referencia de los elementos
para ms informacin al respecto.
Entrada textual
Ecisten tres tipos de entrada textual que pueden recolectar informacin como nombres, comentarios, opiniones, etc.
Entrada de lnea
Este control recolecta informacin textual en una sola lnea, lo que significa que el usuario no podr utilizar la tecla "enter" para ir a la
siguiente lnea (en la mayora de los formularios, la tecla "enter" presionada en uno de estos campos, enva el formulario que lo
contiene).
Este control es insertado en documentos HTML usando el tag HTML input con el valor "text" en su atributo "type". El valor inicial,
mostrado cuando la pgina se carga, puede ser definido usando el atributo "value".

Cdigo
<form method="post" action="agente.php">
Ingresa un texto: <input name="ingresatexto" type="text" value="Por favor, ingresa aqu" />
</form>
Vista
Ingresa un texto:
El valor pasado al agente procesador ser el texto ingresado por el usuario, es decir, el contenido de la caja de texto.
Entradas de password
Este control acta exactamente como el de entrada de lnea con la excepcin de que "esconde" los caracteres ingresados mostrndolos
como puntos o asteriscos para evitar que los usuarios ven su contenido.
Es definido utilizando el valor "pass" en el atributo "type", y su valor inicial puede ser definido usando el atributo "value". Es
comnmente usado para el ingreso de contraseas.
Cdigo
<form method="post" action="agente.php">
Ingresa tu contrasea: <input name="contrasena" type="password" value="123456" />
</form>
Vista
Ingresa tu contrasea:
El valor pasado al agente procesador ser el texto ingresado por el usuario, es decir, el contenido de la caja de texto.
Entrada de multi-lnea
Este control permite a los usuarios ingresar texto en una o ms lneas. se inserta utilizando el tag HTML textarea y puede ser usado para
recolectar reportes, comentarios, cartas, etc. En este tag, el contenido ser el texto inicial.
Cdigo
<form method="post" action="agente.php">
Ingresa tus comentarios:<br /><textarea name="comentarios" rows="2" cols="30">...Tus
Comentarios aqu...</textarea>
</form>
Vista
Nota que los tributos "rows" y "cols" establecen las dimensiones de la caja de texto y son requeridos por algunos DTDs. El valor pasado
al agente procesador ser el texto ingresado, es decir, el contenido de la caja de texto.
Elementos de entrada

Opciones
Los autores pueden tambin dejar que sus visitantes elijan opciones preestablecidas de una lista. Esto puede lograrse usando uno de los
tres controles siguientes, que pueden construir diferentes tipos de listas de opciones.
Casillas de verificacin
Una casilla de verificacin es una opcin simple que puede tomar uno de dos valores: "marcado" "no marcado" ("checked"
"unchecked"). Las casillas de verificacin pueden ser agrupadas visualmente formando listas de opciones, pero cada una de ellas es
tratada individualmente.
Este control es insertado mediante el tag HTML input con el valor "checkbox" en su atributo "type". Inicialmente, la casilla aparece sin
marcar a menos que lo especifique de otra forma usando el atributo booleano (verdadero o false) "checked". Recuerda, que para lograr
un cdigo correcto en XHTML necesitas definir al atributo booleano con sus nombres como valores (por ejemplo, checked="checked").
Cdigo
<form method="post" action="agente.php">
Selecciona tus intereses:<br />
<input name="cbipeliculas" type="checkbox" />Pelculas<br />
<input name="cbilibros" type="checkbox" checked="checked" />Libros<br />
<input name="cbiinternet" type="checkbox" />Internet
</form>
Vista
Selecciona tus intereses:
Pelculas
Libros
Internet
En este caso, el valor pasado ser booleano y representar el estado de la opcin (marcado o no marcado). Dependiendo del agente
procesador puede ser "on/off",
"checked/unchecked", "true/false", etc.
Botones radio
Los botones radio trabajan de la misma forma que las casillas de verificacin con una pequea diferencia: los botones radio que
comparte el mismo nombre conforman un grupo de opciones donde el usuario no puede seleccionar ms de una a la vez. Esto significa
que cuando un usuario elige una opcin, las dems son automticamente deseleccionadas.
El valor inicial para el grupo depende del navegador (la mayoria muestra todos los controles sin marcar). Esto puede ser cambiado
usando el atributo booleano "checked".
Cdigo
<form method="post" action="agente.php">
Selecciona tu actividad favorita:<br />
<input name="intereses" type="radio" value="rbipeliculas" />Pelculas<br />

<input name="intereses" type="radio" value="rbilibros" />Libros<br />

<input name="intereses" type="radio" value="rbiinternet" checked="checked" />Internet
</form>
Vista
Selecciona tu actividad favorita:
Pelculas
Libros
Internet
Para botones radio el valor pasado al agente procesador es el contenido del atributo "value" de la opcin seleccionada, lo que significa
que una lista con muchos botones radio solo pasar un valor.
Listas
Estas listas pueden ser construdas utilizando tres elementos: el elemento HTML select (contenedor principal), el elemento HTML
option (opcin simple) y el elemento HTML optgroup (grupo de opciones). El ltimo elemento es el nico prescindible para construir
este tipo de listas.
Los controles de lista pueden ser usadas para recolectar informacin al igual que los botones radio (slo una opcin) o como casillas de
verificacin (mltiples opciones), dependiendo de la presencia del atributo booleano "multiple". Como en los controles anteriores, el
valor inicial de los elementos HTML option puede ser establecido a "seleccionado" usando el atributo booleano "selected".
Cdigo
<form method="post" action="agente.php">
Elije solo una opcin, como en los botones radio:
<select name="entradalista">
<optgroup label="Entradas textuales">
<option>Entrada de lnea</option>
<option selected="selected">Entrada de contrasea</option>
<option>Entrada multi-lnea</option>
</optgroup>
<optgroup label="Opciones">
<option>Casillas de verificacin</option>
<option>Botones radio</option>
<option>Listas</option>
</optgroup>
</select>
<br />

Elije tantas opciones como quieras, como con casillas de verificacin (manteniendo presionada la tecla "Ctrl"):<br />
<select name="entradalista[]" multiple="multiple">
<optgroup label="Entradas textuales">
<option>Entrada de lnea</option>
<option>Entrada de contrasea</option>

<option>Entrada multi-lnea</option>
</optgroup>
<optgroup label="Opciones">
<option selected="selected">Casillas de verificacin</option>
<option>Botones radio</option>
<option>Listas</option>
</optgroup>
</select>
</form>
Vista
Elije solo una opcin, como en los botones radio:
Elije tantas opciones como quieras, como con casillas de verificacin (manteniendo presionada la tecla "Ctrl"):
Para la primera lista sin el atributo "multiple", el valor pasado al agente procesador ser la opcin seleccionada, pero para el segundo
ejemplo el valor pasado ser un arreglo (array) con los valores de las opciones seleccionadas. Es por esto que, para listas con el atributo
"multiple" presente, debes agregar los corchetes("[]") al final del nombre del tag HTML select. El valor individual pasado en ambos
casos es el contenido del atributo "value" si el mismo est presente, y el contenido del elemento si no (de las opciones seleccionadas).
Botones
Un botn es un dispositivo primordialmente diseado para realizar una accin con el formulario que lo contenga. De hecho, existen dos
tipos bsicos de botones: para enviar el formulario y para restablecerlo (devuelve todos los campos a sus valores iniciales). Existe slo
un tipo ms de botn que no posee una accin predefinida (la misma debe ser especificada con un lenguaje del lado cliente).
Los botones pueden insertarse a travs del tag HTML input (botones para enviar y reestabler y botones de imagen) o el elemento HTML
button (botones de contenido).
Botones de envo
Este tipo de botones enva automticamente el formulario en que se encuentra cuando es presionado. Es insertado utilizando el tag
HTML input con el valor "submit" en su atributo "type".

Cdigo
<form method="post" action="agente.php">
<input type="submit" value="Enviar este formulario" />
</form>
Vista
Botones de reestablecimiento
Este tipo de botones reestablecen los controles en un formulario a sus valores iniciales cuando es presionado. Son insertados con el tag
HTML input con el valor "reset" en su atributo "type".

Cdigo
<form method="post" action="agente.php">
<input type="text" name="texto1" value="Valor por defecto" /><br />
<input type="checkbox" name="reglas" checked="checked" /> Acepto las relgas<br />
<input type="reset" value="Reestablecer todos los campos a su valor predeterminado" />
</form>
Vista
Valor por defe

Acepto las relgas

En el ejemplo anterior, puedes probar la funcionalidad del botn cambiando los valores de los elementos y presionando el botn para
reestablecer los campos a sus valores iniciales.
Botones de imagen
Los botones de imagen funcionan exactamente como los botones de envo con la nica diferencia que los de imagen son representados
visualmente con la imagen especificada en el atributo "src". Otra particularidad es stos envan adems las coordenadas donde ha
ocurrido el click cuando el formulario fue enviado, tomadas desde la esquina superior izquierda del botn (por ejemplo, para un botn
de imagen llamado "boton1"las coordenadas sern enviadas en la forma "boton1.x" y "boton1.y").
Los botones de imagen se insertan con el tag HTML input, usando el valor "image" en su atributo "type".
Cdigo
<form method="post" action="agente.php">
<input type="image" src="/img/p/tutorials/forms/3/submit.png">
</form>
Vista
Botones de contenido.
Los botones de contenido pueden ser usados como botones de envo o reestablecimiento, o bien pueden no tener ninguna accin
preestablecida (dependiendo del valor de su atributo "type"). Pero su caractersticas es que permite a los autores inserta contenido dentro
de los mismos. Esto significa que una porcin de cdigo HTML puede ser mostrado dentro del botn (vnculos, prrafos, texto en
negrita, imgenes, etc.).
Cdigo
<form method="post" action="agente.php">
<button type="button">
El <b>tag HTML button</b><br />
permite contenido.
</button>
</form>

Plantillas css:
En estas plantillas CSS y XHTML (themes o templates, como queramos llamarlo) podris encontrar diseos modernos que podemos
usar para crear tcnicas innovadoras. Han sido construidos profesionalmente y sern perfectos como sitio estndar moderno para
desarrollar tu inspiracin.

Una plantilla CSS es un diseo de pgina web creada mediante el uso de Cascading Style Sheets (CSS) la tecnologa. Hojas de estilos
permiten a los desarrolladores web con facilidad el formato y el estilo de todas las pginas de un sitio web al mismo tiempo. CSS se
utiliza ms porque se ve de la misma manera por todos los navegadores (99,98%).
Plantillas CSS permite navegador mejorado y compatibilidad de plataforma. Esto significa que su sitio web se ver perfecto en
Windows, Unix, Mac, Linux, Netscape, Internet Explorer, Firefox y otros navegadores. Cada plantilla CSS es probado en plataformas
mltiples para asegurar el mejor cumplimiento de todos los requisitos.
Hojas de Estilo en proporcionar la forma ms sencilla de hacer un estilo de fuente por defecto para HTML. Por lo tanto, puede
modificar todo el texto y colores de los enlaces en todas las pginas durante la edicin de un solo un solo archivo CSS! CSS tambin
hace que su cdigo mucho ms fcil porque usted no tiene la etiqueta en repetidas ocasiones cada una de las etiquetas de formato. Este
cdigo simplificado hace mucho tiempo de descarga ms rpidos y el uso de ancho de banda reducido.
Plantillas CSS tiene 100% de compatibilidad con Macromedia Dreamweaver y Microsoft FrontPage, as como muchos otros editores
web. Esta tecnologa es ms fcil y rpido de usar que el cdigo HTML.
Bloques se utilizan en las plantillas de CSS en lugar de las tablas. Y se puede mover bloques de contenido con slo arrastrar y soltar en
el editor de HTML. Por otra parte, estas etiquetas son mejor comprendidos por los lenguajes de programacin JavaScript y otras web. Y
un poco ms de Buenas noticias! - Ahora, no es necesario para hacer frente a complicadas tablas HTML para modificar el diseo de su
sitio!
La tecnologa CSS es un gran paso adelante en el desarrollo web. Contenido y la presentacin separados tambin aade ms flexibilidad
a su sitio web. T no tendrs problemas con futuras modificaciones de su sitio web. Todas las plantillas estn basadas en tecnologas y
estndares www.w3c.org que hace que su sitio web an ms fcil de usar.
Qu es CSS?

Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que describe cmo se va a mostrar un documento en la
pantalla, o cmo se va a imprimir, o incluso cmo va a ser pronunciada la informacin presente en ese documento a travs de un
dispositivo de lectura. Esta forma de descripcin de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus
documentos.

Para qu sirve?

CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentacin. Los Estilos definen la forma de
mostrar los elementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de mltiples pginas Web
al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la CSS afectar a todas las pginas vinculadas a esa CSS
en las que aparezca ese elemento.

Cmo funciona?

CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o ms elementos. Las hojas de estilo estn compuestas por
una o ms de esas reglas aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y la declaracin. A su vez la
declaracin est compuesta por una propiedad y el valor que se le asigne.
h1 {color: red;}
h1 es el selector
{color: red;} es la declaracin

El selector funciona como enlace entre el documento y el estilo, especificando los elementos que se van a ver afectados por esa
declaracin. La declaracin es la parte de la regla que establece cul ser el efecto. En el ejemplo anterior, el selector h1 indica que
todos los elementos h1 se vern afectados por la declaracin donde se establece que la propiedad color va a tener el valor red (rojo) para
todos los elementos h1 del documento o documentos que estn vinculados a esa hoja de estilos.

Las tres formas ms conocidas de dar estilo a un documento son las siguientes:

Utilizando una hoja de estilo externa que estar vinculada a un documento a travs del elemento <link>, el cual debe ir situado
en la seccin <head>.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">
<html>
<head>
<title>Ttulo</title>
<link rel="stylesheet" type="text/css" href="http://www.w3.org/css/officeFloats.css" />
</head>
<body>
.
.
.
.
</body>
</html>
Utilizando el elemento <style>, en el interior del documento al que se le quiere dar estilo, y que generalmente se situara en la
seccin <head>. De esta forma los estilos sern reconocidos antes de que la pgina se cargue por completo.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">
<html>
<head>
<title>hoja de estilo interna</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman", serif;
color: red;
background-color: #d8da3d;
}
h1 {
font-family: Helvetica, Geneva, Arial, sans-serif;
}

</style>
</head>
<body>
<h1>Aqu se aplicar el estilo de letra para el Ttulo</h1>
</body>
</html>
Utilizando estilos directamente sobre aquellos elementos que lo permiten a travs del atributo <style> dentro de <body>. Pero
este tipo de definicin del estilo pierde las ventajas que ofrecen las hojas de estilo al mezclarse el contenido con la presentacin.
Algunas normas bsicas a la hora de crear una CSS son las siguientes:
En el siguiente ejemplo, h1{color: red;}, el selector, <h1>, le dice al navegador la parte del documento que se ver afectada por
esa regla. Los selectores pueden aparecer individualmente o agrupados, separndolos con comas:
h1, h2, h3 {

color: red;

}
o lo que es lo mismo
h1 {color: red;}
h2 {color: red;}
h3 {color: red;}

La propiedad, que en este caso sera color, especifica qu aspecto se va a cambiar. En este ejemplo la propiedad cambiada ser el color.
Las propiedades que se desean modificar en una CSS para un mismo selector pueden agruparse, pero ser necesario separar cada una de
ellas con un punto y coma.
p {text-align:center;color:red}
Normalmente se describe una propiedad por lnea, de la siguiente manera:
h1 {
padding-left: 11em;
font-family: Georgia, "Times New Roman",Times, serif;
color: red;
background-color: #d8da3d;
}
El valor, representado a la derecha de los dos puntos (:), establece el valor de la propiedad. Es importante recordar que si el valor est
formado por ms de una palabra, hay que ponerlo entre comillas.
p {font-family: "sans serif";}
Elementos de entrada
Entrada de archivos
La entrada de archivos puede ser utilizada para subir archivos al servidor. Este control muestra una caja de texto donde el usuario debe
especificar la ruta del archivo (que ser adjuntado localmente por el navegador) que ser enviado al servidor. De este modo los autores
pueden pedir a los visitantes que enven archivos de sus computadoras a travs de la pgina. El control habitualmente muestra un botn
para elegir el archivo visualmente.
Nota que para los formularios con subida de archivos debes especificar el valor "multipart/form-data" en el atributo "enctype" del tag
HTML form, de otro modo, el archivo no ser enviado.
Cdigo
<form method="post" action="agente.php" enctype="multipart/form-data">
Ingresa el archivo: <input name="imagen" type="file" />
</form>
Vista
Ingresa el archivo:
Etiquetando elementos
Las etiquetas de los elementos pueden hacer que tu pgina lozca mejor y sea ms funcional en agentes de usuario visuales (cuando un
visitante hace click en la etiqueta, el enfoque pasa automticamente al control asociado), pero stas sin duda harn una gran diferencia
para personas con discapacidades o con navegadores no visuales. Una etiqueta establece una relacin entre un control y una porcin de
texto (que se supone, establece un "ttulo" para el control).
Las etiquetas pueden insertarse con el elemento HTML label y son asociados a los controles mediante el atributo "for", que debe
coincidir con el valor del atributo "id" en el control.

Cdigo
<form method="post" action="agente.php">
<label for="idnombre">Nombre:</label> <input type="text" id="idnombre" name="nombre" /><br />
<label for="idapellido">Apellido:</label> <input type="text" id="idapellido" name="apellido" /><br /><br />
Gnero:<br /><input type="radio" id="idmasculino" name="genero" /><label for="idmasculino">Masculino</label><br />
<input type="radio" id="idfemenino" name="genero" /><label for="idfemenino">Femenino</label>
</form>
Vista
Nombre:
Apellido:

Gnero:
Masculino
Femenino
Puedes proba en el ejemplo anterior, cmo los controles toman el enfoque cuando hacer click en sus etiquetas.
Agrupando elementos
Todos los elementos en un formulario pueden tambin ser agrupados temticamente con el elemento HTML fieldset. Este elemento
contiene a un grupo de controles que estn relacionados entre s por alguna razn (por ejemplo, informacin personal, laboral,
financiera, sobre interests, etc.).
El ttulo de cada grupo de elementos puede establecerse con el elemento HTML legend que debe ser definido justo despus del tag de
apertura del elemento HTML fieldset, y debe proveer un ttulo descriptivo para el grupo.
Cdigo
<form method="post" action="gestor.php">
<fieldset>
<legend>Informacin personal</legend>
<label for="lnombre">Nombre</label>: <input id="lnombre" type="text" name="nombre" /><br />
<label for="lapellido">Apellido</label>: <input id="lapellido" type="text" name="apellido" /><br />
<label for="ldireccion">Direccin</label>: <input id="ldireccion" type="text" name="direccion" /><br />
<label for="ltelefono">Telfono</label>: <input id="ltelefono" type="text" name="telefono" />
</fieldset>
<fieldset>
<legend>Informacin laboral</legend>
<label for="ldirecciontrabajo">Direccin</label>: <input id="ldirecciontrabajo" type="text" name="direcciontrabajo" /><br />
<label for="ltelefonotrabajo">Telfono</label>: <input id="ltelefonotrabajo" type="text" name="telefonotrabajo" />
</fieldset>
</form>

Vista
Informacin personal Nombre:
Apellido:
Direccin:
Telfono:

Informacin laboral Direccin:

Telfono:
El uso de grupos de controles es amplio y depende de cada formulario en particular, pero puede ser muy beneficioso para los visitantes
cuando deben rellenar formularios muy largos (especialmente en agentes de usuario no visuales).
Etiquetando elementos
Las etiquetas de los elementos pueden hacer que tu pgina lozca mejor y sea ms funcional en agentes de usuario visuales (cuando un
visitante hace click en la etiqueta, el enfoque pasa automticamente al control asociado), pero stas sin duda harn una gran diferencia
para personas con discapacidades o con navegadores no visuales. Una etiqueta establece una relacin entre un control y una porcin de
texto (que se supone, establece un "ttulo" para el control).
Las etiquetas pueden insertarse con el elemento HTML label y son asociados a los controles mediante el atributo "for", que debe
coincidir con el valor del atributo "id" en el control.
Cdigo
<form method="post" action="agente.php">
<label for="idnombre">Nombre:</label> <input type="text" id="idnombre" name="nombre" /><br />
<label for="idapellido">Apellido:</label> <input type="text" id="idapellido" name="apellido" /><br /><br />
Gnero:<br /><input type="radio" id="idmasculino" name="genero" /><label for="idmasculino">Masculino</label><br />
<input type="radio" id="idfemenino" name="genero" /><label for="idfemenino">Femenino</label>
</form>
Vista
Nombre:
Apellido:

Gnero:
Masculino
Femenino
Puedes proba en el ejemplo anterior, cmo los controles toman el enfoque cuando hacer click en sus etiquetas.
Agrupando elementos
Todos los elementos en un formulario pueden tambin ser agrupados temticamente con el elemento HTML fieldset. Este elemento
contiene a un grupo de controles que estn relacionados entre s por alguna razn (por ejemplo, informacin personal, laboral,
financiera, sobre interests, etc.).

El ttulo de cada grupo de elementos puede establecerse con el elemento HTML legend que debe ser definido justo despus del tag de
apertura del elemento HTML fieldset, y debe proveer un ttulo descriptivo para el grupo.

Cdigo
<form method="post" action="gestor.php">
<fieldset>
<legend>Informacin personal</legend>
<label for="lnombre">Nombre</label>: <input id="lnombre" type="text" name="nombre" /><br />
<label for="lapellido">Apellido</label>: <input id="lapellido" type="text" name="apellido" /><br />
<label for="ldireccion">Direccin</label>: <input id="ldireccion" type="text" name="direccion" /><br />
<label for="ltelefono">Telfono</label>: <input id="ltelefono" type="text" name="telefono" />
</fieldset>
<fieldset>
<legend>Informacin laboral</legend>
<label for="ldirecciontrabajo">Direccin</label>: <input id="ldirecciontrabajo" type="text" name="direcciontrabajo" /><br />
<label for="ltelefonotrabajo">Telfono</label>: <input id="ltelefonotrabajo" type="text" name="telefonotrabajo" />
</fieldset>
</form>
Vista
Informacin personal Nombre:
Apellido:
Direccin:
Telfono:

Informacin laboral Direccin:

Telfono:
El uso de grupos de controles es amplio y depende de cada formulario en particular, pero puede ser muy beneficioso para los visitantes
cuando deben rellenar formularios muy largos (especialmente en agentes de usuario no visuales).
Agrupando elementos
Todos los elementos en un formulario pueden tambin ser agrupados temticamente con el elemento HTML fieldset. Este elemento
contiene a un grupo de controles que estn relacionados entre s por alguna razn (por ejemplo, informacin personal, laboral,
financiera, sobre interests, etc.).
El ttulo de cada grupo de elementos puede establecerse con el elemento HTML legend que debe ser definido justo despus del tag de
apertura del elemento HTML fieldset, y debe proveer un ttulo descriptivo para el grupo.

Cdigo
<form method="post" action="gestor.php">
<fieldset>
<legend>Informacin personal</legend>
<label for="lnombre">Nombre</label>: <input id="lnombre" type="text" name="nombre" /><br />
<label for="lapellido">Apellido</label>: <input id="lapellido" type="text" name="apellido" /><br />
<label for="ldireccion">Direccin</label>: <input id="ldireccion" type="text" name="direccion" /><br />
<label for="ltelefono">Telfono</label>: <input id="ltelefono" type="text" name="telefono" />
</fieldset>
<fieldset>
<legend>Informacin laboral</legend>
<label for="ldirecciontrabajo">Direccin</label>: <input id="ldirecciontrabajo" type="text" name="direcciontrabajo" /><br />
<label for="ltelefonotrabajo">Telfono</label>: <input id="ltelefonotrabajo" type="text" name="telefonotrabajo" />
</fieldset>
</form>
Vista
Informacin personal Nombre:
Apellido:
Direccin:
Telfono:

Informacin laboral Direccin:

Telfono:
El uso de grupos de controles es amplio y depende de cada formulario en particular, pero puede ser muy beneficioso para los visitantes
cuando deben rellenar formularios muy largos (especialmente en agentes de usuario no visuales).