Las tablas son un poderosa herramienta a la hora de mostrar y relacionar cierto tipo de informacin.

An cuando muchos sitios son construidos (por su naturaleza) sin usar una simple tabla, existen algunas ocasiones en que el valor de las tablas se vuelve escencial. En las prximas lneas intentaremos cubrir todas las caractersticas de las tablas para estar listos para utilizarlas cuando se necesite. Simple tables Una tabla HTML puede ser considerada, de manera simple, como un grupo de filas donde cada una de ellas contiene un grupo de celdas (y no alrevs). Las tablas, como toda estructura en los documentos HTML, son definidas usando elementos. Entonces, una tabla simple puede ser insertada en un documento HTML usando tres elementos: el elemento HTML table (estructura contenedora principal), el elemento HTML tr (contenedor de fila) y el elemento HTML td (celda). Veamos un ejemplo: Cdigo

<table> <tr> <td>Celda <td>Celda <td>Celda </tr> <tr> <td>Celda <td>Celda <td>Celda </tr> </table>

1</td> 2</td> 3</td> 4</td> 5</td> 6</td> Vista

Celda 1 Celda 2 Celda 3 Celda 4 Celda 5 Celda 6 Nota: los bordes en este ejemplo fueron establecidos mediante el uso de CSS para mejorar la visualizacin. Te recomiendo evitar el uso de atributos presentacionales como "border" ya que son candidatos a ser desaprobados en el futuro. Adems, nota que, las celdas vacas deben ser declaradas utilizando sus respectivos tags para lograr una correctitud en el cdigo. cuando el contenido de una celda debe ser vaco, deberas usar una espacio en blanco (&nbsp;) como su contenido. Esto har que tu pgina sea ms compatible ya que algunos

navegadores tienen problemas representando celdas vacas. Unificacin de celdas Para algunas tablas puedes necesitar unificar dos o ms celdas en una sola que pasar a ocupar el lugar de aquellas afectadas. Estas unificaciones pueden ser llevadas a cabo con los atributos "rowspan" (para unificacin vertical) y "colspan" (para unificacin horizontal), ambos disponibles para celdas (tag HTML td y tag HTML th). Cdigo <table> <tr> <td>Campo 1</td> <td>Campo 2</td> <td>Campo 3</td> </tr> <tr> <td colspan="2">Campos 4 y 5</td> <td>Campo 6</td> </tr> <tr> <td>Campo 7</td> <td>Campo 8</td> <td>Campo 9</td>

</tr> </table> Vista Campo 1 Campo 2 Campo 3 Campos 4 y 5 Campo 6 Campo 7 Campo 8 Campo 9 Mira en el ejemplo anterior cmo una definicin de celda que unifica a dos, es el equivalente a dos definiciones de celdas simples. Esto tambin funciona para uificacin vertical, con una pequea diferencia debido a la naturaleza de las tables en HTML. Cuando se unifican celdas verticalmente, las definiciones de celdas en las filas afectadas por la unificacin deben ser omitidas. Mira el ejemplo, donde los campos 1, 4 y 7 son unificados: Cdigo <table> <tr> <td rowspan="3">Campo unificado</td> <td>Campo 2</td> <td>Campo 3</td> </tr> <tr> <td>Campo 5</td> <td>Campo 6</td> </tr>

<tr> <td>Campo 8</td> <td>Campo 9</td> </tr> </table>

Vista

Campo 2 Campo 3 Campo unificado Campo 5 Campo 6 Campo 8 Campo 9 Debes tener cuidado al unificar filas y columnas de no encimar las celdas unificadas. Esto podra tener resultados inesperados. Celdas de encabezado Dos tipos de celda pueden ser definidas en una tabla HTML. Una de ellas es la celda simple (elemento HTML td), ya definido en los ejemplos anteriores, y la otra es un tipo especial de celda (elemento HTML th) que contiene informacin de encabezado para un conjunto de celdas especficas. Los navegadores pueden representar el contenido de las celdas de encabezado de una forma especial (usualmente como texto centrado y en negrita), atributos que pueden ser visualmente logrados con la

utilizacin de celdas normales (elemento HTML td) con atributos presentacionales (texto centrado y en negrita). Pero las celdas de encabezado proveen ms informacin que puede ser til para navegadores no visuales (los navegadores hablados pueden hablar al usuario el contenido de la celda e inmediatamente asociarlo a la celda de encabezado) y motores de bsqueda. El atributo "scope" Las celdas afectadas por una celda de encabezado pueden ser definidas de diferentes maneras, pero la ms comn de todas es hacerlo a travs del atributo "scope". Utilizado en ambos, el tag HTML td y el tag HTML th, este atributo puede tomar cuatro valores: "row" y "col" afectando respectivamente a la fila o columna contenedora, y "rowgroup" y "colgroup" afectando respectivamente al grupo de filas o columnas contenedora (descriptos ms adelante en este tutorial).

En el ejemplo siguiente la misma "tabla simple" es definida pero esta vez con celdas de encabezado que utilizan el atributo "scope": Cdigo <table> <tr> <th scope="col">Columna 1</th> <th scope="col">Columna 2</th> <th scope="col">Columna 3</th> </tr> <tr> <td>Celda 1</td> <td>Celda 2</td> <td>Celda 3</td> </tr> <tr> <td>Celda 4</td> <td>Celda 5</td> <td>Celda 6</td> </tr> </table> Vista Columna 1 Columna 2 Columna 3 Celda 1 Celda 2 Celda 3

Celda 4

Celda 5

Celda 6

Como podemos deducir del prrafo anterior, en este ejemplo, la columna 1 provee informacin de encabezado para las celdas 1 y 4, la columna 2 para las celdas 2 y 5 y la columna 3 para las celdas 3 y 6. Nota que, como este atributo puede tambin ser definido en celdas normales (tag HTML td), las celdas normales tambin pueden ser usadas como celdas de encabezado. Este es el caso en que una celda provee ambas, informacin de encabezado y contenido. En cualquier otro caso se deben utilizar celdas de encabezado (tag HTML th). El atributo "headers" Otra forma de asociar celdas de encabezado a celdas normales es a travs del atributo "headers". Este atributo es definido en celdas normales (tag HTML td) y enuncia un conjunto de celdas (usando sus atributos "id", separados por espacios) que proveen informacin de encabezado para la misma.

Existe un escaso nmero de casos (y son muy raros) en que este atributo no puede ser reemplazado por el atributo "scope". El prximo ejemplo muestra una tabla superpuesta, donde existe una lnea oblcua de celdas que va desde la esquina superior izquierda a la esquina inferior derecha y sirve como lmite para definir qu celdas reciben los encabezados superiores y de la derecha, y cules los inferiores y de la izquierda. Cdigo <table> <tr> <td>&nbsp;</td> <th id="h1">H1</th> <th id="h2">H2</th> <th id="h3">H3</th> <td>&nbsp;</td> </tr> <tr> <th id="h4">H4</th> <td headers="h1 h4 h7 h10">C1</td> <td headers="h2 h7">T1</td> <td headers="h3 h7">T2</td> <th id="h7">H7</th> </tr>

<tr> <th id="h5">H5</th> <td headers="h1 h5">B1</td> <td headers="h2 h5 h8 h11">C2</td> <td headers="h3 h8">T3</td> <th id="h8">H8</th> </tr> <tr> <th id="h6">H6</th> <td headers="h1 h6">B2</td> <td headers="h2 h6">B3</td> <td headers="h3 h6 h9 h12">C3</td> <th id="h9">H9</th> </tr> <tr> <td>&nbsp;</td> <th id="h10">H10</th> <th id="h11">H11</th> <th id="h12">H12</th> <td>&nbsp;</td> </tr> </table> Vista H1 H4 C1 H2 T1 H3 T2 H7

H5 B1 H6 B2

C2 B3

T3 C3

H8 H9

H10 H11 H12 La informacin en esta tabla no es completamente visible, pero semnticamente provee un muy bien definido conjunto de encabezados para cada celda. Por ejemplo, la celda "C1" (en el eje oblcuo) con cuatro encabezados (H1, H4, H7 y H10), y la celda T1 (por encima del eje) con dos (H2 y H7). Este tipo de tablas es uno de los pocos usos donde el atributo "scope" (la forma simple) no funcionara, y es mayormente utilizado para mostrar informacin cientfica. El atributo "axis" Este atributo, que puede ser definido tanto para celdas de encabezado como para celdas normales, agrupa encabezados e informacin en categoras, en las que las celdas pueden ser clasificadas. Auque su uso es un tanto complejo, provee formas nuevas y

ms amplias de proveer informacin de encabezado, especialmente en el caso de navegadores hablados para gente ciega. El siguiente ejemplo ilustra el uso del atributo "axis" como una forma de hacer a la informacin ms legible y fcil de entender. Cdigo <table> <tr> <th scope="col">Pas</th> <th scope="col" axis="ingresos">Autombiles</th> <th scope="col" axis="ingresos">Repuestos</th> <th scope="col" axis="egresos">Insumos</th> <th scope="col">Balance</th> </tr> <tr> <td scope="row" axis="Amrica">Estados Unidos</td> <td>$5.432.551</td> <td>$3.275.268</td> <td>-$2.235,528</td> <td>$6,472,291</td> </tr> <tr> <td scope="row" axis="Europa">Reino Unido</td>

<td>$3,763,221</td> <td>$1,342,231</td> <td>-$982,268</td> <td>$4,123,184</td> </tr> <tr> <td scope="row" axis="Europa">Francia</td> <td>$2.458.197</td> <td>$2.456.841</td> <td>-$1.315,548</td> <td>$3,599,490</td> </tr> <tr> <td scope="row" axis="Amrica">Canad</td> <td>$1.846.548</td> <td>$448.556</td> <td>-$351,559</td> <td>$1,943,545</td> </tr> </table> Vista Pas Autombile Repuesto Insumos s s Balance

Estado s $5.432.551 Unidos

$3.275.26 $6,472,29 $2.235,52 8 1 8

Reino unido

$3,763,221

$1,342,23 $4,123,18 -$982,268 1 4 $2.456.84 $3,599,49 $1.315,54 1 0 8 $448.556 -$351,559 $1,943,54 5

Franci $2.458.197 a Canad $1.846.548

Este ejemplo establece dos tipos de ejes o categoras: una categora de regin (Europa y Amrica) y una categora de ingresos/egresos. En los navegadores hablados esta informacin no visual tiene mucho sentido y ayuda a mejorar la comprensin de tablas con estructuras complicadas. Agrupacin horizontal Una tabla HTML puede ser organizada horizontalmente en tres grupos: el encabezado (elemento HTML thead), el cuerpo o cuerpos (elemento HTML tbody) y el pie (elemento HTML tfoot). Cada uno de estos elementos encierra un grupo de filas. Estas divisiones pueden ayudar a hacer las tablas ms fciles de leer, especialmente cuando

la tabla se debe mostrar en ms de una pgina (por ejemplo, cuando una tabla grande debe ser impresa). Es estos casos, el encabezado y el pie son mostrados en cada pgina para mejorar la comprensin. Cdigo <table> <thead> <tr> <th scope="col">Mes</th> <th scope="col">Vitamina A</th> <th scope="col">Vitamina B</th> <th scope="col">Vitamina C</th> </tr> </thead> <tfoot> <tr> <td scope="row">Todo</td> <td>32.8</td> <td>104.2</td> <td>21.0</td> </tr> </tfoot> <tbody> <tr> <td scope="row">Enero</td> <td>12.8</td>

<td>42.6</td> <td>5.2</td> </tr> <tr> <td scope="row">Febrero</td> <td>10.5</td> <td>30.1</td> <td>10.4</td> </tr> <tr> <td scope="row">Marzo</td> <td>9.5</td> <td>31.5</td> <td>5.4</td> </tr> </tbody> </table> Vista Mes Todo Enero Vitamina A Vitamina B Vitamina C 32.8 12.8 104.2 42.6 30.1 31.5 21.0 5.2 10.4 5.4

Febrero 10.5 Marzo 9.5

Nota que el pie es ubicado en el cdigo, preferentemente justo debajo del encabezado al comienzo de la tabla. Esto se debe a que en tablas muy largas, que pueden tomar algn tiempo en descargarse completamente (hasta minutos), los navegadores pueden decidir mostrar el pie an antes de que todo el cuerpo hay sido recibido. Una sola tabla puede tener ms de un cuerpo. Esto permite a los autores dividir las filas en grupos. Por ejemplo, en la tabla de arriba (si abarcase todo el ao) los meses podran ser agrupados en cuatrimestres, generando as tres cuerpos. Agrupacin vertical La otra forma de agrupar celdas en una tabla es mediante la agrupacin vertical. Esto no solo es til para agrupar columnas temticamente, sino tambin para asignar atributos a columas enteras de una tabla. La agrupacin puede lograrse usando dos tags: el tag HTML colgroup y el tag HTML col. Estos dos tags pueden ser usados por separado o conjuntamente.

En el ejemplo siguiente insertaremos una tabla muy simple que definir atributos a la columna usando el tag HTML col: Cdigo <table> <col style="width: 200px" /> <col style="width: 100px" span="3" /> <tr> <th scope="row">Enero</th> <td>12.8</td> <td>42.6</td> <td>5.2</td> </tr> <tr> <th scope="row">Febrero</th> <td>10.5</td> <td>30.1</td> <td>10.4</td> </tr> <tr> <th scope="row">Marzo</th> <td>9.5</td> <td>31.5</td> <td>5.4</td> </tr> </table>

Vista Enero 12.8 42.6 5.2 Febrero 10.5 30.1 10.4 Marzo 9.5 31.5 5.4

Nota el cierre del tag utilizado (" />"), con el fin de hacer el cdigo compatible con XHTML. Para aprender ms acerca de los atributos utilizados en este ejemplo, visita la pgina de referencia del tag HTML col. En el ejemplo anterior, atributos comunes han sido definidos para todas las celdas de las columnas afectadas de una sola vez, pero no se pueden definir grupos de columnas semnticamente sin usar el tag HTML colgroup: Cdigo <table> <colgroup style="width: 150px" /> <colgroup style="width: 50px" span="3" /> <colgroup style="width: 100px" /> <tr> <th scope="row">Enero</th>

<td>12.8</td> <td>42.6</td> <td>5.2</td> <td>Incompleto</td> </tr> <tr> <th scope="row">Febrero</th> <td>10.5</td> <td>30.1</td> <td>10.4</td> <td>Incompleto</td> </tr> <tr> <th scope="row">Marzo</th> <td>9.5</td> <td>31.5</td> <td>5.4</td> <td>Completo</td> </tr> </table> Vista Enero 12.8 42.6 5.2 Incompleto

Febrero 10.5 30.1 10.4 Incompleto Marzo 9.5 31.5 5.4 Completo

Ahora en este ejemplo tenemos tres verdaderos, semnticamente hablando, grupos de columnas con los atributos para todas las celdas del grupo correctamente establecidos. Entonces, para qu sirve el tag HTML col entonces? Existen algunos casos en que los autores necesitan establecer grupos de columnas (semnticamente) pero aplicando diferentes atributos a las columnas en un mismo grupo de columnas. Para resolver este problema, pueden utilizarse ambos tags anidados: Cdigo <table> <colgroup style="width: 150px" /> <colgroup> <col style="width: 50px" span="2" /> <col style="width: 75px" /> </colgroup> <colgroup style="width: 100px" /> <tr> <th scope="row">Enero</th> <td>12.8</td> <td>42.6</td> <td>5.2</td> <td>Incompleto</td>

</tr> <tr> <th scope="row">Febrero</th> <td>10.5</td> <td>30.1</td> <td>10.4</td> <td>Incompleto</td> </tr> <tr> <th scope="row">Marzo</th> <td>9.5</td> <td>31.5</td> <td>5.4</td> <td>Completo</td> </tr> </table> Vista Enero 12.8 42.6 5.2 Incompleto

Febrero 10.5 30.1 10.4 Incompleto Marzo 9.5 31.5 5.4 Completo

De esta forma an estamos definiendo tres grupos de columnas pero a la vez damos a las columnas atributos especficos sin importar si pertenecen al mismo grupo de columnas o no.

El ttulo de una tabla El ttulo de una tabla, definido mediante el elemento HTML caption, debera describir breve y precisamente el contenido y la naturaleza de la tabla y es habitualmente representado en algn lugar cercano a la tabla (su posicin puede ser establecida usando hojas de estilo). Recuerda que el elemento HTML caption solo est permitido si va justo despus del tag de apertura de la tabla. Cdigo <table> <caption>Ttulo de la tabla</caption> <tr> <td>Contenido 1</td> <td>Contenido 2</td> <td>Contenido 3</td> </tr> <tr> <td>Contenido 4</td> <td>Contenido 5</td> <td>Contenido 6</td> </tr> </table> Vista

Ttulo de la tabla Contenido 1 Contenido 2 Contenido 3 Contenido 4 Contenido 5 Contenido 6 Sumarios Tambin puedes agregar unformacin acerca del contenido y la naturaleza de la tabla usando el atributo "summary", el cual debe ser definido en el tag HTML table. El valor de este atributo est pensado para describir la tabla en una forma ms larga que el ttulo, ayudando a mejor el entendimiento del contenido de la misma. Cdigo <table summary="Esta tabla muestra la temperatura media en los meses de Junio, Julio y Agosto en la ciudad de Londres"> <caption>Grfico de temperatura de Londres</caption> <tr> <th scope="col">Junio</th> <th scope="col">Julio</th> <th scope="col">Agosto</th> </tr>

<tr> <td>60F</td> <td>65F</td> <td>62F</td> </tr> </table> Vista Grfico de temperatura de Londres Junio 60F Julio 65F Agosto 62F

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 exlploraremos 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:
Por favor, in

El valos pasado al agente procesador ser el texto ingresado por el usiario, 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

Ingresa tus comentarios:

...Tus comentarios aqu...

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:
Entrada de contrasea

Elije tantas opciones como quieras, como con casillas de verificacin (manteniendo presionada la tecla "Ctrl"):
Entrada de lnea

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). Elementos de entrada Botones Un botn es un dispositivo primordialmente diseado para realizar una accin con el formulario que lo contenga. De echo, existen dos tipos bsicos de botones: para enviar el formulario y para reestablecerlo (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 lenguage 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
Enviar este formulario

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 de

Acepto las relgas

Reestablecer todos los campos a su valor predeterminado

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> Vista El tag HTML button permite contenido. 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: 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). 5.- IMAGENES < IMG SRC=url> Este tag se usa para insertar una imagen jpg o gif en un documento o pagina sus principales atributos son: SRC=url - direccion donde esta almacenada la imagen, puede ser relativa ../folder/CONEJO.JPG o puede ser absoluta http://programacionfacil.com/conejo.jpg ALT=mensaje Propiedad muy util y siempre debe utilizarse, es decir si algun browser no puede desplegar la imagen, en su lugar el browser desplegara el mensaje contenido en este atributo. ALIGN=[left,right,top,middle,bottom] - Acomoda la imagen con respecto al texto que la rodea. Informacin laboral Direccin:

HEIGHT=n pixels - altura en pixels de la imagen WIDTH=n pixels - ancho en pixels de la imagen Ejemplo < IMG SRC=conejo.jpg ALT=Bienvenidos a Conejilandia Height=110 Width=100> Despliegue:

* Observar que aqui el conejito no se duplico, solo se multiplican cuando estan encerrados en un <BODY> tag. MAPEO DE IMAGENES < MAP>..</MAP>

Se usan para construir IMAGENES que contienen HOT SPOTS donde el click del raton activa una direccion web absoluta por ejemplo http://misitio.com o relativa ejemplo pagina20.html. Este tag en forma completa debe incluir tres partes: A.- El tag <MAP con atributo NAME=nombredelmapa> B.- Tags <AREA> que creara las zonas o figuras geometricas dentro de la imagen * sus atributos son: 1.- SHAPE=[circle,poly,default] 1.1.- DEFAULT - toda la imagen 1.2.-CIRCLE - un circulo con COORDS=x,y,radio ejemplo COORDS=0,0,100, un circulo con centro 0,0 y radio de 100 pixels. 1.3.- RECT - un rectangulo despues usar atributo COORDS=xizquierda,yarriba,xderecha,yabajo ejemplo coords=0,0,10,10 crea un rectangulo de 10 x 10 pixels empezando en la esquina izquierda de la imagen. 1.4.- POLY - construye una figura geometrica cualquiera agregar COORDS=puntoxy,puntoxy,puntoxy.. ejemplo

Coords=10,20,30,40,50,60 contruye un triangulo (hay tres pares de puntos) con coordenadas (10,20) (30,40) (50,60) es claro que si quieren un decagono deberan poner 20 puntos o 10 pares xy dentro de coords. * Una imagen cualesquiera puede tener varias <AREA>'s solo revisar que las figuras geometricas no se traslapen entre ellas. 2.- HREF=url - aqui se pone la direccion web que se quiere activar al hacer click el raton dentro del area definida por la figura geometrica construida, el url puede ser del tipo http://sitio.com o puede ser relativo pagina5.htm 3.- ALT=mensaje - mensaje que se despliega si el browser no puede desplegar la imagen 4.- Ya creadas las AREAS apropiadas cerrar el tag </MAP> y despues usar; C.- <IMG SRC=imagen.jpg o gif WIDTH=npixels HEIGTH=npixels USEMAP=#nombremapa Ejemplo < map name=miconejo>

< area shape=circle coords=0,0,50 href=http://programacionfacil.com> <area shape=rect coords=50,50,100,100 href=http://mitecnologico.com> < /map> < img src=conejo.jpg Height=110 Width=100 usemap=#miconejo> Desplegar:

Desplegar click en el circulo:

Desplegar click en el rectangulo:

Es importante observar que se pueden construir sitios completos usando puras interfases graficas visuales, por ejemplo un camion muestra asientos vacios, al realizar un clik en el asiento lleno podemos ver la informacion del pasajero o al clik en asiento vacio se

puede llamar al formulario de inserccion de registro en una base de datos. Aqui el reto seria cuanto de un sitio web a construir se podra manejar con puros mapas de imagenes, recordar que para un usuario normal es mas entendible una imagen que cien palabras. Explicamos detalladamente el proceso para crear mapas de imgenes, osea, imgenes que tienes varios enlaces asociados en distintas reas. Por Rubn Alvarez En captulos anteriores hemos podido adentrarnos en el elemento bsico de navegacin del web: El enlace hipertexto. Hemos visto que estos enlaces son palabras, textos o imgenes que, al pinchar sobre ellos, nos envan a otras pginas o zonas. Los mapas de imgenes es un nuevo planteamiento de navegacin que incorpora una serie de enlaces dentro de una misma imagen. Estos enlaces son definidos por figuras geomtricas y funcionan exactamente del mismo modo que los otros enlaces. Podis ver el funcionamiento de uno en este enlace. En un principio, estos mapas no eran directamente reconocidos por los navegadores y recurran a tecnologas de lado del servidor para ser visualizados.

Hoy en da pueden ser implementados por medio de cdigo HTML tal y como veremos en este capitulo. Podemos utilizar estos mapas, por ejemplo, en portadas donde damos a conocer cada una de las secciones del sitio por medio de una imagen. Tambin puede ser muy prctico en mapas geogrficos donde cada ciudad, provincia o punto cualquiera representa un enlace a una pgina. En cualquier caso, el uso de estos mapas ha de estar sistemticamente acompaado de un texto explicativo que d a conocer al usuario la posibilidad de hacer clic sobre los distintos puntos de la imagen. Frases como "Haz clic sobre tal icono para acceder a tal informacin" resultan muy indicativas a la hora de hacer intuitiva la navegacin por los mapas de imgenes. Por otro lado, no esta de ms introducir esa misma explicacin en el atributo alt de la imagen. As pues, un mapa de imagen esta compuesto de dos partes:

La imagen propiamente dicha que estar situada como de costumbre dentro de la etiqueta <body> de nuestro documento HTML. Un cdigo, situado en el interior de la etiqueta <map>, que delimitara por medio de lneas geomtricas imaginarias cada una de las reas de los enlaces presentados en la imagen.

Las lneas geomtricas que delimitan los enlaces, es decir, las

reas de los enlaces, han de ser definidas por medio de coordenadas. Cada imagen es definida por unas dimensiones de ancho (X) y alto (Y) y cada punto de la imagen puede ser definido por tanto diciendo a que altura (x) y anchura (y) nos encontramos. De este modo, la esquina superior izquierda corresponde a la posicin 0,0 y la esquina inferior derecha corresponde a las coordenadas X,Y. Si deseamos saber qu coordenadas corresponden a un punto concreto de nuestra imagen, lo mejor es utilizar un programa de diseo grafico como Photoshop o Paint Shop Pro. La mejor forma de explicar el funcionamiento de este tipo de mapas es a partir de un ejemplo prctico. Supongamos que tenemos una imagen con un mapa como esta:

Pulsa en los crculos para acceder a las secciones!

Dentro de ella queremos introducir un enlace a cada uno de los elementos que la componen. Para ello, definiremos nuestros enlaces como zonas circulares de pequeo tamao que sern distribuidas a lo largo y ancho de la imagen. Veamos a continuacin el cdigo que utilizaremos: < table border=0 width=450><tr><td align="center">

< map name="mapa1"> < area alt="Pulsa para ver la pgina de mis amigos" shape="CIRCLE" coords="44,36,29" href="#"> < area alt="Pulsa para ver mi novia" shape="CIRCLE" coords="140,35,31" href="#"> < area alt="Pulsa para conocer a mi Familia" shape="circle" coords="239,37,30" href="#"> < area alt="Pulsa para conocer mi trabajo" shape="CIRCLE" coords="336,36,31" href="#"> < /map> < img src="images/html/mapa1.gif" width="380" height="72" alt="Mapa de imgenes. Pulsa en cada una de los crculos." border="0" usemap="#mapa1"> < br> Pulsa en los crculos para acceder a las secciones! < /td></tr></table> Nota: Los href de las reas van a # Este es un ejemplo parcial de utilizacin de los mapas, faltara colocar los href con valores reales y no con la #. Cada uno de los enlaces de las reas -atributo href de la etiqueta <area>- deberan llevar a una pgina web. El ejemplo quedara completo si creasemos todas las pginas donde enlazar las reas y colocasemos los href dirigidos hacia dichas pginas. Como no hemos hecho las pginas "destino" hemos colocado enlaces que no llevan a ningn sitio, que, como puedes ver, se indica con el caracter "#". Podis observar, tal y como hemos explicado antes, que nuestro mapa consta de dos partes principales: la

imagen y la etiqueta <map> que define las reas de cada enlace. Cada rea se indica con una etiqueta <area>, que tiene los siguientes atributos: alt Para indicar un texto que se mostrar cuando situemos el ratn en el rea. shape Indica el tipo de rea. coords Las coordenadas que definen el rea. Sern un grupo de valores numricos distintos dependiendo del tipo de rea (shape) que estemos definiendo. href Para indicar el destino del enlace correspondiente al rea. En este caso hemos utilizado unas reas circulares (shape="CIRCLE"), que se definen indicando el centro del crculo -una coordenada (X,Y) y el radio, que es un nmero entero que se corresponde con el nmero de pixels desde el centro hasta el borde del crculo. Tipos de reas: shape distintas Existen tres tipos de reas distintas, suficientes para hacer casi cualquier tipo de figura. En el

dibujo que acompaa estas lneas se puede ver una representacin de las reas, que detallamos a continuacin. shape="RECT" Crea un rea rectangular. Para definirla se utilizan las coordenadas de los puntos de la esquina superior izquierda y la esquina inferior derecha. Tal como estn nombradas dichas coordenadas en nuestro dibujo, el rea tendra la siguiente etiqueta: < area shape="RECT" coords="X1,Y1,X2,Y2" href="#"> shape="CIRCLE" Crea un rea circular, que se indica con la coordenada del centro del crculo y el radio. A la vista de nuestro dibujo, la etiqueta de un rea circular tendra esta forma: < area shape="CIRCLE" coords="X1,Y1,R" href="#"> shape="POLY" Este tipo de rea, poligonal, es la ms compleja de todas. Un polgono queda definido indicando todos sus puntos, pero atencin, los tenemos que indicar en orden, siguiendo el camino marcado por el permetro del polgono. A la vista del dibujo y los nombres que hemos dado a los puntos del polgono, la etiqueta <area> quedara de esta forma. < area shape="POLY" coords=" X1,Y1, X2,Y2, X3,Y3, X4,Y4" href="#">

Mapas de imgenes: grficos sensibles <map> <area> Puede hacer que parte de la imagen sea un enlace a otra pgina, o a un punto de la propia pgina, es decir, puede hacer un mapa sobre la imagen de manera que secciones de la imagen sean enlaces. Las etiquetas empleadas para esto son: 1) La etiqueta <map>.....</map>. Las cuales engloban el mapa de imgenes. Atributos de la etiqueta <map>: Name="nombre del mapa". Atributo opcional al cual podemos poner entre las comillas el nombre del mapa o un texto explicativo. 2) La etiqueta <area>. Define las reas que vamos a poder activar en esa imagen. Atributos de la etiqueta <area>: shape="rect / poly / circle". estableceremos el tipo de rea a definir, rectgulo, poligono o crculo respectivamente.

Coords= "x1,y1,x2,y2,," entre comillas indicamos los pares de coordenadas de cada punto(x,y) del rea a mapear. Las

reas rectangulares se denotan las coordenadas de la esquina superior izquierda y las de la esquina inferior derecha. Las reas poligonales especificaremos las coordenadas de todos los vrtices del rea. En las circulares indicaremos las coordenadas del centro del crculo y el valor del radio.

Href= "direccin pgina". La direccin de la pgina a la que accederemos si pulsamos en el mapa de imgenes. usemap="#nombre del mapa" Deberemos de usar este atributo para que la imagen sea tratada como un mapa de imgenes. Ejemplo (1): <img src="img/simpson_hit.jpg" width="200" heitgh="250" border="0" alt="Hoomer Simpson" usemap="#fire"> <map name="fire"> <area shape="circle" coords="55,110,40" href="#" > </map>

Visualizacin:

Ejemplo (2): <img src="img/simpson_2.jpg" width="400" heitgh="300" border="0" alt="The Simpson" usemap="#the_simpson"> <map name="the_simpson"> <area shape="rect" coords="95,187,144,221" href="#" > <area shape="rect" coords="212,219,254,269" href="#" > <area shape="rect" coords="320,252,368,287" href="#" > </map>

Visualizacin: