Aquí aprenderás a usar dos elementos cruciales en cualquier página web: las etiquetas label e input en HTML. La asociación de un label con un input (u otro elemento de control de formulario) es lo que permite a los usuarios saber exactamente qué información se espera en cada campo. Además, mejora la experiencia de usuario, ya que al hacer clic sobre el texto del label se activa el campo de entrada asociado.
La asociación entre las etiquetas label e input se realiza mediante el atributo for en la etiqueta label, que debe tener el mismo valor que el atributo id del input. Si quieres seguir aprendiendo, continúa la lectura.
Empezar con formularios con el elemento label
Antes de ver cómo funcionan las etiquetas label e input juntas, vamos a ver en qué consiste cada una de ellas. El primer elemento con el que vamos a trabajar es label. La etiqueta label es uno de los pilares de cualquier formulario en el desarrollo web. Representa una etiqueta que le proporciona una descripción textual a un control de formulario, normalmente a través del texto encerrado dentro de la etiqueta.
<label>Texto descriptivo</label>
Lo interesante de esta etiqueta es su capacidad para asociarse a otros elementos, específicamente a input. ¿Cómo logramos esta asociación? Pues utilizando el atributo for.
<label for="email">Email:</label> <input type="text" id="email" name="email">
Con el atributo for, vinculamos la etiqueta label a un input específico mediante el id del input. Aquí, la etiqueta label se ha asociado con el input de id «email». Esta asociación es especialmente útil para mejorar la accesibilidad de nuestras páginas web.
Uso del elemento input
Tras conocer la etiqueta label, el siguiente paso es hablar sobre el elemento input. Este es probablemente el primer elemento que te viene a la mente cuando piensas en formularios; con razón, porque input es la auténtica estrella del espectáculo.
<input type="text" id="nombre" name="nombre">
Las etiquetas input son extremadamente versátiles. Existen dos formas de usar input: sin ningún atributo, que por defecto se considera de tipo texto, o con el atributo type, que define qué tipo de entrada de datos se espera.
<input type="password" id="password" name="password">
Aquí, el tipo de input se ha definido como «password». Cuando escribes en este tipo de campo, los caracteres que introduces se ocultan automáticamente, como ocurre cuando introduces tu contraseña en un formulario de inicio de sesión.
La unión de las etiquestas label e input
¿Recuerdas cómo asociamos el elemento label con input usando el atributo for? Esto mejora la usabilidad del formulario, ya que hacer clic en el label activará el input asociado. Imagina que tenemos un formulario de registro y queremos que el usuario introduzca su email. Aquí es donde las etiquetas label e input se unen.
<label for="email">Email:</label> <input type="text" id="email" name="email">
Cuando el usuario haga clic en «Email:», el cursor se posicionará automáticamente en el campo input asociado, listo para que el usuario empiece a escribir. Esta es una pequeña mejora en la experiencia de usuario que puede tener un gran impacto en la facilidad de uso de tus formularios al usar las etiquetas label e input en HTML.
La belleza de los atributos HTML
Hemos mencionado los atributos for, type, id y name. Estos son solo la punta del iceberg de lo que puedes hacer con los atributos HTML. Hay muchos otros atributos globales que puedes usar para mejorar tus formularios, como placeholder, required o value, entre otros.
<input type="text" id="nombre" name="nombre" placeholder="Introduce tu nombre" required>
En el ejemplo anterior, el atributo placeholder ofrece una pista sobre lo que el usuario debe introducir en el campo input, mientras que required indica que el campo debe llenarse antes de enviar el formulario.
En definitiva, las etiquetas label e input son los cimientos de cualquier formulario en HTML. Al entender cómo funcionan y cómo pueden interactuar entre sí, puedes crear formularios más efectivos y amigables para el usuario.
Da el salto con KeepCoding
¿Te ha gustado todo lo que has aprendido sobre las etiquetas label e input? Esto es solo una mínima parte de lo que podrías aprender en nuestro Desarrollo Web Full Stack Bootcamp. La industria tecnológica está hambrienta de profesionales capacitados y, al finalizar nuestra formación íntegra e intensiva, estarás listo para unirte a un sector que ofrece salarios altos y buenas condiciones. No se trata solo de aprender a programar, se trata de un cambio de vida. ¡Te esperamos en KeepCoding!
