FORMULARIOS

Formularios
Los formularios interactivos permiten a los autores de páginas Web poner elementos interactivos en sus páginas, por ejemplo, para recibir mensajes de sus lectores, de forma similar a las cartas de respuestas que se encuentra en algunas revistas.
El lector escribe la información rellenando campos o haciendo clic sobre botones, y luego presiona un botón de envío para enviarla a una dirección URL que se suele dirigir a una dirección de correo electrónico o a un script dinámico Web como PHP, ASP o CGI.
La etiqueta FORM
Los formularios están delimitados con la etiqueta

...

, que permite reunir varios elementos de formulario, como botones y casillas de texto y que debe poseer los siguientes atributos:
• METHOD indica cómo se enviarán las respuestas
"POST" es el valor que envía los datos al agente de procesamiento almacenándolos en el cuerpo del formulario, en tanto que "GET" envía los datos agregándolos a la dirección URL y separándolos de la dirección con un signo de interrogación (para aprender más sobre los métodos POST y GET, consulte el artículo sobre protocolo HTTP)
• ACTION indica la dirección a la que se enviará la información (un script CGI o dirección de correo electrónico (mailto:dirección_de_correo_e@equipo))
Un atributo opcional de la etiqueta FORM es ENCTYPE, que especifica cómo se codifican los datos del formulario. De cualquier forma, esto no necesita especificarse, ya que el valor predeterminado (application/x-www-form-urlencoded) es el único valor válido. El atributo opcional ACCEPT se usa para establecer tipos MIME para los datos que el formulario puede enviar.
Esta es la sintaxis para la etiqueta FORM:

...

Aquí hay algunos ejemplos de las etiquetas FORM:

Dentro de la etiqueta FORM
La etiqueta FORM actúa como una especie de contenedor para almacenar elementos que permiten al usuario seleccionar o introducir datos. Todos los datos se enviarán a la dirección URL indicada en el atributo ACTION de la etiqueta FORM, por el método indicado en el atributo METHOD.
Se puede insertar cualquier elemento HTML en una etiqueta FORM (como texto, botones, tablas y enlaces), pero los elementos interactivos son los más interesantes. Estos elementos interactivos son:
• La etiqueta INPUT: Todos los botones y casillas de texto
• La etiqueta TEXTAREA: una casilla de texto
• La etiqueta SELECT: una lista de opciones múltiples
Envío de datos
Cuando se envía un formulario (haciendo clic en el botón de envío), los datos del formulario se envían a un script CGI bajo la forma de pares nombre/valor, es decir conjuntos de datos representados por el nombre del elemento formulario, un signo igual ("=") y luego el valor asociado. Estos pares nombre/valor se separan unos de otros mediante el símbolo de unión ("&"). Por lo tanto, los datos que se envían al script se verán así:
campo1=valor1&field2;=valor2&field3;=valor3
Con el método GET (enviar los datos mediante una dirección URL), la URL será una cadena como la siguiente:
http://es.kioskea.net/cgi-bin/script.cgi?campo1=valor1&field2;=valor2
La etiqueta INPUT
La etiqueta INPUT es una etiqueta esencial para los formularios, ya que se usa para crear muchos elementos “interactivos”. La sintaxis de esta etiqueta es la siguiente:

El atributo name es esencial, ya que permite al script CGI reconocer qué campo está asociado con un par nombre/valor, lo que significa que el nombre del campo estará seguido de un signo igual ("=") seguido de un valor que el usuario introdujo, o si el usuario no introdujo ningún valor, por el valor predeterminado de la etiqueta value.
El atributo type se usa para especificar qué tipo de elemento se representa con la etiqueta INPUT. Estos son los valores posibles:
• checkbox: Las casillas de elección pueden adoptar uno de dos estados: checked (seleccionado) o unchecked (no seleccionado). Cuando la casilla es seleccionada, el par nombre/valor se envía al CGI.
• hidden: Este campo, que el navegador no muestra, es para definir una configuración única que se enviará al CGI como par nombre/valor.
• file: Un campo que permite al usuario especificar una ruta de archivo que lleva al archivo que se enviará con el formulario. Los tipos de archivo que pueden ser enviados deben especificarse utilizando el atributo ACCEPT de la etiqueta FORM.
• image: Un botón de envío personalizado que aparece cuando se ubica una imagen en la ubicación definida por el atributo SRC.
• password: Una casilla de texto donde los caracteres escritos aparecen como asteriscos para camuflar el texto de entrada.
• radio: Un botón que permite al usuario elegir entre varias opciones. Cada uno de estos botones debe tener el mismo atributo name. El par nombre/valor del botón radio seleccionado se enviará al CGI. Al aplicar el atributo checked para uno de estos botones se definirá como seleccionado de forma predeterminada.
• reset: Un botón de restauración para quitar todos los elementos en el formulario y restablecer sus valores predeterminados.
• submit: Un botón de envío para enviar el formulario. El texto en el botón puede definirse usando el atributo value.
• text: Una casilla de texto para escribir una línea de texto. El tamaño de la casilla puede definirse usando el atributo size y la extensión máxima del texto con el atributo maxlength.
La etiqueta TEXTAREA
La etiqueta TEXTAREA se usa para definir un cuadro de texto más grande que la línea simple propuesta por la etiqueta INPUT. Esta etiqueta tiene los siguientes atributos:
• cols: representa el número de caracteres que puede contener un línea
• rows: representa el número de líneas
• name: representa el nombre asociado con el cuadro de texto, que permite su identificación en el par nombre/valor.
• readonly: impide que el usuario modifique el texto predeterminado en el campo
• value: representa el valor predeterminado que se enviará al script si el usuario no ha escrito nada en el cuadro de texto
La etiqueta SELECT
La etiqueta SELECT sirve para crear una lista desplegable de elementos (especificados por las etiquetas OPTION dentro de ella). Los atributos de esta etiqueta son:
• name: name: representa el nombre asociado con la casilla de texto, que permite su identificación en el par nombre/valor.
• disabled: crea un lista desactivada, que aparece atenuada
• size: representa el número de líneas de la lista (este valor puede ser más grande que el número de elementos reales de la lista).
• multiple: Permite al usuario seleccionar varios campos de la lista
Ejemplo de formulario
Los formularios pueden ubicarse en una página usando tablas (algo recomendable para una presentación profesional). Este es un ejemplo que resume los puntos precedentes, mostrándole cómo disponer un formulario en una página Web mediante una tabla:

Registro de un usuario

Apellido
Nombre
Género	Hombre: Mujer: Mujer:
Ocupación	Profesor Estudiante Ingeniero Jubilado Otro
Comentarios	<br /> Escriba aquí sus comentarios Enviar

Esto es lo que aparece en la pantalla:
Registro de usuario
Apellido

Nombre

Género Hombre: Mujer:
Mujer:

Ocupación

Comentarios



Atributos de etiquetas FORM y tipos de entrada
Etiqueta Atributo Valor Resultado Efecto visual

...

METHOD POST
GET
ACTION Envía a la dirección mostrada
ENCTYPE Especifica el tipo de código
TYPE submit realiza la ACTION de la etiqueta

text línea simple de texto cuya longitud
se especifica por el atributo SIZE


Reset Elimina el contenido del formulario


Radio botón de radio


Checkbox casilla de selección


NAME Nombre
SIZE Tamaño del texto
... NAME Casilla de texto


ROWS
COLS
... NAME


MULTIPLE Múltiples selecciones posibles


... SELECTED Elección predeterminada


VALUE Valor forzado




Tablas
Tablas simples
Una tabla HTML puede ser considerada de manera simple como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Las tablas, así como toda estructura en documentos HTML, son definidas usando tags. Una tabla simple puede ser insertada en un documento HTML usando tres tags: el tag HTML table (principal contenedor), el tag HTML tr (fila contenedora) y el tag HTML td (celda simple). Veamos un ejemplo:
Código Visualización

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

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

Nota: Los bordes en este ejemplo son creados utilizando el atributo "border" para el tag HTML table, el cual es sólo utilizado para mejorar la visualización. Como los atributos de presentación van siendo desaprobados con cada versión del estándar HTML, y dado que los mismos efectos pueden lograrse usando hojas de estilo, recomendamos evitar el uso de atributos de presentación como "border".
Ten en cuenta que las celdas vacías igual deben ser declaradas utilizando sus respectivos tags para lograr correctitud en el código. Cuando el contenido de una celda debe ser vacío, deberías usar siempre un espacio en blanco ( ) en su lugar. Esto hará que tu página sea más comatible, dado que ciertos navegadores tienen problemas al mostrar celdas vacías.
Tipos de celdas
Dos tipos de celda pueden ser definidos en una tabla HTML. Una de ellas es la celda simple (tag HTML td) anteriormente utilizada en el ejemplo de "tabla simple", y la otra es un tipo de celda especial (tag HTML th) que contiene información de encabezado para todas las celdas en la columna (pertenecientes al mismo grupo horizontal). Los navegadores pueden graficar el contenido de las celdas de encabezado en una manera especial (usualmente, texto centrado y en negrita). Este tipo de celda es comúnmente encontrado en el encabezado de una tabla.
En el ejemplo siguiente la misma "tabla simple" es definida pero esta vez con celdas de encabezado:
Código Visualización

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

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

Las características de estas celdas pueden ser logradas visualmente usando una celda simple con atributos de presentación (texto centrado y en negrita), pero las celdas de encabezado proporcionan más información oculta que puede ser útil para navegadores no visuales (los navegadores hablados pueden decir a los usuarios el contenido de una celda asociándolo inmediatamente con el encabezado correspondiente) y arañas (como las de los motores de búsqueda lo que ayudaría en la promoción del sitio).
Otra forma de asociar celdas de encabezados con celdas simples es usando los atributos: "headers" para definir una lista de celdas que proveen información de encabezado para la celda actual (ver el tag HTML td) y "scope" para definir una lista de celdas para las cuales la celda actual provee información de encabezado (ver el tag HTML th).
Unificando celdas
Para algunas tablas puedes necesitar unificar dos o más celdas en una sola que tomará el lugar de aquellas afectadas. Estas unificaciones pueden lograrse mediante los atributos "rowspan" (para unificar verticalmente) y "colspan" (para unificar horizontalmente), ambos disponibles para celdas (tag HTML td y tag HTML th).
Código Visualización

Campo 1	Campo 2	Campo 3
Campos 4 y 5		Campo 6
Campo 7	Campo 8	Campo 9

Campo 1 Campo 2 Campo 3
Campos 4 y 5 Campo 6
Campo 7 Campo 8 Campo 9

Observa en el ejemplo anterior como una definición de celda unificando dos celdas, es el equivalente unificado de dos definiciones de celda simple. Esto también funciona para unificar verticalmente con una pequeña diferencia debida a la naturaleza de las tablas HTML. Al unificar celdas verticalmente, las definiciones de celda en la columna afectada deberán ser omitidas. Observa el siguiente ejemplo, donde el campo 1, 4 y 7 son unificadas:
Código Visualización

Campo unificado	Campo 2	Campo 3
	Campo 5	Campo 6
	Campo 8	Campo 9

Tipos de celdas
Dos tipos de celda pueden ser definidos en una tabla HTML. Una de ellas es la celda simple (tag HTML td) anteriormente utilizada en el ejemplo de "tabla simple", y la otra es un tipo de celda especial (tag HTML th) que contiene información de encabezado para todas las celdas en la columna (pertenecientes al mismo grupo horizontal). Los navegadores pueden graficar el contenido de las celdas de encabezado en una manera especial (usualmente, texto centrado y en negrita). Este tipo de celda es comúnmente encontrado en el encabezado de una tabla.
En el ejemplo siguiente la misma "tabla simple" es definida pero esta vez con celdas de encabezado:
Código Visualización

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

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

Las características de estas celdas pueden ser logradas visualmente usando una celda simple con atributos de presentación (texto centrado y en negrita), pero las celdas de encabezado proporcionan más información oculta que puede ser útil para navegadores no visuales (los navegadores hablados pueden decir a los usuarios el contenido de una celda asociándolo inmediatamente con el encabezado correspondiente) y arañas (como las de los motores de búsqueda lo que ayudaría en la promoción del sitio).
Otra forma de asociar celdas de encabezados con celdas simples es usando los atributos: "headers" para definir una lista de celdas que proveen información de encabezado para la celda actual (ver el tag HTML td) y "scope" para definir una lista de celdas para las cuales la celda actual provee información de encabezado (ver el tag HTML th).
Unificando celdas
Para algunas tablas puedes necesitar unificar dos o más celdas en una sola que tomará el lugar de aquellas afectadas. Estas unificaciones pueden lograrse mediante los atributos "rowspan" (para unificar verticalmente) y "colspan" (para unificar horizontalmente), ambos disponibles para celdas (tag HTML td y tag HTML th).
Código Visualización

Campo 1	Campo 2	Campo 3
Campos 4 y 5		Campo 6
Campo 7	Campo 8	Campo 9

Campo 1 Campo 2 Campo 3
Campos 4 y 5 Campo 6
Campo 7 Campo 8 Campo 9

Observa en el ejemplo anterior como una definición de celda unificando dos celdas, es el equivalente unificado de dos definiciones de celda simple. Esto también funciona para unificar verticalmente con una pequeña diferencia debida a la naturaleza de las tablas HTML. Al unificar celdas verticalmente, las definiciones de celda en la columna afectada deberán ser omitidas. Observa el siguiente ejemplo, donde el campo 1, 4 y 7 son unificadas:
Código Visualización

Campo unificado	Campo 2	Campo 3
	Campo 5	Campo 6
	Campo 8	Campo 9

Campo unificado Campo 2 Campo 3
Campo 5 Campo 6


Campo unificado Campo 2 Campo 3
Campo 5 Campo 6