Estructura de los formularios en HTML5

Seguro que el que más y el que menos ha utilizado en algún momento de su vida, un formulario web. Ya sea para registrarse en alguna web, suscribirse a algún newsletter o a introducido sus datos en algún sistema para comprar en una tienda online. Pues en este tercer modulo del Curso de HTML5 desde 0, vamos a aprender a crear formularios con HTML5.

Para ello, vamos a empezar a conocer las etiquetas y atributos necesarios para construir un formulario con HTML5. Como ya sabéis todavía no estamos tocando CSS3, sería inútil sin los conocimientos de HTML5 que estamos adquiriendo en este curso. Cuando terminemos con HTML5 nos pondremos a darle caña a CSS3, no desesperéis.

La etiqueta <form>

La etiqueta <form> es la que va a generar la apertura de los formularios y contiene todos los campos a rellenar. Su sintaxis es la siguiente:

<form action="nombre_del_archivo" method="get/post"></form>

Los campos de formularios no tienen que estar necesariamente dentro de la etiqueta <form>. Hay ciertas propiedades donde nosotros podemos colocar campos que estén fuera de la etiqueta <form>. Esto se hace a través de unos atributos, donde indicamos, que ese campo pertenece a ese formulario.

Los atributos de la etiqueta <form>

• action="" : Dentro vamos a colocar la url del script que se va a encargar de procesar la información de nuestro formulario, action="nombre_del_archivo". Cuando el usuario haga clic en enviar, los datos van a ser enviados a un script, que puede ser un archivo PHP, ASP, CGI o cualquier script valido que un servidor web soporte.


• method="" : Este contiene dos valores, get y post, en el 99% de los casos vamos a usar post. Cuando usemos get, los datos se van a mostrar en la barra de direcciones. Los datos serán enviados a través de la url.

La etiqueta <input>

La etiqueta <input> se usa para crear controles interactivos para formularios basados en la web, que reciban datos del usuario. La forma en que <input> funciona varía considerablemente dependiendo del valor de su atributo type. Para los menos entendidos, esta etiqueta no necesita etiqueta de cierre, así que, eso que nos ahorramos a la hora de escribir codigo.

Los atributos de la etiqueta <input>

• type="" : Es el atributo principal y es el que determina que campo se va a generar. Su valor predeterminado es text, si no se especifica este atributo.


• value="" : Indica el valor predeterminado con el que se va a cargar el campo. Es el que nos indica que debemos rellenar por ejemplo, nombre, apellidos, correo electrónico, etc.


• name="" : Hace que el script consiga los datos que se han rellenado en los campos.


• size="" : Donde podremos definir el tamaño del campo. Aunque lo recomendable es hacerlo aplicando estilos CSS.


• maxlength="" : Donde vamos a definir la cantidad de caracteres que se pueden ingresar en este campo.

<form action="nombre_del_archivo" method="post">
Ingrese su nombre: <input type="text" name="nombre" size="30" maxlength="2">
</form>

Etiquetado semántico de campos con <label>

Creo que os he hablado en numerosas ocasiones de lo importante que es el etiquetado semántico en un sitio web. Bueno, pues la etiqueta <label> nos ayuda a describir el propósito de un campo en el formulario, que es muy importante en cuanto a rastreadores, aunque pueda no parecerlo.

Para conseguir esto, el primer paso es agregarle un id al campo, en este caso al <input>. Colocamos el id después del atributo name="", y como en este caso name="" contiene entre comillas "nombre", el id también contendrá entre comillas "nombre" para evitar posibles confusiones.

Para que <label> quede enlazada con <input> colocamos el id del campo que queremos asociar a esta etiqueta. En este caso el id es "nombre", es decir que dentro de for="" escribiremos "nombre". Lo vemos en el siguiente ejemplo:

<form action="nombre_del_archivo" method="post">
<label for="nombre">Ingrese su nombre</<label>
<input type="text" name="nombre" size="30" maxlength="2">
</form>

Vista en el navegador Google Chrome

Conclusiones

Hemos aprendido en esta clase a definir la etiqueta <form>, la etiqueta <input>, la etiqueta <label> y además sus atributos correspondientes. Si, ya lo se, se que estas etiquetas tienen más atributos aparte de los que hemos aprendido hoy. Pero no vas a necesitar más información al respecto para poder crear formularios con HTML5 y vas a poder comprobarlo si sigues este curso al completo..

Me despido hasta la próxima clase del curso de HTML5 desde cero, donde seguiremos aprendiendo a crear formularios. Os recuerdo que justo debajo, tenéis el listado de las clases que llevamos hasta la fecha. Me gustaría que compartieses esta publicación con tus amigos, nos regales un me gusta en la página de Facebook y si te apetece únete a la comunidad de Facebook.

Prohibida la distribución de este articulo incluyendo las imágenes,
sin la autorización del autor. Todos los derechos reservados ©2018