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>
<html>
<head></head>
<body>
</body>
<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>
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>
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
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>
<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.