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:
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ónCelda 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ónColumna 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ónCampo 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ónCampo 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ónColumna 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ónCampo 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ónCampo 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
No hay comentarios:
Publicar un comentario