21/09/13

Formularios. HTML. Pginas web HTML / XHTML y hojas de estilo CSS. Bartolom Sintes Marco

Formularios
En esta pgina se tratan los siguientes temas: El formulario: <form> Atributos comunes de los controles: name, value, disabled, readonly, tabindex y accesskey Controles Botones: <input /> y <button> Botones Submit y Reset mediante <input /> Botones Submit y Reset mediante <button> Caja de texto: <input type="text" />, <input type="password" /> y <textarea> Caja de texto de una sola lnea: <input type="text" /> y <input type="password" /> Caja de texto de varias lneas: <textarea> Casilla de verificacin: <input type="checkbox" /> Botn radio: <input type="radio" /> Men: <select> Selector de archivo: <input type="file" /> Imagen: <input type="image" /> Control oculto: <input type="hidden" /> Grupos de controles: <fieldset> Accesibilidad: <label>

El formulario: <form>
Un formulario es un conjunto de controles (botones, cajas de texto, casillas de verificacin, botones radio, etc) que permiten al usuario introducir datos y enviarlos al servidor web para su procesamiento. La etiqueta que delimita un formulario es la etiqueta <form> ... </form>. Los atributos ms importantes de la etiqueta <form> son: action: contiene el nombre del agente que procesar los datos remitidos al servidor (por ejemplo, un script de PHP) method: define la manera de envar los datos al servidor. Los valores posibles son: get: los valores enviados se aaden a la direccin indicada en el atributo action post: los valores se envan de forma separada Si el atributo method no est establecido, Internet Explorer y Firefox se comportan como si el valor fuera get. La etiqueta <form> es un elemento de bloque. En su interior puede haber cualquier elemento tpico de una pgina web (prrafos, imgenes, divisiones, listas, tablas, etc.), adems de las etiquetas que crean los controles. Los etiquetas que crean los controles en los formularios son <input />, <button>, <select>, <optgroup>, <option> y <textarea>. Adems, se pueden estructurar los controles con las etiquetas <fieldset> y <legend>. Por tlimo, la etiqueta <label> permite mejorar la accesibilidad de los controles. El navegador enva nicamente los datos de los controles contenidos en el formulario. En una misma pgina puede haber varios formularios que enven datos al mismo o a diferentes agentes. Volver al principio de la pgina

Atributos comunes de los controles: name, value, disabled, readonly, tabindex y accesskey
El atributo name identifica al control. El formulario nicamente enva al servidor los datos de los controles que tienen establecido el atributo name, por tanto si un control no tiene establecido su atributo name, el control simplemente se ignora. Si hubiera varios controles con el mismo atributo name, el formulario enva todos los datos. El atributo value permite establecer el valor inicial de un control, aunque cada control lo utiliza de una forma ligeramente distinta. El nico control sin atributo value es el rea de texto (<textarea>). En algunos casos (botones) el valor se muestra al usuario y el usuario no puede modificarlo. En otros casos (cajas de texto, contrasea) el valor se muestra en la pgina y el usuario puede modificarlo. En otros casos (casillas de verificacin, botones radio, opciones de men, oculto, imagen) el valor no se muestra en la pgina y el usuario no puede modificarlo. En algunos casos (botones, oculto, botones radio) el atributo value es necesario. En otros casos (casilla de verificacin, opciones de men) es conveniente. En otros casos (cajas de texto, contrasea, imagen) puede omitirse. En el caso del selector de archivo, ni Internet Explorer ni Firefox parecen utilizarlo. El atributo disabled permite deshabilitar el control. Una vez deshabilitado, el control ni siquiera puede coger el foco.
< i n p u tt y p e = " s u b m i t "v a l u e = " E n v i a r "d i s a b l e d = " d i s a b l e d "/ >

www.mclibre.org/consultar/amaya/xhtml/xhtml_formularios.html#n

1/9

21/09/13

Formularios. HTML. Pginas web HTML / XHTML y hojas de estilo CSS. Bartolom Sintes Marco
Enviar

< i n p u tt y p e = " t e x t "n a m e = " t e x t o "d i s a b l e d = " d i s a b l e d "/ >

El atributo readonly permite que el control no sea modificable, aunque el control puede coger el foco.
< i n p u tt y p e = " s u b m i t "v a l u e = " E n v i a r "r e a d o n l y = " r e a d o n l y "/ > Enviar

< i n p u tt y p e = " t e x t "n a m e = " t e x t o "v a l u e = " Aq u en om ec a m b i a s ! "r e a d o n l y = " r e a d o n l y "/ > A que no me cambias!

El atributo tabindex permite controlar el orden en que el foco pasa de un elemento a otro mediante el tabulador (Tab para avanzar y Shift+Tab para retroceder). Los valores de tabindex pueden ser nmeros naturales (incluido el cero), no necesariamente consecutivos. Si no est presente, los controles se visitan en el orden en que aparecen en el texto. Si est presente, los controles se visitan de menor a mayor.
< i n p u tt y p e = " t e x t "n a m e = " t e x t o 1 "v a l u e = " T e x t o1 "/ > < i n p u tt y p e = " t e x t "n a m e = " t e x t o 2 "v a l u e = " T e x t o2 "/ > < i n p u tt y p e = " t e x t "n a m e = " t e x t o 3 "v a l u e = " T e x t o3 "/ > < i n p u tt y p e = " t e x t "n a m e = " t e x t o 4 "v a l u e = " T e x t o4 "/ >

Texto 1 Texto 4

Texto 2

Texto 3

< i n p u tt y p e = " t e x t "n a m e = " t e x t o 1 "v a l u e = " T e x t o1 "t a b i n d e x = " 5 "/ > < i n p u tt y p e = " t e x t "n a m e = " t e x t o 2 "v a l u e = " T e x t o2 "t a b i n d e x = " 7 "/ > < i n p u tt y p e = " t e x t "n a m e = " t e x t o 3 "v a l u e = " T e x t o3 "t a b i n d e x = " 6 "/ > < i n p u tt y p e = " t e x t "n a m e = " t e x t o 4 "v a l u e = " T e x t o4 "t a b i n d e x = " 8 "/ >

Texto 1 Texto 4

Texto 2

Texto 3

El atributo accesskey permite definir teclas de acceso (atajos de teclado). El problema con las teclas de acceso es que a veces entran en conflicto con combinaciones de teclas ya definidas por el navegador o el sistema operativo. Para acceder a las teclas de acceso, Internet Explorer utiliza tanto la combinacin Alt+tecla como la combinacin Alt+Shift+tecla, mientras que Firefox (a partir de la versin 2.0) utiliza nicamente la combinacin Alt+Shift+tecla.
< i n p u tt y p e = " t e x t "n a m e = " t e x t o 1 "v a l u e = " A c c e s oc o na "a c c e s s k e y = " a "/ > < i n p u tt y p e = " t e x t "n a m e = " t e x t o 2 "v a l u e = " A c c e s oc o ne "a c c e s s k e y = " e "/ > < i n p u tt y p e = " t e x t "n a m e = " t e x t o 3 "v a l u e = " A c c e s oc o ni "a c c e s s k e y = " i "/ > < i n p u tt y p e = " t e x t "n a m e = " t e x t o 4 "v a l u e = " A c c e s oc o no "a c c e s s k e y = " o "/ > Acceso con a Acceso con i Acceso con e Acceso con o

Nota: Internet Explorer 9 puede acceder a un elemento con la letra d como letra de acceso, pero versiones anteriores no podan, ya que utilizaban la combinacin Alt+(Shift)+d para acceder a la barra de direccin, como se comenta en la pgina de diferencias entre IE9 e IE8. Firefox y Chrome s que puede acceder mediante Alt+Shift+d (la combinacin Alt+d accede a la barra de direccin). Internet Explorer 6 no utilizaba la combinacin Alt+(Shift)+d para acceder a la barra de direccin. Cualquier carcter, menos los acentos, puede ser tecla de acceso:
< i n p u tt y p e = " t e x t "n a m e = " t e x t o 1 "v a l u e = " A c c e s oc o n1 "a c c e s s k e y = " 1 "/ > < i n p u tt y p e = " t e x t "n a m e = " t e x t o 2 "v a l u e = " A c c e s oc o n2 "a c c e s s k e y = " 2 "/ > < i n p u tt y p e = " t e x t "n a m e = " t e x t o 3 "v a l u e = " A c c e s oc o n3 "a c c e s s k e y = " 3 "/ > < i n p u tt y p e = " t e x t "n a m e = " t e x t o 4 "v a l u e = " A c c e s oc o n4 "a c c e s s k e y = " 4 "/ > Acceso con 1 Acceso con 3 Acceso con 2 Acceso con 4

< i n p u tt y p e = " t e x t "n a m e = " t e x t o 1 "v a l u e = " A c c e s oc o n! "a c c e s s k e y = " , "/ >

Acceso con ,

Acceso con .

www.mclibre.org/consultar/amaya/xhtml/xhtml_formularios.html#n

2/9

21/09/13

Formularios. HTML. Pginas web HTML / XHTML y hojas de estilo CSS. Bartolom Sintes Marco
< i n p u tt y p e = " t e x t "n a m e = " t e x t o 2 "v a l u e = " A c c e s oc o n"a c c e s s k e y = " . "/ > < i n p u tt y p e = " t e x t "n a m e = " t e x t o 3 "v a l u e = " A c c e s oc o n+ "a c c e s s k e y = " + "/ > Acceso con +

Si hay varios elementos con la misma tecla de acceso, o si hay varios elementos con la misma tecla de acceso en maysculas y minsculas, Firefox e Internet Explorer avanzan de uno a otro (FF con Alt+Shift+tecla, IE con Alt+tecla). Internet Explorer adems retrocede de uno a otro con Alt+Shift+tecla.
< i n p u tt y p e = " t e x t "n a m e = " t e x t o 1 "v a l u e = " A c c e s oc o nz "a c c e s s k e y = " z "/ > < i n p u tt y p e = " t e x t "n a m e = " t e x t o 2 "v a l u e = " A c c e s oc o nz "a c c e s s k e y = " z "/ > < i n p u tt y p e = " t e x t "n a m e = " t e x t o 3 "v a l u e = " A c c e s oc o nz "a c c e s s k e y = " z "/ > Acceso con z Acceso con z Acceso con z

< i n p u tt y p e = " t e x t "n a m e = " t e x t o 1 "v a l u e = " A c c e s oc o nw "a c c e s s k e y = " w "/ > < i n p u tt y p e = " t e x t "n a m e = " t e x t o 2 "v a l u e = " A c c e s oc o nW "a c c e s s k e y = " W "/ >

Acceso con w

Acceso con W

Volver al principio de la pgina

Controles
Botones: <input /> y <button>
Los botones se crean mediante la etiqueta <button>, aunque los botones ms usuales en un formulario (los botones Submit y Reset) se pueden crear tambin con la etiqueta <input />. Normalmente los botones no suelen llevar atributo name, pero se puede poner si se quiere (tendra sentido si un formulario contuviera dos botones de envo y quisieramos saber en cul de ellos ha hecho clic el usuario, pero esto no es muy habitual).

Botones Submit y Reset mediante <input />

El botn Submit es el que permite al usuario remitir los datos al servidor. Se crea mediante una etiqueta <input /> cuyo atributo type tiene el valor submit. El texto que se muestra en el botn se define mediante el atributo value.
< i n p u tt y p e = " s u b m i t "v a l u e = " S u b m i t "/ >

Submit

< i n p u tt y p e = " s u b m i t "v a l u e = " E n v i a r "/ >

Enviar

El botn Reset restablece los valores iniciales del formulario. Se crea mediante una etiqueta <input /> cuyo atributo type tiene el valor reset. El texto que se muestra en el botn se define mediante el atributo value.
< i n p u tt y p e = " r e s e t "v a l u e = " R e s e t "/ >

Reset

< i n p u tt y p e = " r e s e t "v a l u e = " B o r r a rt o d o "/ >

Borrar todo

El atributo value slo puede contener texto, no imgenes.

Botones Submit y Reset mediante <button>

La etiqueta <button> permite crear botones de tipo submit o reset o botones de tipo general que deben asociarse a scripts para hacer algo. Los botones submit o reset se crean mediante el atributo type con el valor submit o reset. El botn de uso general se crea mediante el atributo type con el valor button.
< b u t t o nt y p e = " s u b m i t " > E n v i a r < / b u t t o n >

Enviar

< b u t t o nt y p e = " r e s e t " > B o r r a rt o d o < / b u t t o n >

www.mclibre.org/consultar/amaya/xhtml/xhtml_formularios.html#n

3/9

21/09/13

Formularios. HTML. Pginas web HTML / XHTML y hojas de estilo CSS. Bartolom Sintes Marco
Borrar todo

< b u t t o nt y p e = " b u t t o n " > B o t n < / b u t t o n >

Botn

Los botones <button> pueden contener texto e imgenes (o estructuras ms complejas, pero no mapas de imgenes).
< b u t t o n > < i m ga l t = " c d l i b r e . o r g "t i t l e = " c d l i b r e . o r g "s r c = " c d l i b r e . p n g "w i d t h = " 1 6 "h e i g h t = " 1 6 "/ > B o t n < / b u t t o n >

Botn

Si un botn no lleva el atributo type, tanto Firefox como Internet Explorer se comportan como si fuera un botn de tipo submit.
< b u t t o n > B o t n < / b u t t o n >

Botn

Nota: Si un botn no lleva el atributo type, Internet Explorer 8 se comporta como si fuera un botn de tipo submit, pero Internet Explorer 7 y anteriores se comportaban como si fuera un botn de tipo button, como se comenta en la pgina de diferencias entre IE8 e IE7. Volver al principio de la pgina

Caja de texto: <input type="text" />, <input type="password" /> y <textarea>

Existen dos tipos de cajas de texto: de una sola lnea y de varias lneas

Caja de texto de una sola lnea: <input type="text" /> y <input type="password" />
Las cajas de texto de una sola lnea se crean mediante la etiqueta <input /> cuyo atributo type tiene el valor text.
< i n p u tt y p e = " t e x t "n a m e = " t e x t o "/ >

El atributo value (optativo) contiene el valor inicial de la caja de texto. El atributo size indica el tamao en caracteres de la caja en la pantalla (por omisin, las cajas suelen tener 20 carcteres de tamao). El atributo maxlength indica el nmero mximo de carcteres que puede escribir el usuario.
< i n p u tt y p e = " t e x t "n a m e = " t e x t o "v a l u e = " E s c r i b ea l g o "/ >

Escribe algo

< i n p u tt y p e = " t e x t "n a m e = " t e x t o "s i z e = " 1 0 "/ >

< i n p u tt y p e = " t e x t "n a m e = " t e x t o "m a x l e n g t h = " 5 "/ >

Existe una caja de texto de una sola lnea especial para escribir contraseas que se crea mediante la etiqueta <input /> cuyo atributo type tiene el valor password.
< i n p u tt y p e = " p a s s w o r d "n a m e = " c o n t r a s e n a "/ >

Al escribir en una caja de contrasea, en vez de letras aparecen estrellas. Es importante sealar que estas cajas no proporcionan ninguna seguridad en la transmisin, simplemente ocultan al usuario lo que este escribe.

Caja de texto de varias lneas: <textarea>

www.mclibre.org/consultar/amaya/xhtml/xhtml_formularios.html#n 4/9

21/09/13

Formularios. HTML. Pginas web HTML / XHTML y hojas de estilo CSS. Bartolom Sintes Marco

Las cajas de texto de varias lneas se crean mediante la etiqueta <textarea>. Los atributos obligatorios rows y cols establecen el nmero de filas y columnas de la caja. El atributo value (optativo) contiene el valor inicial de la caja de texto de varas lneas.
< t e x t a r e an a m e = " t e x t o "r o w s = " 4 "c o l s = " 2 0 " > < / t e x t a r e a >

< t e x t a r e an a m e = " t e x t o "r o w s = " 3 "c o l s = " 3 0 " > < / t e x t a r e a >

< t e x t a r e an a m e = " t e x t o "r o w s = " 4 "c o l s = " 4 0 " > E s c r i b ea l g o < / t e x t a r e a >

E s c r i b ea l g o

Volver al principio de la pgina

Casilla de verificacin: <input type="checkbox" />

Las casillas de verificacin se crean mediante la etiqueta <input /> cuyo atributo type tiene el valor checkbox.
< i n p u tt y p e = " c h e c k b o x "n a m e = " c a s i l l a "/ > C a s i l l a1

Casilla 1

Si el atributo checked tiene el valor checked, la casilla aparece marcada.

< i n p u tt y p e = " c h e c k b o x "n a m e = " c a s i l l a "c h e c k e d = " c h e c k e d "/ > C a s i l l a1

Casilla 1

Las casillas de verificacin slo se envan si se han marcado. El atributo value contiene el valor que envia el formulario si la casilla de verificacin est marcada. Si el atributo value no est establecido, el formulario enva el valor on. Volver al principio de la pgina

Botn radio: <input type="radio" />

Los botones radio se crean mediante la etiqueta <input /> cuyo atributo type tiene el valor radio.
< i n p u tt y p e = " r a d i o "n a m e = " r a d i o " v a l u e = " 1 "/ > O p c i n1

Opcin 1

Lo botones radio que tienen el mismo atributo name forman un grupo, es decir, que si se marca uno de ellos se desmarca automticamente el resto.
< i n p u tt y p e = " r a d i o "n a m e = " r a d i o "v a l u e = " 1 "/ > O p c i n1 < b r/ > < i n p u tt y p e = " r a d i o "n a m e = " r a d i o "v a l u e = " 2 "/ > O p c i n2

Opcin 1 Opcin 2

Los dos ejemplos anteriores, aunque estn separados, forman el mismo botn radio ya que su atributo name tiene el mismo valor (en este caso "radio"). Se puede comprobar pulsando en uno de los ejemplos y observando como se desmarca el otro ejemplo. Para que fueran independientes, bastara con que sus atributos name fueran distintos, como en el ejemplo siguiente:
< i n p u tt y p e = " r a d i o "n a m e = " r a d i o 1 "v a l u e = " 1 "/ > O p c i n1 < b r/ > < i n p u tt y p e = " r a d i o "n a m e = " r a d i o 2 "v a l u e = " 2 "/ > O p c i n2

Opcin 1 Opcin 2

Si uno de los botones tiene el atributo checked con el valor checked, el botn aparece marcado.
< i n p u tt y p e = " r a d i o "n a m e = " r a d i o 3 "v a l u e = " 1 "/ > O p c i n1 < b r/ > < i n p u tt y p e = " r a d i o "n a m e = " r a d i o 3 "v a l u e = " 2 "c h e c k e d = " c h e c k e d "/ > O p c i n2

Opcin 1 Opcin 2
5/9

www.mclibre.org/consultar/amaya/xhtml/xhtml_formularios.html#n

21/09/13

Formularios. HTML. Pginas web HTML / XHTML y hojas de estilo CSS. Bartolom Sintes Marco

Los botones radio slo se envan si se han marcado. El atributo value contiene el valor que envia el formulario si el botn radio est marcado.Si el atributo value no est establecido, el formulario enva el valor on, as que para poder saber cul ha sido la opcin elegida por el usuario es necesario establecer con valores distintos los atributos value de todos los elementos de un botn radio . Volver al principio de la pgina

Men: <select>
Los mens se crean mediante la etiqueta <select>. Cada opcin del men se define mediante la etiqueta <option>.
< s e l e c tn a m e = " m e n u " > < o p t i o ns e l e c t e d = " s e l e c t e d "v a l u e = " 1 " > U n o < / o p t i o n > < o p t i o nv a l u e = " 2 " > D o s < / o p t i o n > < o p t i o nv a l u e = " 3 " > T r e s < / o p t i o n > < / s e l e c t >

Uno

El atributo selected indica la opcin por omisin.

< s e l e c tn a m e = " m e n u " > < o p t i o nv a l u e = " 1 " > U n o < / o p t i o n > < o p t i o nv a l u e = " 2 " > D o s < / o p t i o n > < o p t i o nv a l u e = " 3 "s e l e c t e d = " s e l e c t e d " > T r e s < / o p t i o n > < / s e l e c t >

Tres

Si ningn elemento posee el atributo selected, tanto Firefox como Internet Explorer muestran la primera opcin del men.
< s e l e c tn a m e = " m e n u " > < o p t i o nv a l u e = " 1 " > U n o < / o p t i o n > < o p t i o nv a l u e = " 2 " > D o s < / o p t i o n > < o p t i o nv a l u e = " 3 " > T r e s < / o p t i o n > < / s e l e c t >

Uno

Para evitar malentendidos y forzar al usuario a elegir un valor, se suele incluir una opcin en blanco al principio de los mens
< s e l e c tn a m e = " m e n u " > < o p t i o nv a l u e = " 1 "s e l e c t e d = " s e l e c t e d " > < / o p t i o n > < o p t i o nv a l u e = " 2 " > U n o < / o p t i o n > < o p t i o nv a l u e = " 3 " > D o s < / o p t i o n > < o p t i o nv a l u e = " 4 " > T r e s < / o p t i o n > < / s e l e c t >

El atributo size permite definir la altura del control

< s e l e c tn a m e = " m e n u "s i z e = " 3 " > < o p t i o nv a l u e = " 1 "s e l e c t e d = " s e l e c t e d " > U n o < / o p t i o n > < o p t i o nv a l u e = " 2 " > D o s < / o p t i o n > < o p t i o nv a l u e = " 3 " > T r e s < / o p t i o n > < o p t i o nv a l u e = " 4 " > C u a t r o < / o p t i o n > < / s e l e c t >

Uno Dos Tres Cuatro

El atributo multiple permite elegir varias opciones simultneamente (con ayuda de la tecla Control o Maysculas )
< s e l e c tn a m e = " m e n u "s i z e = " 4 "m u l t i p l e = " m u l t i p l e " > < o p t i o nv a l u e = " 1 "s e l e c t e d = " s e l e c t e d " > U n o < / o p t i o n > < o p t i o nv a l u e = " 2 " > D o s < / o p t i o n > < o p t i o nv a l u e = " 3 " > T r e s < / o p t i o n > < o p t i o nv a l u e = " 4 " > C u a t r o < / o p t i o n > < / s e l e c t >

Uno Dos Tres Cuatro

Se pueden agrupar opciones utilizando la etiqueta <optgroup>.

< s e l e c tn a m e = " m e n u " > < o p t i o ns e l e c t e d = " s e l e c t e d " > < / o p t i o n > < o p t g r o u pl a b e l = " G r u p o 1 " > < o p t i o nv a l u e = " 1 " > O p c i nu n o < / o p t i o n > < o p t i o nv a l u e = " 2 " > O p c i nd o s < / o p t i o n > < o p t i o nv a l u e = " 3 " > O p c i nt r e s < / o p t i o n > < / o p t g r o u p >

www.mclibre.org/consultar/amaya/xhtml/xhtml_formularios.html#n

6/9

21/09/13

Formularios. HTML. Pginas web HTML / XHTML y hojas de estilo CSS. Bartolom Sintes Marco
< o p t g r o u pl a b e l = " G r u p o 2 " > < o p t i o nv a l u e = " 4 " > O p c i nc u a t r o < / o p t i o n > < o p t i o nv a l u e = " 5 " > O p c i nc i n c o < / o p t i o n > < o p t i o nv a l u e = " 6 " > O p c i ns e i s < / o p t i o n > < / o p t g r o u p > < / s e l e c t >

El atributo value de cada opcin contiene el valor que envia el formulario si la opcin est elegida. Si no se define el atributo value, el formulario enva como valor el texto que aparece en el men. Volver al principio de la pgina

Selector de archivo: <input type="file" />

El selector de archivo se crea mediante la etiqueta <input /> cuyo atributo type tiene el valor file.
< i n p u tt y p e = " f i l e "n a m e = " a r c h i v o "/ >

Seleccionar archivo No se ha seleccionado ningn archivo

Aunque la recomendacin indica que el atributo value puede interpretarse como el archivo elegido por omisin, ni Internet Explorer ni Firefox utilizan este atributo. Volver al principio de la pgina

Imagen: <input type="image" />

El control de tipo imagen inserta una imagen que funciona como un botn (aunque ni Firefox ni Internet Explorer le dan relieve como a los botones). Al hacer clic en un punto de la imagen se enva el formulario (como si se hubiera pulsado un botn submit) y se envan las coordenadas del punto en el que se ha hecho clic (junto con los valores de los otros controles del formulario).
< i n p u tt y p e = " i m a g e "n a m e = " G N U "a l t = " G N U " s r c = " g n u . j p g "/ >

Si se define el atributo value, el formulario enva tambin el nombre del control con el valor del atributo. Volver al principio de la pgina

Control oculto: <input type="hidden" />

El control oculto se crea mediante la etiqueta <input /> cuyo atributo type tiene el valor hidden. Lgicamente, los navegadores no muestran estos controles en la pantalla (aunque pueden verse en el cdigo fuente). Se utilizan para almacenar informacin que de otro modo se perdera (por ejemplo, cuando hay varios formularios encadenados).
< i n p u tt y p e = " h i d d e n "n a m e = " n o m b r e "v a l u e = " p e p i t o "/ >

Volver al principio de la pgina

Grupos de controles: <fieldset>

La etiqueta <fieldset> permite agrupar un conjunto de controles. Los navegadores muestran una caja alrededor de cada grupo de controles. La etiqueta <legend> permite aadir una leyenda al <fieldset>. Los navegadores muestran la leyenda sobre el borde que rodea el grupo de controles.
< f i e l d s e t > < l e g e n d > F o r m u l a r i o < / l e g e n d > < i n p u tt y p e = " t e x t "n a m e = " t e x t o " / > < b r / > < s e l e c tn a m e = " m e n u " > < o p t i o n > U n o < / o p t i o n > < o p t i o n > D o s < / o p t i o n >

Formulario

www.mclibre.org/consultar/amaya/xhtml/xhtml_formularios.html#n

7/9

21/09/13

Formularios. HTML. Pginas web HTML / XHTML y hojas de estilo CSS. Bartolom Sintes Marco
< o p t i o ns e l e c t e d = " s e l e c t e d " > T r e s < / o p t i o n > < / s e l e c t > < / f i e l d s e t > Tres

Puede haber varias etiquetas <legend>, pero slo la primera se ve sobre el borde, el resto se ven dentro del <fieldset>.
< f i e l d s e t > < l e g e n d > F o r m u l a r i o < / l e g e n d > < l e g e n d > S e g u n d al e y e n d a < / l e g e n d > < p > < i n p u tt y p e = " t e x t "n a m e = " t e x t o "/ > < b r / > < s e l e c tn a m e = " m e n u " > < o p t i o n > U n o < / o p t i o n > < o p t i o n > D o s < / o p t i o n > < o p t i o ns e l e c t e d = " s e l e c t e d " > T r e s < / o p t i o n > < / p > < / s e l e c t > < / f i e l d s e t >

Formulario Segunda leyenda

Tres

Volver al principio de la pgina

Accesibilidad: <label>
La etiqueta <label> permite asociar un control con un texto, de manera que mejore la accesibilidad de los formularios. La asociacin entre el control y la etiqueta <label> puede ser implcita o explcita. Se dice que la relacin es implcita cuando el control se encuentra en el interior de la etiqueta. Se dice que la relacin es explcita cuando la etiqueta <label> contiene el atributo for, que indica el control afectado (el control tiene entonces que tener establecido el atributo id). Por ejemplo, en el caso de una casilla de verificacin, la etiqueta <label> permite que la casilla se marque o desmarque haciendo clic en el texto, como se muestra en los ejemplos siguientes:
< i n p u tt y p e = " c h e c k b o x "n a m e = " c a s i l l a "/ > C a s i l l a1

Casilla 1

< l a b e l > < i n p u tt y p e = " c h e c k b o x "n a m e = " c a s i l l a "/ > C a s i l l a1 < / l a b e l >

Casilla 1

< i n p u tt y p e = " c h e c k b o x "n a m e = " c a s i l l a "i d = " c a s i l l a 1 "/ > < l a b e lf o r = " c a s i l l a 1 " > C a s i l l a1 < / l a b e l >

Casilla 1

Nota: Internet Explorer 7 representa correctamente la asociacin implcita. Las versiones anteriores lo hacan incorrectamente, como se comenta en la pgina de diferencias entre IE7 e IE6. En el caso de la cajas de texto <input type="text" />, la etiqueta <label> permite que el cursor se site en la caja de texto haciendo clic en el texto, como se muestra en los ejemplos siguientes:
N o m b r e :< i n p u tt y p e = " t e x t "n a m e = " c a s i l l a "/ >

Nombre:

< l a b e l > N o m b r e :< i n p u tt y p e = " t e x t "n a m e = " c a s i l l a "/ > < / l a b e l >

Nombre:

< l a b e lf o r = " t e x t 1 " > N o m b r e : < / l a b e l > < i n p u tt y p e = " t e x t "n a m e = " c a s i l l a "i d = " t e x t 1 "/ >

Nombre:

Nota: Internet Explorer 7 representa correctamente la asociacin implcita. Las versiones anteriores lo hacan incorrectamente, como se comenta en la pgina de diferencias entre IE7 e IE6. Volver al principio de la pgina Esta pgina forma parte del curso "Pginas web HTML / XHTML y hojas de estilo CSS" disponible en http://www.mclibre.org Autor: Bartolom Sintes Marco ltima modificacin: 20 de diciembre de 2011
www.mclibre.org/consultar/amaya/xhtml/xhtml_formularios.html#n 8/9

21/09/13

Formularios. HTML. Pginas web HTML / XHTML y hojas de estilo CSS. Bartolom Sintes Marco

Esta obra est bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 Espaa.

www.mclibre.org/consultar/amaya/xhtml/xhtml_formularios.html#n

9/9