domingo, 20 de julio de 2014

Etiquetas y controles HTML y HTML 5



Es importante resaltar que HTML ha evolucionado a lo que actualmente se conoce como HTML 5. Este incorpora nuevas etiquetas que son necesarias en un mundo moderno lleno de dispositivos móviles con diferentes resoluciones de pantallas y con nuevas capacidades.

HTML 5 todavía está desarrollándose y no se ha establecido un completo estándar para todos los navegadores, por lo que algunas etiquetas pueden que funcionen en algunos y en otros no. Sin embargo, HTML 5 es la tendencia y los navegadores famosos ya procesan muchas de sus etiquetas.
Una estructura básica de un documento HTML sería el siguiente:

<!DOCTYPE html>
<html>
<head></head>
<body>
</body>
</html>

Todo documento HTML 5 comienza con la etiqueta <!DOCTYPE html>. Esto nos da la posibilidad de usar etiquetas HTML 5 en nuestras páginas.
El resto de etiquetas están conformadas con una etiqueta de apertura y una de cierre: 

Etiqueta de apertura: <nombre_etiqueta>
Etiqueta de cierre: </nombre_etiqueta>

La diferencia está en que la etiqueta de cierre tiene una / al inicio. Sin embargo, es posible cerrar una etiqueta en su apertura, poniendo la / al final:
<nombre_etiqueta />

Todo va en dependencia de lo que la etiqueta permite y como la queremos estructurar.

<html></html> Esta etiqueta contendrá a las demás etiquetas y determina el contenedor global para todo el documento HTML.

<head></head> Define la cabecera del documento HTML. Esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario como, por ejemplo, el título de la ventana del navegador, enlaces a archivos de hojas de estilos o de javascript, etc.

<body></body> Define el contenido principal o cuerpo del documento. Esta es la parte del documento HTML que se muestra en el navegador. Dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes, etc.

Podemos ver un ejemplo en la página de w3schools:


Usaremos esta página (w3schools), porque nos permite ejecutar código HTML en el editor que proporcionan, entonces nos saldrá más fácil probar los ejemplos.

Ahora, vamos a ver los formularios y controles en HTML y HTML 5. 

Etiqueta FORM

<form></form>

Esta etiqueta crea un formulario HTML, el cual es usado para enviar datos al servidor, es decir, todo lo que el usuario digitó en los controles que contiene el formulario se pueden enviar al servidor. 

Un formulario HTML puede contener controles de entrada como cajas de texto, combos, listas, botones y más.

Etiqueta INPUT

El más importante elemento en un formulario es la etiqueta input. Este puede variar de diferentes maneras, dependiendo del atributo type. Un atributo en una etiqueta se define en su etiqueta de apertura y su valor puede variar tanto la presentación como la funcionalidad de la etiqueta que lo contiene. En este caso el atributo type indicará el control que se mostrará en la página.

Campo de Texto

<form>
Nombre: <input id="txtNombre" type="text" />
</form>

Esto crea una caja de texto en nuestra página. La etiqueta form no es visible.


Campo de Contraseña

<form>
Password: <input id="txtContrasena" type="password" />
</form>

Esto crea un campo para contraseña. Lo que se digite estará enmascarado con asteriscos o círculos. 

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_inputpassword

Botón Submit

<form name="input" action="demo_form_action.asp" method="get">
<input id="btnEntrar" type="submit" value="Entrar" />
</form>

Esto crea un botón submit, el cual es el encargado de ejecutar la acción de enviar los datos al servidor y es usado junto con el formulario. Los datos son enviados a la página indicada en el atributo action del formulario. El otro atributo method indica la manera cómo serán enviados los datos. Sus valores posibles son get y post.

El valor "get" indica que los datos enviados se adjuntarán en la barra de direcciones del cliente, al final de la url (dirección de la página) correspondiente y después de un signo de interrogación de cierre. Si se envía más de un dato, éstos irán separados por el símbolo &.

Un ejemplo de un formulario enviado por el method="get" sería el siguiente: http://www.test.com?nombre1=valor1&nombre2=valor2

Todo valor digitado será visible en la barra de direcciones del navegador.

El valor "post" indica que el método de envío no se hará a través de la url, sino formando parte del cuerpo de la petición y no será visible para nadie.


No hay comentarios:

Publicar un comentario

Nota: solo los miembros de este blog pueden publicar comentarios.