Atributos especiales de las etiquetas para mejorar el funcionamiento de nuestros formularios

Los formularios de nuestras páginas web se componen principalmente de labels para indicarle a los usuarios qué datos van a llenar, los inputs son los espacios donde pueden llenar estos datos y los botones son para enviar el formulario (o cualquier otra cosa, por ejemplo hacer reset).

¿Te has preguntado por qué usamos labels y no cualquier otra etiqueta? ¿Que tienen de especial los labels?

Los labels no son como otras etiquetas que solo guardan y muestran el texto con los diferentes estilos que definamos en el CSS. Los labels están especialmente preparados y optimizados para que nuestros formularios funcionen correctamente.

Atributos para asociar labels a sus respectivos inputs

Seguramente has llenado miles de formularios desde tu computadora sin problemas. Pero la probabilidad de que tengas un mal rato cuando te encuentras con un formulario desde tu celular es muy alta. Por ser dispositivos mucho más pequeños es mucho más difícil atinarle al input correcto para empezar a escribir los datos que nos pide el formulario.

De hecho, suele pasar que, debido a todos estos problemas, terminamos abandonando esa página web y nos olvidamos de ella para siempre. Nuestra tarea es evitar este tipo de problemas a toda costa.

Solucionar esto es muy fácil. Vamos a crear la funcionalidad de que, al tocar el label que corresponde a cada input, la página reaccione como si hubiéramos hecho click directamente en el input.

Hay dos formas de hacerlo:

Primera forma: Podemos encerrar nuestros inputs dentro de sus respectivos labels:

<label>
Nombre:
<input type=”text” />
</label>

<label>
Edad:
<input type=”number” />
</label>

Segunda forma: Sólo debemos añadir un par de atributos a los elementos de nuestro formulario:

• Añadimos el atributo id en la etiqueta input y le damos un valor, recuerda que el valor de nuestros IDs deben ser únicos e irrepetibles para evitar problemas en nuestra página web.
• Añadimos el atributo for en la etiqueta label con el valor del id del input que queremos enlazar.

<label for=”nombre”>Nombre:</label>
<input type=”text” id=”nombre” />

<label for=”edad”>Edad:</label>
<input type=”number” id=”edad” />

Atributos para enviar los datos de nuestros formularios

El objetivo de los formularios es enviar y almacenar los datos de nuestros usuarios en algún sitio, ¿verdad?

La forma de hacerlo es mucho más fácil de lo que crees. Solo debemos añadir algunos atributos en la etiqueta <form> y en los inputs y botones de nuestro formulario.

• Action: Este atributo de la etiqueta <form> nos permite establecer el lugar o URL donde los datos de los usuarios deben ser enviados una vez ellos terminen de llenar el formulario.
• Name: Este atributo de las etiquetas <input> nos permite que los datos que los usuarios hayan escrito se envíen correctamente cuando han terminado de llenar el formulario. El valor de esta etiqueta debe indicar el nombre con el cual queremos almacenar o interactuar con esta información en el futuro.
• Type: El atributo type=”submit” le permite a los usuarios indicar que han terminado de llenar el formulario y lo pueden enviar para almacenar la información. También podemos usar este atributo en inputs para que estos pasen a tener el rol de botón de envío del formulario.

<form action=”URL_DONDE_QUIERO_ENVIAR_LO_DATOS”>
  <label for=”nombre”>Nombre:</label>
  <input type=”text” id=”nombre” name=”user_name” />

  <label for=“edad“>Edad:</label>
  <input type=”number” id=”edad” name=”user_age” />

  <button type=”submit”>Enviar mis datos</button>
</form>

Si pruebas este mismo formulario vas a ver que, al enviarlo, la página se dirige a la URL que indicaste en el atributo action de la etiqueta form. Pero es no es todo, fijate bien en la URL y veras que los datos de tus usuarios están escondidos por ahí:

?user_name=JUAN&user_age=123

¡Si tienes este mismo resultado significa que has tenido éxito!

Recuerda que si quieres almacenar estos datos en algún lugar como una base de datos puedes aprender un poco de Backend, APIs REST, CRUD y hacer todas las configuraciones necesarias.

Si tienes alguna duda puedes dejarla en los comentarios.