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
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
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
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
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
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
La etiqueta 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
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: img
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)
Parte 3: Como crear un formulario de registro (3/3)
Pueden seguirme en mis redes sociales por este enlace.
Enlaces a la documentación de mozilla
Página para dejar fragmentos de código bonitos
Top comments (0)