Como crear un formulario de registro (1/3)
Tags: html, formulario, dessarrollo, web
Published: 2021-12-05 22:39:11

Hola, voy a estar explicar algunas etiquetas que vamos a utilizar para crear un formulario y posteriormente maquetar además les dejaré los enlaces a la documentación al final del post junto con el link a la página con la cual hice las imágenes de los fragmentos de HTML5.
Para no alargar mucho el post lo he dividido en tres partes: 
* Explicación de las etiquetas con las cuales vamos a trabajar. 
* Como estructurar el formulario.
* Dar estilo con css

#Etiqueta: form
![Imagen con la etiqueta form y sus dos atributos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/arp8jmynd2564nojkbwx.png)
Esta primer etiqueta que veremos es un contenedor que define formalmente un formulario, me refiero a **form** como un contenedor que específica y delimita el formulario, pero también puede contener cualquier otro elemento como: imágenes, listas, títulos etc.
Como pueden ver en la imagen esta etiqueta posee dos atributos, **action** y **method**, estos son los más importantes, voy a explicarlos de forma simple, ya que no le vamos a dar un uso real en este ejemplo.
* **action:** Contiene el nombre del agente que procesará los datos remitidos al servidor (ejemplo: un script de PHP, Python u otro lenguaje orientado al backend).
* **method:** Define la manera de enviar los datos al servidor con los valores get y post.

#Etiqueta: label
![Etiqueta label con su atributo for](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qix3c0i5gn2nckjmgm9o.png)
Lo que hace esta etiqueta es bastante simple, pero importante para la accesibilidad, sirve para asociar un elemento con el atributo **for**, también puedes contenerlos dentro de la misma etiqueta para poder identificarlos fácilmente.
* **for:** Toma el **ID** como valor para poder estar asociado.

#Etiqueta: input
![Etiqueta input con su atributo type](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uk0trvphm53dn38lx6zj.png)
Lo que permite es crear un campo en el cual ingresas la información que este solicite, el comportamiento depende de los valores que se le otorguen al atributo **type**.
Dada la multiplicidad de valores que tiene **type** solo explicaré los que usaremos en el formulario, cabe aclarar que hay más valores, pero para simplificar este post no voy a explicarlos.
* **password:** Específico para contraseñas, ya que a la hora de escribir solo se verán puntos.
* **email:** Específico para direcciones de correo electrónico.
* **text:** Simplemente representa una entrada de texto normal. 

#Etiqueta: a
![Etiqueta a con su atributo href](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0rsjpvsivsozou5oqx60.png)
Lo que te permite esta etiqueta es crear un enlace a otras páginas, dentro o fuera del mismo sitio web, el atributo que  tiene es **href** y el valor que se le otorga es la dirección de alguna otra página.

#Etiqueta: button
![Etiqueta button con su atributo type](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bwe8dh2kveahro9d7p11.png)
El elemento button también tiene el atributo type y se le pueden otorgar tres valores:
* **submit:** que envía los datos del formulario por action de la etiqueta form.
* **reset:** restablece el formulario.
* **button:** lo que permite es crear botones personalizados  con JavaScript.

#Etiqueta: main
![Etiqueta main](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tb5uljag40a77jyjqwb5.png)
La etiqueta **<main>** lo que hace es representar el contenido principal del body, no debe ser un elemento descendiente de elementos que no permitan el **flow content**.
No tiene atributos propios, pero puede usar los globales.

#Etiqueta: p
![Etiqueta p](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/65t305degasnzslxtnt1.png)
Es una etiqueta que simplemente identifica un texto como párrafo y no posee atributos propios, su contenedor sería un bloque.

#Etiqueta: div
![Etiqueta div](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2giu99d7cxmgw383ny83.png)
<div> Es un contenedor genérico que es definido como un elemento en bloque, posee tres atributos propios, pero no los estaré explicando porque no los vamos a usar y simplemente se los mencionaré para que sepan que existen, básicamente son estos tres: **datasrc**, **datafld**, **dataformatas**, al final de este blog les dejaré los enlaces a la documentación para que puedan investigar por su cuenta.

#Etiqueta: img
![Etiqueta img con su atributo obligatorio src](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6j0byldw756v843nw115.png)
Esta etiqueta lo que hace es representar una imagen en el documento HTML y posee un atributo obligatorio llamado **src**, estaré explicando este y dos atributos más que usaremos para esta etiqueta, ya que son muy importantes para la accesibilidad.
* **src:** Este es un atributo obligatorio porque tiene como valor la ruta de la imagen.
* **alt:** Representa un texto alternativo en caso de que la imagen no llegue a cargarse por algún motivo.
* **title:** Es el título de la imagen y este se ve cuando posas el clic sobre la imagen.

***

Con estas etiquetas y sus respectivos atributos, podremos pasar a darle una estructura al formulario.
Espero que la explicación esté clara y si llega surgir alguna duda pueden comentarla y trataré de responder.

***

**parte 2:** [Como crear un formulario de registro (2/3)](https://dev.to/juan_duque/como-crear-un-formulario-de-registro-23-1mo7)
**Parte 3:** [Como crear un formulario de registro (3/3)](https://dev.to/juan_duque/como-crear-un-formulario-de-registro-33-11p9)

***

**Pueden seguirme en mis redes sociales por este enlace.**
* [Twitter](https://twitter.com/juan_ariasd)
* [Linktr](https://linktr.ee/Boudgnosis)

**Enlaces a la documentación de mozilla**
* [div](https://developer.mozilla.org/es/docs/Web/HTML/Element/div)
* [main](https://developer.mozilla.org/es/docs/Web/HTML/Element/main)
* [form](https://developer.mozilla.org/es/docs/Web/HTML/Element/form)
* [label](https://developer.mozilla.org/es/docs/Web/HTML/Element/label)
* [input](https://developer.mozilla.org/es/docs/Web/HTML/Element/input)
* [button](https://developer.mozilla.org/es/docs/Web/HTML/Element/button)
* [a](https://developer.mozilla.org/es/docs/Web/HTML/Element/a)
* [p](https://developer.mozilla.org/es/docs/Web/HTML/Element/p)
* [img](https://developer.mozilla.org/es/docs/Web/HTML/Element/img)

**Página para dejar fragmentos de código bonitos**
* [Carbon](https://carbon.now.sh/)