Formulario
HTML: Formularios
Los formularios son secciones que permiten la interacción entre el usuario y la aplicación. A través de ciertos elementos HTML de controles interactivos, los usuarios pueden introducir datos, que normalmente se envían a un servidor web para que los procese y devuelva un resultado; pero también se pueden procesar en el lado del cliente.
< form > elemento de formulario
Elemento de bloque que permite definir una sección del documento que contiene un formulario con uno o más controles interactivos. Como cualquier otro elemento HTML, este elemento soporta atributos globales, además tiene dos tributos que son de vital importancia para el funcionamiento del formulario: action y method.
Atributos
atributo ‘action’
El atributo action se utiliza para indicar la ubicación del programa que procesará los datos introducidos por el usuario y enviados por el navegador. El programa que recibirá y procesará estos datos puede estar escrito en cualquier lenguaje del lado del servidor. El valor de este atributo será una URL relativa o absoluta.
También es posible utilizar JavaScript —lenguaje del lado del cliente— mediante el atributo onsubmit. En este caso, el valor de action será javascript:, y el valor de onsubmit será una llamada a la función JavaScript. Por ejemplo, podemos usar la función alert() para mostrar un mensaje emergente.
El atributo‘method’
El atributo method permite especificar el método que se debe usar para enviar los datos del formulario. Este atributo hace referencia al método HTTP, que no es propio del HTML. Los dos valores posibles de este atributo son GET y POST. En caso de no indicar ningún valor, el valor por defecto será GET.
La principal diferencia entre los métodos GET y POST es que usando GET, la información se envía añadiendo variables a la URL —a partir del signo de interrogación (?), y separando las variables con el signo & en caso de existir más de una—; mientras que usando POST, la información se empaqueta dentro del cuerpo de la petición HTTP que se envía al servidor.
HTML semantica y HTML 5
HTML: Semántica
Los elementos semánticos son aquellos que tienen un significado, es decir, que describen claramente el propósito de su contenido. Estos elementos son de gran utilidad a la hora de estructurar un documento HTML o página web, permitiendo crear divisiones de parte de una web con valor añadido.
La inclusión de los elementos semánticos llegó con la versión HTML5. En las versiones anteriores se usa sobre todo el elemento <div> —que no describe nada acerca de su contenido― para crear todo tipo de divisiones o regiones. Actualmente se recomienda usar los elementos semánticos cuando sea posible.
<header> Elemento encabezado o cabecera:
El encabezado se encuentra en la parte superior del documento HTML o página web y normalmente se trata de una franja horizontal que va desde la esquina superior izquierda hasta la esquina superior derecha. En el se colocan menú de navegación, un logotipo, un formulario de búsqueda, datos de contacto (teléfono o correo electrónico), etc.
El encabezado suele permanecer de forma invariable en todas las páginas pertenecientes al mismo sitio web. Además, muchos sitios lo tiene fijado en la parte superior, de modo que esté visible incluso cuando el usuario se deslice hacia abajo. Esto facilita la navegación, sobre todo en dispositivos pequeños.
<nav>Menú de navegación:
El menú de navegación contiene una agrupación de enlaces que conducen a las secciones principales del sitio web. Este menú también suele permanecer invariable en la mayoría de páginas pertenecientes al sitio. En muchos casos, el menú de navegación se inserta dentro del encabezado, y otras veces fuera.
<main> Contenido principal:
Es la parte que contiene la información principal y relevante de la página web, de forma independiente del resto de zonas que sí podrían ser comunes en el resto de páginas del sitio. Por ejemplo, puede contener un artículo de texto, una sección de comentarios y una barra lateral con un índice de contenidos.
<article>Artículo:
Este elemento representa una composición auto-contenida en un documento, una página, una aplicación o en un sitio, que se quiere que sea distribuíble y/o reutilizable de manera independiente, por ejemplo, en la redifusión. Algunos ejemplos podrían ser un mensaje en un foro, un artículo de una revista o un periódico, una entrada de blog, el comentario de un usuario, un widget o gadget interactivo, o cualquier otro elemento de contenido independiente.
Un mismo documento puede tener varios artículos; por ejemplo, en un blog en el que se que muestran distintos mensajes a medida que el usuario va navegando, cada mensaje estaría en un elemento <article>, posiblemente con uno o más elemenentos <sectio> dentro.
<section>: El elemento de sección genérica
Representa una sección genérica independiente de un documento, que no tiene un elemento semántico más específico para representarla. Suele definir una región con una temática clara, y su contenido empezará con un encabezado o título. Puede ser la sección de comentarios de un blog, la zona de anuncios de una página web o un recuadro con las últimas noticias publicadas.
<aside> laterales: Una barra lateral se utiliza para representar contenido que está indirectamente relacionado con el contenido principal del documento. Puede existir una barra lateral al lado izquierdo del contenido principal o en el lado derecho. Si se trata de un diseño web responsive, normalmente queda por debajo.
El tipo de contenido de esta zona puede ser muy diverso: enlaces de otros sitios relacionados, una lista de tweets de la cuenta de Twitter del sitio web, una lista con los artículos más leídos, o incluso una lista con todos los artículos relacionados de un curso.
Nota: Puede ir dentro o fuero del elemento <main>
<footer> pie de página:
El pie de página se encuentra en la parte inferior del documento, justo después del contenido principal. Al igual que sucede con la cabecera, se trata de una franja horizontal que ocupa todo el ancho de la ventana. Pero en este caso, va desde la esquina inferior izquierda hasta la esquina inferior derecha.
En general, esta zona contiene información acerca del sitio web o del autor, información referente a los derechos de autor y enlaces que apuntan a las páginas de temas legales. También se acostumbra a proveer datos de contacto, la ubicación física de la propiedad u otros enlaces que puedan guardar relación con la web.