MANUAL BÁSICO DE HTML

INTRODUCCIÓN

HTML es el lenguaje con el que se escriben las páginas web. Las páginas web pueden ser vistas por el usuario mediante un tipo de aplicación llamada navegador. Podemos decir por lo tanto que el HTML es el lenguaje usado por los navegadores para mostrar las páginas webs al usuario, siendo hoy en día la interface más extendida en la red.

Este lenguaje nos permite aglutinar textos, sonidos e imágenes y combinarlos a nuestro gusto. Además, y es aquí donde reside su ventaja con respecto a libros o revistas, el HTML nos permite la introducción de referencias a otras páginas por medio de los enlaces hipertexto.

El HTML se creó en un principio con objetivos divulgativos. No se pensó que la web llegara a ser un área de ocio con carácter multimedia, de modo que, el HTML se creó sin dar respuesta a todos los posibles usos que se le iba a dar y a todos los colectivos de gente que lo utilizarían en un futuro. Sin embargo, pese a esta deficiente planificación, sí que se han ido incorporando modificaciones con el tiempo, estos son los estándares del HTML. Numerosos estándares se han presentado ya. El HTML 4.01 es el último estándar a septiembre de 2001.

Esta evolución tan anárquica del HTML ha supuesto toda una seria de inconvenientes y deficiencias que han debido ser superados con la introducción de otras tecnologías accesorias capaces de organizar, optimizar y automatizar el funcionamiento de las webs. Ejemplos que pueden sonaros son las CSS, JavaScript u otros. Veremos más adelante en qué consisten algunas de ellas.

Otros de los problemas que han acompañado al HTML es la diversidad de navegadores presentes en el mercado los cuales no son capaces de interpretar un mismo código de una manera unificada. Esto obliga al web máster a, una vez creada su página, comprobar que esta puede ser leída satisfactoriamente por todos los navegadores, o al menos, los más utilizados.

Además del navegador necesario para ver los resultados de nuestro trabajo, necesitamos evidentemente otra herramienta capaz de crear la página en sí. Un archivo HTML (una página) no es más que un texto. Es por ello que para programar en HTML necesitamos un editor de textos.

Es recomendable usar un editor de textos sencillo. Hay que tener cuidado con algunos editores más complejos como Wordpad, Microsoft Word u Open Office Write, pues colocan su propio código especial al guardar las páginas y HTML es únicamente texto plano, con lo que podremos tener problemas.

Existen otro tipo de editores específicos para la creación de páginas web los cuales ofrecen muchas facilidades que nos permiten aumentar nuestra productividad. No obstante, es aconsejable en un principio utilizar una herramienta lo más sencilla posible para poder prestar la máxima atención a nuestro código y familiarizarnos lo antes posible con él. Siempre tendremos tiempo más delante de pasarnos a editores más versátiles con la consiguiente ganancia de tiempo.

Así pues, una página es un archivo donde está contenido el código HTML en forma de texto. Estos archivos tienen extensión .html o .html (es indiferente cuál utilizar). De modo que cuando programemos en HTML lo haremos con un editor de textos y guardaremos nuestros trabajos con extensión .html, por ejemplo mi página.html

ESTRUCTURA BÁSICA HTML

HTML se basa en principalmente en etiquetas, que son como instrucciones para dar formato a las diferentes partes de una página web.

Por ejemplo, mediante el uso de las etiquetas HTML puedes subrayar textos, ponerlos en negrita, establecer encabezados, estructurar el texto en guiones, en párrafos, añadir imágenes y vínculos a otras páginas, etc. De ahí que el conocimiento de estas etiquetas sea importante para hacer páginas web, mejor dicho imprescindible.

Etiquetas básicas de HTML

§ <html>: indica el comienzo del documento HTML.

§ <head>: indica que empieza la cabecera de la página. En ella se suele poner el título (<title>) de la web, una descripción y otras informaciones relacionadas con el contenido de la página.

§ <body>: es el cuerpo de la página, donde va lo que se ve en el navegador al cargar una web. En el body van los textos, las imágenes y todos los contenidos de la web.

§ <h1>, <h2>, etc.: son los títulos o encabezados. Se utilizan para establecer determinados textos de la página como titulares, suelen tener un tamaño de fuente mayor para diferenciarlos del resto del texto. Son importantes en el posicionamiento en buscadores.

§ <a>: define los enlaces.

§ <table>: es una tabla, y dentro de esta tenemos filas <tr> y celdas <td>.

§ <p>: el texto dentro de esta etiqueta forma un párrafo.

§ <img>: imágenes.

§ <ul>: los textos dentro de esta etiqueta se estructuran en listas. Mediante el uso de <li> definimos cada guión dentro de la lista, y usando <ol> en lugar de <ul> tendremos listas ordenadas.

§ <b> y <strong>: se utilizan para resaltar el texto.

§ <u>: texto subrayado.

§ <i> y <em>: texto en cursiva.

Ejemplo de página básica

<html >

<head><title>Título de la página</title></head>

<body>

<h1>Encabezado de la página</h1>

<h2>Encabezado de menor tamaño</h2>

<p>Este es el texto de un párrafo. </p>

<p>Este es el texto de otro párrafo. Dentro de este párrafo,

Pueden ir palabras <strong>en negrita</strong>, <em>en cursiva</em> o lo

Que quieras. </p>

<p>También podemos poner listas como la siguiente:</p>

<ul>

<li>Guión número uno. </li>

<li>Guión número dos. </li>

<li>Guión número tres. </li>

</ul>

</body>

</html>

Normas elementales en HTML

Siempre que sea posible, incluye las etiquetas de cierre, incluso si no son obligatorias, ya que esto hace que sea más fácil seguir tu propio marcado y que sea más rápido de leer.

Además, en XHTML todas las etiquetas deben cerrarse, por lo que te será más fácil si cambias de uno a otro.

Ejemplo:

<html>

...

</html>

Con frecuencia verás diseños HTML con código indentado como el que se muestra a continuación, es decir, código tabulado con sangrías, de forma que los bloque de texto se mueven hacia la derecha insertando espacios para separarlos del texto adyacente que forme otras estructuras diferentes.

Esto hace que sea más fácil leerlo y comprobar qué etiquetas de cierre se refieren a qué etiquetas. Por ejemplo, esto es claramente erróneo:

<p>

<strong>

texto en negrita

<em>texto en negrita y cursiva

texto sólo en cursiva

</em>

</p>

Sin embargo, esto es válido:

<p>

<strong>

texto en negrita

<em>

texto en negrita y cursiva

</em>

</strong>

<em>

texto solo en cursiva

</em>

</p>

ELEMENTOS Y ETIQUETAS

HTML es un lenguaje de marcas compuesto por un conjunto de elementos que son la base de su estructura. Estos elementos conforman una caja de herramientas que los autores pueden utilizar para dar forma a sus documentos. Por ejemplo, puedes encontrar elementos que insertan párrafos, videos u otros documentos, o elementos que marcan citas, texto importante o los títulos de libros, películas, trabajos y otras obras.

El trabajo llevado a cabo por los navegadores es vital en este esquema, siendo éstos los responsables del procesamiento y transformación de los elementos en documentos representados. Con respecto a esto, los autores deben considerar que algunos elementos no tienen una representación tangible: su propósito es el de proveer significados semánticos a la porción de documento que afectan. A veces, la información provista por estos elementos semánticos, es usada por diferentes tipos de agentes de usuario (navegadores, motores de búsqueda, procesadores de documentos, etc.) para extraer información adicional acerca del documento y sus partes.

Un elemento HTML está normalmente compuesto por dos etiquetas: la etiqueta de apertura y la etiqueta de cierre. Una etiqueta de apertura se compone del nombre del elemento encerrado por los símbolos menor-que "<" y mayor-que ">". La etiqueta de cierre se construye de igual manera que la de apertura pero, en este caso, el nombre del elemento es precedido por una barra diagonal ("/"). En el siguiente ejemplo, verás las etiquetas de apertura y cierre para el elemento <b>.

<b>Texto importante</b>

Como puedes ver, allí están las etiquetas de apertura ("<b>") y de cierre ("</b>"). Ahora, el texto que ves en el medio, "Texto importante", es conocido como el contenido del elemento

Además de etiquetas y contenido, un elemento puede tener atributos y eventos. Mientras que los atributos definen valores o propiedades para ser utilizadas por los navegadores en el procesamiento del documento, los eventos pueden ser empleados para especificar comportamientos o acciones a ser desempeñadas cuando ciertas condiciones se cumplen, como por ejemplo, cuando el usuario hace un click sobre el elemento.

Atributos y eventos comparten una misma sintaxis: se deben insertar dentro de la etiqueta de apertura como una lista de ítems separados por espacios, luego del nombre del elemento y precedida por un espacio. Cada uno de estos ítems se compone de un nombre (para el atributo o evento), el signo igual ("=") y el valor o función (a veces opcionalmente) encerrado entre comillas. El siguiente ejemplo muestra un elemento <b> con un atributo (style) y un evento (onclick).

<b style="color: red" onclick="changeColor(this.parentNode)">Texto importante</b>

ETIQUETA MAS UTILIZADAS

<title> . Estas etiquetas encierran el título de la página Web, es de especial importancia pues ayudan a los buscadores a clasificar nuestros contenidos. El texto que encierra estas etiquetas aparece en la parte superior del explorador. El <title> al igual que todas las etiquetas HTML se cierra colocando un “/” al inicio, de este modo: </title>.ç

Ejemplo:
<title>comohacermiweb.net: etiquetas más usadas en el HTML</title>

<a> - esta etiqueta hace posible crear todos los enlaces de las páginas web.
href - esta etiqueta se utiliza dentro de la etiqueta <a> y representa la URL del enlace.
Ejemplo

Como hacer una web
<a>
El código anterior crea un enlace a la URL indicada en el texto encerrado por las etiquetas.
<img> - Esta etiqueta muestra una imagen, el atributo src indica la dirección de la misma. El atributo alt se utiliza para proporcionar una breve descripción de la imagen mostrada, esto es muy útil para los usuarios con dificultad para ver y además ayuda a posicionar las imágenes en los buscadores de imágenes.
Ejemplo
<img alt='Este es el icono de mi blog' src='http://icomohacermiwenb.net/img/icono.png'/>

<p> - Indica que el texto encerrado por la etiqueta <p> es un párrafo. Generalmente entre cada párrafo se crea por defecto un espacio, por lo que muchos lo usan como un espaciador
<h1>... <h6> - Proporciona la estructura de títulos de su texto. <h1> es el más importante mientras que <h6> es el de menor importancia.
<ol> - se usa para introducir una lista ordenada (numerada).
<ul> - usa para introducir una lista no ordenada (con viñetas).
<li> - un elemento que pertenece a una lista

<html> -sirve de para indicar que un documento está escrito en HTML, contiene el documento completo.
<head> - Encierra la sección del documento HTML en donde se encuentran datos de la página, como el título, enlaces a hojas de estilo, versión etc.
<body> encierra la sección de HTML que contiene el contenido
<link rel> indica que un archivo externo está relacionado con el documento HTML actual y se utiliza comúnmente para vincular una hoja de estilos externa CSS para dar formato al contenido del documento
<div> - una división o una sección de una página. Se utiliza como un medio adicional para proporcionar una estructura a HTML.
Class - un atributo utilizado en <div> utiliza para dar formato HTML cuando se utilizan hojas de estilo. Cuando la clase se utiliza, significa que este tipo de estilo puede repetirse muchas veces en el documento
id - otro atributo que se encuentran en <div> y es relacionar la etiqueta HTML con un elemento de una hoja de estilo. Los id solo pueden usarce una vez.
<script> denota que el texto dentro de esta etiqueta es un script que añadirá capacidades dinámicas e interactivas a la página
<form> - indica que la zona delimitada por esta etiqueta es un formulario HTML que puede aceptar la entrada del usuario
<input> utilizados en el interior de un formulario HTML y se utiliza para aceptar la entrada del usuario.
type - utilizados en el interior de <input> acepta la entrada de datos a través de cuadros de texto, botones de radio o cuadros de selección. También se utiliza para mostrar un botón de envío si el tipo es igual a "send"
<!->- Etiqueta de comentario. Se utiliza para añadir texto que no se mostrará en el navegador a un documento, es útil para documentar el diseño de la página.

ATRIBUTOS

Qué es un atributo

Cualquier etiqueta XHTML puede contener uno o más atributos, separados por espacios, que permiten especificar la etiqueta. El código fuente tiene el siguiente aspecto:

En el XHTML los atributos tienen que estar siempre definidos (mediante el signo igual "=") y el valor del atributo tiene que estar entre comillas dobles o simples.

Existen una serie de atributos comunes a todas las etiquetas (salvo la etiqueta <html>) y algunas etiquetas tienen unos atributos específicos. En esta lección se comentan los atributos comunes; los atributos específicos se comentan en las lecciones dedicadas a las etiquetas correspondientes (imágenes, tablas, etc.).

Atributos comunes

Comentar los atributos dir, lang, y xml:space

Atributo class

El atributo class permite definir clases de elementos.

Las hojas de estilo pueden hacer referencia a los elementos con atributo class

Atributo id

El atributo id permite identificar de forma unívoca un elemento en un documento. Por ello, en una página web no puede haber dos elementos con el mismo valor en el atributo id. Además, un elemento sólo puede tener un atributo id, es decir, el atributo id no puede contener espacios en blanco.

En HTML 4 el valor de un atributo id tenía que empezar con una letra (mayúscula o minúscula, caracteres latinos) y puede contener dígitos, guiones medios (-), guiones bajos (_), comas y puntos. Si el nombre contenía puntos, a continuación del punto tenía que haber una letra. Además, algunos elementos no podían tener atributo id (<base>, <head>, <html>, <meta>, <param>, <script>, <style> y <title>).

En HTML 5 el atributo id puede empezar y contener cualquier carácter (salvo espacios en blanco). Además, todos los elementos pueden tener el atributo id.

Atributo style

El atributo style permite definir propiedades de estilo a un elemento determinado.

<p style="color: red">Esto es un párrafo &lt; p&gt;.</p>

<p>Esto es otro párrafo <span style="color: red;">&lt;p&gt;</span>.</p>

En estos apuntes se desaconseja el uso de este atributo, puesto que uno de los principios del diseño de páginas web mediante hojas de estilo es precisamente concentrar todo lo relacionado con el formato en las hojas de estilo.

Atributo title

El atributo title contiene el texto que se muestra en forma de "tip" (cuadrito amarillo que aparece cuando se sitúa el ratón encima del elemento).

En el ejemplo siguiente se muestra un "tip" cuando se sitúa el ratón sobre el primer párrafo o sobre el término "<p>" del segundo párrafo.

<p title="Esto es un &quot;tip&quot;">Esto es un párrafo &lt;p&gt;.</p>

<p>Esto es otro párrafo <span title="Esto es un &quot;ip&quot;">&lt;p&gt;</span>.</p>

Eventos intrínsecos

Los eventos intrínsecos son atributos también comunes a todos los elementos que permiten asociar scripts a eventos relacionados con elementos de la página web (por ejemplo, que se ejecute un script cuando se hace clic en un elemento).

Algunos elementos son comunes a todos los elementos, pero otros son específicos de determinados elementos.

Eventos de documento

Atributo	Descripción
onload	Se ejecuta cuando se carga el documento.
onunload	Se ejecuta cuando se abandona el documento.

Eventos de formulario

Atributo	Descripción
onblur	Se ejecuta cuando un elemento pierde el foco.
onchange	Se ejecuta cuando un elemento cambia.
onfocus	Se ejecuta cuando un elemento gana el foco.
onreset	Se ejecuta cuando el formulario se reinicia.
onselect	Se ejecuta cuando un elemento se selecciona.
onsubmit	Se ejecuta cuando el formulario se envía.

Eventos de imagen

Atributo	Descripción
onabort	Se ejecuta cuando se interrumpe la carga de la imagen.

Eventos de teclado

Atributo	Descripción
onkeydown	Se ejecuta cuando se pulsa una tecla.
onkeypress	Se ejecuta cuando se pulsa y despulsa una tecla.
onkeyup	Se ejecuta cuando se despulsa una tecla.

Eventos de ratón

Atributo	Descripción
onclick	Se ejecuta cuando se hace clic.
ondblclick	Se ejecuta cuando se hace doble clic.
onmousedown	Se ejecuta cuando se pulsa un botón del ratón.
onmousemove	Se ejecuta cuando se mueve el ratón.
onmouseout	Se ejecuta cuando el cursor deja de situarse sobre un elemento.
onmouseover	Se ejecuta cuando el cursor se sitúa sobre un elemento.
onmouseup	Se ejecuta cuando se despulsa un botón del ratón.

TABLAS

Una tabla no es otra cosa más que un medio de organizar datos en filas y columnas. Este concepto ha estado presente en nuestra sociedad por un largo período de tiempo y ha sido adoptado por HTML en sus etapas iniciales, como una forma de transmitir información que, de otro modo, no sería comprendida tan fácilmente.

En documentos HTML una tabla puede ser considerada, resumidamente, como un grupo de filas donde cada una contiene a un grupo de celdas. Esto es conceptualmente distinto a un grupo de columnas que contiene a un grupo de filas, y esta diferencia tendrá un impacto en la composición y comportamiento de la tabla.

Como muchas otras estructuras de HTML, las tablas son construidas utilizando elementos. En particular, una tabla básica puede ser declarada usando tres elementos, a saber, table (el contenedor principal), tr(representando a las filas contenedoras de las celdas) y td (representando a las celdas). Dejémoslo más claro con un ejemplo:

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

Celda 1	Celda 2	Celda 3
Celda 4	Celda 5	Celda 6

Ten en cuenta que a esta tabla se le han aplicado estilos mediante CSS para mejorar su comprensión y legibilidad. No se deberían esperar estos resultados en tablas sin atributos presentacionales asignados.

Puedes ver claramente en el ejemplo anterior, el concepto de filas conteniendo columnas del que hablamos previamente. Aquí se hace evidente como las celdas, que han sido numeradas de acuerdo a su aparición en el código, siguen una secuencia en la representación que va de izquierda a derecha, una fila por vez. Esto tendrá implicaciones futuras, especialmente cuando se trate el tema de unificación de celdas y agrupamiento.

CELDAS DE ENCABEZADO

Ahora que ya hemos tratado la estructura básica de una tabla, es hora de comenzar a crear tablas más útiles.

Una celda de encabezado es un tipo especial de celda utilizada para organizar y categorizar otras celdas en la tabla. Dicho esto, es difícil imaginar una tabla donde una celda de encabezado no tenga utilidad. Casi cualquier tabla puede beneficiarse de un grupo de celdas de encabezado bien ubicado.

En el siguiente ejemplo, construiremos una tabla para mostrar información acerca del clima en los próximos días. Aquí, las celdas de encabezado, representadas por el elemento th, son ubicadas en la primera fila de la tabla, encima de las celdas comunes.

<table class="egt">

  <tr>

    <th>Hoy</th>

    <th>Mañana</th>

    <th>Sábado</th>

  </tr>

  <tr>

    <td>Soleado</td>

    <td>Mayormente soleado</td>

    <td>Parcialmente nublado</td>

  </tr>

  <tr>

    <td>19°C</td>

    <td>17°C</td>

    <td>12°C</td>

  </tr>

  <tr>

    <td>E 13 km/h</td>

    <td>E 11 km/h</td>

    <td>S 16 km/h</td>

  </tr>


</table>

Hoy	Mañana	Sábado
Soleado	Mayormente soleado	Parcialmente nublado
19°C	17°C	12°C
E 13 km/h	E 11 km/h	S 16 km/h

Es fácil ver aquí cómo cada celda de encabezado en la tabla, provee información para el resto de las celdas en la columna a la que pertenece. Algunos agentes, como los navegadores de voz, hacen el mismo análisis cuando deben informar al usuario qué celda de encabezado está asociada a una celda en particular. Pero en algunos casos, las ambigüedades necesitan ser evitadas y es por este motivo que HTML provee algunos atributos como scope.

EL ATRIBUTO SCOPE

El atributo scope provee un mecanismo para indicar explícitamente a qué celdas afecta una celda de encabezado. Este atributo solo puede ser declarado en una celda de encabezado y tomar los valores "col", "row", "colgroup" y "rowgroup". Los valores "col" y "row" indican que la celda de encabezado provee información para el resto de las celdas en la columna o fila (respectivamente) en que está presente. Los otros dos valores tendrán sentido más adelante en este tutorial.
En el siguiente ejemplo, la tabla presentada anteriormente ha sido mejorada con más celdas de encabezado, con el fin de aumentar la legibilidad. Aquí, la celda en la esquina superior izquierda de la tabla, proveería información ambigua si el atributo scope no estuviera presente. En otras palabras, afectaría a las celdas en su columna, así como a las celdas en su fila. La presencia del atributo scope ha dejado en claro que las celdas afectadas por este encabezado son aquellas en la misma fila.

<table class="egt">

  <tr>

    <th scope="row">Día</th>

    <th>Hoy</th>

    <th>Mañana</th>

    <th>Sábado</th>

  </tr>

  <tr>

    <th>Condición</th>


    <td>Soleado</td>

<td>Mayormente soleado</td>

    <td>Parcialmente nublado</td>

  </tr>

  <tr>

    <th>Temperatura</th>

    <td>19°C</td>

    <td>17°C</td>

    <td>12°C</td>

  </tr>

  <tr>

    <th>Vientos</th>

    <td>E 13 km/h</td>

    <td>E 11 km/h</td>

    <td>S 16 km/h</td>

  </tr>

</table>

Día	Hoy	Mañana	Sábado
Condición	Soleado	Mayormente soleado	Parcialmente nublado
Temperatura	19°C	17°C	12°C
Vientos	E 13 km/h	E 11 km/h	S 16 km/h

EL TÍTULO

El título de una tabla es otro componente que aporta a la legibilidad. Mientras que algunas tablas, debido a su estructura o simplicidad, pueden sobrevivir sin un título, otras lo necesitarán inexorablemente. En cualquier caso, el título de una tabla puede mejorar pero nunca empeorar.

La idea de un título es la de proveer una descripción concisa acerca de la información presentada en la tabla o su propósito, aportando contexto y haciéndola significativamente más fácil de comprender. En HTML, los títulos de las tablas son insertados mediante el elemento caption, justo después de la etiqueta de apertura de la misma y antes que todos los demás elementos de su estructura. En el ejemplo siguiente hay una tabla en la cual el significado de los datos sería muy difícil de descifrar sin un título apropiado.

<table class="egt">

  <caption>Consumo de combustible de los autos a lo largo de las pruebas de manejo</caption>

  <tr>

    <th scope="col">Car</th>

    <th>Enero</th>

    <th>Febrero</th>

    <th>Marzo</th>

  </tr>

  <tr>

    <th>Chevrolet Camaro</th>

    <td>1254 lts</td>

    <td>1582 lts</td>

    <td>685 lts</td>

  </tr>

  <tr>

    <th>Lamborghini Aventator</th>

    <td>1854 lts</td>

    <td>1978 lts</td>

    <td>1502 lts</td>

  </tr>

</table>

Consumo de combustible de los autos a lo largo de las pruebas de manejo
Car	Enero	Febrero	Marzo
Chevrolet Camaro	1254 lts	1582 lts	685 lts
Lamborghini Aventator	1854 lts	1978 lts	1502 lts

UNIFICACIÓN DE CELDAS

La unificación de celdas es un mecanismo mediante el cual un autor puede combinar o fusionar dos o más celdas adyacentes (td y th) en una tabla. Este efecto puede lograrse utilizando los atributos colspan, para unificación horizontal, y rowspan, para unificación vertical. Estos atributos pueden tomar un valor entero mayor a cero, que representa el número de celdas que participarán en la unificación.

La idea detrás de este mecanismo se explica por sí misma: cuando el atributo colspan es establecido en una celda, indica a los intérpretes que la misma debe abarcar, no solamente su propio espacio, sino también el espacio de un número de celdas contiguas hacia su derecha. Lo mismo sucede para el atributo rowspan pero hacia abajo. Debido a la estructura de las tablas en HTML, La unificación sólo puede hacerse hacia la derecha o hacia abajo. Hacerlo hacia arriba o hacia la izquierda consistiría un intento de abarcar espacio ya utilizado.

En el siguiente ejemplo, una celda de la tabla está ocupando el espacio de tres celdas, como lo indica su atributo colspan. Nota cómo la declaración de las dos celdas a la derecha de esta celda particular han sido omitidas en el código. Esto es algo muy apropiado, ya que el espacio de estas celdas ha sido tomado por la anterior.

<table class="egt">

  <tr>

    <th></th>

    <th>Día 1</th>

    <th>Día 2</th>

    <th>Día 3</th>

    <th>Día 4</th>

  </tr>

  <tr>

    <th>Mike (lastimado)</th>

    <td colspan="3">0 km</td>

    <td>4 km</td>

  </tr>

  <tr>

    <th>Susan</th>

    <td>23 km</td>

    <td>18 km</td>

    <td>19 km</td>

    <td>15 km</td>

  </tr>

</table>

	Día 1	Día 2	Día 3	Día 4
Mike (lastimado)	0 km			4 km
Susan	23 km	18 km	19 km	15 km

Ahora probaremos el atributo rowspan. Aunque la idea de unificación es la misma (excepto por la dirección), la estructura de las tablas en HTML hace que la unificación vertical sea un tanto diferente. En la unificación horizontal todo sucedía en la misma fila (la declaración del atributo colspan y la omisión de las celdas contiguas). En la unificación vertical, el atributo rowspan se establece en la celda de una fila en particular y la omisión de las celdas unificadas se realiza en las filas subsiguientes, una a una. Esto significa que si una celda en la primera fila abarca el espaio de tres celdas verticalmente, las filas dos y tres tendrán una celda faltante cada una. Veámoslo con un ejemplo.

<table class="egt">

  <tr>

    <th></th>

    <th>Básico</th>

    <th>Completo</th>

  </tr>

  <tr>

    <th>Instalación</th>

    <td rowspan="2">Gratis!</td>

    <td>$49.99</td>

  </tr>

  <tr>

    <th>Primer año</th>

    <td>$19.99</td>

  </tr>

  <tr>

    <th>Segundo año</th>

    <td>$9.99</td>

    <td>$29.99</td>

  </tr>

</table>

	Básico	Completo
Instalación	Gratis!	$49.99
Primer año	Gratis!	$19.99
Segundo año	$9.99	$29.99

Si prestas atención verás que la segunda fila del ejemplo anterior, tiene una celda que abarca dos espacios. Por lo tanto, la tercera fila tiene una celda faltante en el código, a saber, su segunda. Esto significa que la segunda celda declarada (en el código) en la tercera fila ("$19.99") representa a la tercera celda de esa fila y no a la segunda.

Cuando se utilizan conjuntamente en una misma tabla, los atributos colspan y rowspan deben ser cuidadosamente declarados de forma que no produzcan celdas superpuestas.

AGRUPACIÓN DE FILAS

HTML provee tres elementos que pueden ayudar a los autores a organizar la información presentada en una tabla. Éstos son: <head>, para agrupar las filas que presentan información de encabezado; <tfoot> para contener a las filas que representan un pie o resumen; y <body>, para representar un bloque de filas que consiste en un cuerpo de datos.

La idea en este método de agrupación es muy directa, así que procedamos con el siguiente ejemplo. La tabla siguiente organiza información de cuentas bancarias para Anthony y Leone. Para este propósito, tiene un bloque de encabezado compuesto por dos filas de celdas de encabezado, un pie que resume la información en la forma de un balance, y un bloque de filas que conforma el cuerpo de la tabla.

<table class="egt">

  <thead>

    <tr>

      <th></th>

      <th colspan="2">Anthony</th>

      <th colspan="2">Lione</th>

    </tr>

    <tr>

      <th scope="col">Fecha</th>

      <th>Entrada</th>

      <th>Salida</th>

      <th>Entrada</th>

      <th>Salida</th>

    </tr>

  </thead>

  <tbody>

    <tr>


      <th>15/07</th>

      <td>$200,00</td>

      <td>$50,00</td>

      <td>$0</td>

      <td>$0</td>

    </tr>

    <tr>

      <th>28/07</th>

      <td>$0,00</td>

      <td>$100,00</td>

      <td>$100,00</td>

      <td>$0,00</td>

    </tr>

    <tr>

      <th>09/08</th>

      <td>$0,00</td>

      <td>$50,00</td>

      <td>$0,00</td>

      <td>$80,00</td>

    </tr>

    <tr>

      <th>22/08</th>

      <td>$40,00</td>

      <td>$0,00</td>

      <td>$0,00</td>

      <td>$110,00</td>

    </tr>

    <tr>

      <th>25/08</th>

      <td>$0,00</td>

      <td>$20,00</td>

      <td>$0,00</td>

      <td>$0,00</td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <th>Balance</th>

      <td colspan="2">$20,00</td>

      <td colspan="2">$10,00</td>

    </tr>

  </tfoot>


</table>

	Anthony		Lione
Fecha	Entrada	Salida	Entrada	Salida
15/07	$200,00	$50,00	$0	$0
28/07	$0,00	$100,00	$100,00	$0,00
09/08	$0,00	$50,00	$0,00	$80,00
22/08	$40,00	$0,00	$0,00	$110,00
25/08	$0,00	$20,00	$0,00	$0,00
Balance	$20,00		$10,00

Los cuerpos de las tablas tienen dos particularidades: primero, que puede haber más de un cuerpo en una misma tabla; y segundo, que el elemento <body> puede ser omitido cuando la tabla tiene solamente un cuerpo. De las tablas que encajan en el segundo caso se dice que tienen un cuerpo implícito.

Cuando una tabla tiene múltiples cuerpos, cada cuerpo debe agrupar filas que están temáticamente relacionadas. En el siguiente ejemplo, la misma tabla presentada anteriormente ha sido reestructurada para contener dos cuerpos, uno por cada mes. Estos grupos temáticos son meramente semánticos, pero les agregaremos algunos estilos solo para hacer que los grupos sean visibles.

Los autores deben evitar agrupar filas con fines estilísticos. Tales prácticas constituyen un mal uso de los elemento <thead>, <tbody> y <tfoot>.

<table class="egt">

  <thead>

    <tr>

      <th></th>

      <th colspan="2">Anthony</th>

      <th colspan="2">Lione</th>

    </tr>

    <tr>

      <th scope="col">Fecha</th>

      <th>Income</th>

      <th>Outcome</th>

      <th>Income</th>

      <th>Outcome</th>

    </tr>

  </thead>

  <tbody style="background: rgba(128, 255, 0, 0.3); border: 1px solid rgba(100, 200, 0, 0.3);">

    <tr>

      <th>15/07</th>

      <td>$200,00</td>

      <td>$50,00</td>

      <td>$0</td>

      <td>$0</td>

    </tr>

    <tr>

      <th>28/07</th>

      <td>$0,00</td>

      <td>$100,00</td>

      <td>$100,00</td>

      <td>$0,00</td>

    </tr>

  </tbody>

  <tbody style="background: rgba(255, 128, 0, 0.3); border: 1px solid rgba(200, 100, 0, 0.3);">

    <tr>

      <th>09/08</th>

      <td>$0,00</td>

      <td>$50,00</td>

      <td>$0,00</td>

      <td>$80,00</td>

    </tr>

    <tr>

      <th>22/08</th>

      <td>$40,00</td>

      <td>$0,00</td>

      <td>$0,00</td>

      <td>$110,00</td>

    </tr>

    <tr>

      <th>25/08</th>

      <td>$0,00</td>

      <td>$20,00</td>

      <td>$0,00</td>


      <td>$0,00</td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <th>Balance</th>

      <td colspan="2">$20,00</td>

      <td colspan="2">$10,00</td>

    </tr>

  </tfoot>

</table>

	Anthony		Lione
Fecha	Income	Outcome	Income	Outcome
15/07	$200,00	$50,00	$0	$0
28/07	$0,00	$100,00	$100,00	$0,00
09/08	$0,00	$50,00	$0,00	$80,00
22/08	$40,00	$0,00	$0,00	$110,00
25/08	$0,00	$20,00	$0,00	$0,00
Balance	$20,00		$10,00

AGRUPACIÓN DE COLUMNAS

Las columnas de una tabla que están de alguna manera relacionadas pueden ser agrupadas con el elemento <colgroup>. Es importante que los grupos de columnas tengan un significado semántico y que no se limiten a formar bloques estilísticos. Por ejemplo, el elemento <colgroup> se puede utilizar para agrupar columnas si se refieren a un mismo producto o si representan una misma magnitud, pero no debe ser usado simplemente para hacer que tengan el mismo aspecto (para eso está el elemento col).

El elemento <colgroup>, solo o conformando un bloque, debe ser declarado al comienzo de la tabla, luego de su etiqueta de apertura y de su título (<caption>), si éste está presente. Cada elemento <colgroup> declarado en este bloque definirá un grupo con la ayuda del atributo span, el cual indicará el número de columnas que pertenecerán a este grupo.

La grupos de columnas se declaran de izquierda a derecha, de modo que el primer grupo contendrá a la primera columna de la tabla más un número de de columnas consecutivas según lo defina su atributo span. El resto de los grupos comenzarán por la primera columna a la derecha del grupo anterior. Este concepto puede resultar algo complicado, así que veamos un ejemplo.

La siguiente tabla tiene cinco columnas: la primera con celdas de encabezados, las dos siguientes con el desempeño de Mike y las dos últimas con el desempeño de Tara. Los elementos <colgroup> declarados al comienzo reflejan la misa estructura recién explicada: un <colgroup> para los encabezados, uno para el desempeño de Mike y otro para el desempeño de Tara. Fíjate como el atributo span indica el número de columnas que abraca cada grupo, con excepción del primero que tiene sólo una columna (el valor por defecto de span). Sólo para hacerlos visibles, agregamos algunos atributos de estilo a los grupos de columnas.

<table class="egt">

  <colgroup>

  <colgroup span="2" style="background: rgba(128, 255, 0, 0.3); border: 1px solid rgba(100, 200, 0, 0.3);"></colgroup>

  <colgroup span="2" style="background: rgba(255, 128, 0, 0.3); border: 1px solid rgba(200, 100, 0, 0.3);"></colgroup>

  <tr>

    <th></th>

    <th colspan="2">Mike</th>

    <th colspan="2">Tara</th>

  </tr>

  <tr>

    <th></th>

    <th>Primera prueba</th>

    <th>Segunda prueba</th>

    <th>Primera prueba</th>

    <th>Segunda prueba</th>

  </tr>

  <tr>

    <th>Día 1</th>

    <td>25 km</td>

    <td>38 km</td>

    <td>28 km</td>

    <td>37 km</td>

  </tr>


  <tr>

    <th>Día 2</th>

    <td>22 km</td>

    <td>35 km</td>

    <td>30 km</td>

    <td>35 km</td>

  </tr>

</table>

	Mike		Tara
	Primera prueba	Segunda prueba	Primera prueba	Segunda prueba
Día 1	25 km	38 km	28 km	37 km
Día 2	22 km	35 km	30 km	35 km

Pero span no es la única forma de indicar el número de columnas afectadas por un grupo. A veces, el elemento <col> puede resultar ser una mejor alternativa. Si quieres investigar más profundamente el tema échale un vistazo a la referencia para el elemento <col>.

Formularios

Los formularios en HTML sirven al propósito de recolectar información proporcionada por los visitantes del sitio, la cual es luego enviada nuevamente al servidor. Para su correcto funcionamiento es importante que el formulario provisto en HTML sea acompañado de un código del lado servidor, al que denominaremos "agente procesador", que se encargará de recibir y procesar la información como el autor vea conveniente. Este procesamiento puede consistir en, por ejemplo, el almacenamiento de la información o su envío mediante correo electrónico.

Un formulario (<form>) es básicamente un contenedor para controles. Cada control en un formulario está pensado para recolectar información ingresada por los usuarios, en formas que pueden ir desde líneas de texto a subida de archvios, pasando por opciones, fechas, contraseñas y mucho más. Una vez que los usuarios han rellenado el formulario con los datos, pueden enviarlo de regreso al servidor para que el agente procesador administre la información recolectada.

El siguiente código muestra la estructura de un formulario, con sus etiquetas de apertura y cierre encerrando un conjunto de controles.

<form>

  [Conjunto de controles]

</form>

Pero este modelo no dice nada acerca de cómo y dónde será procesado el formulario. Tal información puede ser especificada con atributos tales como: action, que indica la ubicación del agente procesador; method que determina el método utilizado para empaquetar el formulario antes de ser enviado al agente procesador; y target, que indica dónde serán mostrados los resultados del proceso. Aquí hablaremos únicamente del atributo action, dejando los otros dos para ser analizados en la referencia del elemento <form>.

El siguiente formulario ha sido declarado con el URI de un agente procesador que he preparado para propósitos de aprendizaje, en el atributo action. Puedes ver al agente procesador tomando el control del proceso en una nueva ventana cuando envías el formulario.

<form action="../form-result.php" target="_blank">

  <input type="submit" value="Enviar el formulario">


</form>

CONTROLES DE TEXTO

Los controles de texto proveen los medios necesarios para recolectar información textual, como nombres, direcciones, frases, mensajes, contraseñas, etc. En las secciones siguientes analizaremos dos de los controles de texto más básicos y utilizados.

CAMPOS DE TEXTO DE UNA SOLA LÍNEA

Un campo de texto de una sola línea, que permite el ingreso de una única línea de texto, es uno de los tantos controles que se declaran con el elemento <input>. En este caso, el elemento<input> debe tener el valor "text" en su atributo type.

Cuando la tecla ENTER es presionada en este tipo de campos, los navegadores habitualmente envían el formulario que los contiene, en lugar de pasar a una nueva línea del control. Esto se debe a la naturaleza del control que solo acepta una línea de texto.

Con sólo esto, el control ya es visible, pero se necesita de un nombre (en el atributo name) si existe la intención de recolectar la información ingresada por el usuario en este control. El valor del atributo name identificará, en el lado servidor, a los datos ingresados por el usuario en el control. El siguiente ejemplo muestra una implementación básica de un control de texto de una sola línea. Adicionalmente, estaremos encerrando al control y su etiqueta en un párrafo, ya que puede considerarse a estos dos como una unidad con un idea que los separa del resto.

<form action="../form-result.php" target="_blank">

<p>

    Ingresa tu nombre completo: <input type="text" name="nombrecompleto">

    <input type="submit" value="Enviar la información">

  </p>

</form>

Una vez que el formulario es enviado puedes ver claramente en la información mostrada por el agente procesador, cómo la información es recibida del lado servidor. Allí puedes ver también que el nombre (name) declarado para el control es asociado a la información ingresada por el usuario.

BOTONES

Un botón es un tipo especial de control que ha sido diseñado para interactuar con el usuario de una manera singular: una acción es ejecutada cada vez que el usuario lo presiona. Existe una amplia gama de botones, cada uno con sus peculiaridades en relación a sus capacidades y su conducta, pero aquí sólo analizaremos los dos más ampliamente utilizados en formularios básicos.

BOTONES DE ENVÍO

Un botón de envío tiene la acción predefinida de enviar el formulario al que pertenece cuando es activado. A menos que otro mecanismo de envío sea provisto, la presencia de este botón es necesaria si existe la intención de permitir a los usuarios enviar el formulario. Ya hemos visto este control en los ejemplos anteriores, así que su conducta nos debería resultar natural.
Los botones de envío son insertados con el elemento <input>, teniendo el valor "submit" en su atributo type. El atributo value es importante en este control, ya que su valor es mostrado a modo de etiqueta dentro del botón. El siguiente ejemplo muestra un formulario con un control de texto y un botón de envío.

<form action="../../form-result.php" target="_blank">

<p>

    Edita tu descripción:

    <input type="text" name="desc">

    <input type="submit" value="Guardar cambios">

  </p>

</form>

CAMPO DE TEXTO MULTILÍNEA

Este tipo de control es muy similar al anterior, pero tiene la particularidad de permitir el ingreso de múltiples líneas de texto. Un campo de texto multilínea es habitualmente representado como una caja, lo suficientemente alta como para contener más de una línea de texto a la vez. Esta representación, usualmente provee un mecanismo de desplazamiento para permitir a los usuarios ver todo el texto ingresado, especialmente cuando es lo suficientemente largo como para exceder los límites de la caja.

Un campo de texto multilínea se inserta con el elemento textarea. Como anteriormente, el atributo nameprovee un nombre para el control que ayudará al agente procesador a identificar la información enviada por el usuario.

En el siguiente ejemplo mejoraremos el formulario anterior para permitir al usuario ingresar ambos tipos de cadenas de texto (de una sola línea y multilínea). En el ejemplo propuesto, cada control se adapta mejor al tipo de información que debe recolectar.

<form action="../form-result.php" target="_blank">

  <p>Ingresa tu nombre completo: <input type="text" name="nombre completo"></p>

<p>

    Deja un mensaje:<br>

    <textarea name="mensaje"></textarea>

  </p>

  <input type="submit" value="Enviar la inform

CONTROLES DE OPCIÓN

Estos controles permiten a los usuarios seleccionar una o más opciones de una lista de valores predefinidos. Los controles de opción pueden ser presentados con diferentes estilos y mecanismos de interacción con el usuario, dependiendo principalmente del elemento utilizado. Una lista de opciones puede declararse de tres formas: con casillas de verificación, con botones de opción y con listas.

CASILLAS DE VERIFICACIÓN

Una casilla de verificación es un tipo particular de opción que puede ser seleccionada o deseleccionada mediante la interacción del usuario. Esto permite a los autores recolectar información como preferencias, aceptación de términos y condiciones, categorías, o cualquier otra cosa que pueda ser respondida mediante "sí" y "no". Una cosa que este control tiene de particular es que, aún cuando puede ser declarado como parte de un grupo temático, cada casilla es independiente de todas las demás en el formulario.

Las casillas de verificación son representadas por el elemento <input>, cuando tiene el valor "checkbox" en el atributo type. Aquí el valor del atributo name también juega un rol, identificando a la opción del lado servidor. En el siguiente ejemplo, unas cuantas casillas de verificación han sido declaradas como parte de un grupo temático de opciones. Recuerda que esta agrupación está hecha únicamente por temática y posición; la selección de las casillas continúa siendo independiente.

<form action="../../form-result.php" target="_blank">

<p>

    Selecciona tus intereses:<br>

    <input type="checkbox" name="peliculas"> Películas<br>

    <input type="checkbox" name="deportes"> Deportes<br>

    <input type="checkbox" name="videojuegos"> Videojuegos

  </p>

  <p><input type="submit" value="Enviar información"></p>


</form>

Un par de cosas pueden señalarse del ejemplo anterior. La primera es la falta de asociación entre las casillas y el texto que las describe o, en otras palabras, la imposibilidad de activar una casilla al hacer click en su texto asociado. Esto es algo que puede ser fácilmente remediado convirtiendo al texto en una etiqueta (label) para el control, un tema que trataremos más adelante en este tutorial.
La segunda es acerca de cómo la información de las casillas de verificación es recibida del lado servidor. Si envías el formulario, verás que sólo las casillas seleccionadas son enviadas al agente procesador. Su valor, que depende mucho del lenguaje utilizado en el lado servidor, es irrelevante considerando que la mera presencia de la información de la casilla está indicando, por sí sola, su estado de activación.

BOTONES DE OPCIÓN

Mientras que las casillas de verificación son independientes y pueden ser declaradas por sí mismas, los botones de opción necesitan ser agrupados a fin de tener sentido. Los grupos de botones de opción tienen una particularidad que juega un rol importante en su conducta: sólo una opción puede ser seleccionada por vez en todo el grupo. Esto significa, entre otras cosas, que cuando seleccionas una opción, la opción que estaba anteriormente seleccionada se deselecciona.
Un botón de opción también se declara con el elemento <input>, pero con el valor "radio" en su atributo type. Aquí las cosas se vuelven un poco diferentes a como eran con las casillas de verificación, debido a que el valor del atributo name necesita ser compartido por todas las opciones en un mismo grupo. En otras palabras, este es el mecanismo que se requiere utilizar para crear un grupo de botones de opción.
Pero entonces, ¿dónde está el valor que le dice al agente procesador qué opción ha sido seleccionada? La respuesta a esta pregunta está en el atributo value. Ya que el propósito de este atributo es identificar a las opciones de un grupo, su valor debe ser diferente para cada opción.
En el siguiente ejemplo un grupo de botones de opción ha sido declarado para conformar un grupo donde sólo una opción puede ser elegida, algo que tiene mucho sentido en este contexto. Para este propósito, todos los botones comparten el mismo nombre (name) y tienen, cada uno, un valor diferente (value).

<form action="../../form-result.php" target="_blank">

<p>

    Ingresos:<br>

    <input type="radio" name="ingresos" value="menosde1000"> Menos de than $1,000.00<br>

    <input type="radio" name="ingresos" value="de1000a5000"> De $1,000.00 a $5,000.00<br>

    <input type="radio" name="ingresos" value="masde5000"> Más de $5,000.00

  </p>

  <p><input type="submit" value="Enviar información"></p>


</form>

Aquí puedes ver nuevamente la falta de interacción entre el texto y los botones de opción. Este problema será resuelto más adelante en este tutorial.

LISTAS

Una lista de opciones es un control que puede asemejarse, en cuanto a su mecánica, a cada uno de los controles analizados previamente, dependiendo de la presencia del atributo booleano multiple. Este atributo cambia radicalmente la conducta de una lista, haciendo posible la selección de una sola opción a la vez o de muchas.
La estructura de una lista está compuesta, principalmente, por dos elementos: <select>, que actúa como contenedor para las opciones; y <option>, que representa una de las muchas opciones que el control puede presentar.
Cuando el atributo multiple se encuentra ausente, un control de lista se comporta como un grupo de botones de opción, donde sólo una opción puede ser seleccionada por vez. El próximo ejemplo refleja esta conducta, lo que encaja perfectamente con el propósito del campo.
Si el atributo size tiene un valor de "1" y el atributo multiple se encuentra ausente, los navegadores habitualmente muestran a este control como una lista desplegable. En cualquier otro caso, el control toma la forma de una caja desplazable.

<form action="../../form-result.php" target="_blank">

<p>

    Género:

    <select name="genero">

      <option>Masculino</option>

      <option>Femenino</option>

    </select>

  </p>

  <p><input type="submit" value="Enviar información"></p>

</form>

En el ejemplo anterior, puedes ver que lo que se envía al servidor es el contenido de la opción seleccionada. Pero los autores pueden cambiar esta conducta si lo creen necesario, declarando el atributo value para la opción (<option>). Cuando este atributo está presente, su valor es enviado al agente procesador en lugar del contenido del elemento.

Ahora, cuando el atributo multiple está presente, la lista se comporta como un conjunto de casillas de verificación, donde no solamente una sino muchas opciones pueden ser seleccionadas al mismo tiempo. Esta configuración requiere que un par de corchetes sea anexado al valor que el autor elija para el atributo name. Si este requerimiento no se cumplimenta, los agentes procesadores sólo recibirán la primera opción seleccionada.

El siguiente ejemplo muestra una lista de opciones que pueden ser seleccionadas sin restricciones. También hace uso del atributo value en las opciones, para evitar el uso de valores innecesariamente largos durante el procesamiento de datos en el lado servidor.

<p>

Selecciona categorías:<br>

<option value="arte">Arte y entretenimiento</option>

<option value="tv">Televisión y películas</option>

<option value="niños">Niños y adolescentes</option>

<option value="hazlo tú">Hazlo tu mismo</option>

</select>

</p>

</form>

BOTONES

BOTONES DE ENVÍO

Un botón de envío tiene la acción predefinida de enviar el formulario al que pertenece cuando es activado. A menos que otro mecanismo de envío sea provisto, la presencia de este botón es necesaria si existe la intención de permitir a los usuarios enviar el formulario. Ya hemos visto este control en los ejemplos anteriores, así que su conducta nos debería resultar natural.
Los botones de envío son insertados con el elemento input, teniendo el valor "submit" en su atributo type. El atributo value es importante en este control, ya que su valor es mostrado a modo de etiqueta dentro del botón. El siguiente ejemplo muestra un formulario con un control de texto y un botón de envío.

<form action="../../form-result.php" target="_blank">

<p>

    Edita tu descripción:

    <input type="text" name="desc">

    <input type="submit" value="Guardar cambios">

  </p>

</form>

BOTONES DE REINICIO

Como los botones de envío, los de reinicio también tienen una acción predefinida. Pero en este caso, la acción predefinida consiste en el reinicio de la información de los campos del formulario a sus valores iniciales. En otras palabras, el estado de los campos en un formulario que ha sido reiniciado es el mismo que tenía cuando la página ha sido cargada. Esta acción elimina todos los cambios que haya realizado el usuario a los valores de los controles.

Sería bueno notar aquí que todos los controles pueden tener un valor predefinido, esto es, un valor que está presente en el formulario cuando la página es cargada. La forma que los autores tienen para especificar este valor inicial depende del control. Para saber cómo especificar un valor por defecto en un tipo particular de control, revisa la referencia para ese control en esta lista.

En el siguiente ejemplo podrás probar la funcionalidad del botón de reinicio. Este formulario ha sido declarado con un campo de texto de una sola línea, un par de botones de opción y una casilla de verificación. Todos estos controles tienen un valor por defecto especificado con los atributos value y checked, dependiendo del caso.

<form action="../../form-result.php" target="_blank">

  <p>Enviar mensaje: <input type="text" name="mensaje" value="Estoy listo!"></p>

<p>

    <input type="radio" name="cuando" value="hoy" checked> Hoy<br>

    <input type="radio" name="cuando" value="mañana"> Mañana

  </p>

  <p><input type="checkbox" name="copia" checked> Enviarme una copia</p>

<p>

    <input type="reset" value="Reiniciar el formulario">

    <input type="submit" value="Enviar mensaje">

  </p>

</form>

ETIQUETADO DE CONTROLES

Casi cualquier control en un formulario puede ser etiquetado. El etiquetado de controles en una operación provechosa que mejora la accesibilidad en muchos frentes. Esta asociación entre un trozo de texto y un control resolverá el problema señalado en ejemplos anteriores de este tutorial, particularmente con botones de opción y casillas de verificación.

Una etiqueta puede asignarse con el elemento label. El más fácil de los dos métodos que existen para asignar una etiqueta a un control, consiste en declarar a ambos, el texto y el control, como contenido del elemento label. El siguiente ejemplo tiene un par de controles asociados a etiquetas mediante este método. Allí puedes ver cómo un control recibe el enfoque cuando su etiqueta es activada.

<form action="../../form-result.php" target="_blank">

  <p><label>Nombre: <input type="text" name="nombre"></label></p>

<p>

    Género:

    <label><input type="radio" name="genero" value="masculino"> Masculino</label>

    <label><input type="radio" name="genero" value="femenino"> Femenino</label>

  </p>

 <p><label><input type="checkbox" name="novedades"> Me gustaría recibir novedades</label></p>

  <p><input type="submit" value="Enviar datos"></p>

</form>

AGRUPACIÓN DE CONTROLES

A veces, cuando un formulario es grande, la segmentación podría jugar un rol en el mejoramiento de la organización y la facilidad de uso. Este es el motivo por el que HTML provee el elemento <fieldset>, el cual actúa como un contenedor de controles. Con este elemento, los autores pueden hacer divisiones al formulario y organizar los controles temáticamente.

Un grupo <fieldset> puede además tener un título para identificar la composición o el propósito del conjunto de controles que contiene. Este título puede ser provisto por el elemento <legend>, el cual debe ser declarado como primer hijo del grupo (<fieldset>). El siguiente ejemplo muestra un formulario pequeño dividido en dos grupos temáticos.

<form action="../../form-result.php" target="_blank">

  <fieldset>

    <legend>Información personal</legend>


    <p><label>Nombre: <input type="text" name="nombre"></label></p>

    <p><label>Dirección: <input type="text" name="direccion"></label></p>

  </fieldset>

  <fieldset>

    <legend>Preferencias</legend>

<p>

      <label><input type="checkbox" name="arte"> Arte</label><br>

      <label><input type="checkbox" name="television"> Televisión</label><br>

      <label><input type="checkbox" name="videojuegos"> Videojuegos</label><br>

      <label><input type="checkbox" name="deportes"> Deportes</label><br>

    </p>

  </fieldset>

  <input type="submit" value="Enviar">

</form>

Como puedes ver, este modelo organizacional se aplica únicamente del lado cliente. La información recibida por el agente procesador no presenta información acerca de la agrupación de los controles.