Qué es la etiqueta Label, como utilizarla y 3 ejemplos
La etiqueta <label> es una etiqueta HTML que forma parte del grupo de elementos de formulario. Estos elementos se usan para crear controles interactivos para el envío de datos al servidor. La etiqueta <label> se usa para crear un texto que identifica o explica el propósito de un control de formulario. Por ejemplo, si queremos crear un campo para que el usuario introduzca su nombre, podemos usar la etiqueta <label> así:
El resultado sería:
La etiqueta <label> se puede asociar con un control de formulario de dos formas:
Usando el atributo for, que indica el id del control al que se refiere la etiqueta.
Anidando el control dentro de la etiqueta <label>.
La ventaja de usar la etiqueta <label> es que permite al usuario interactuar con el control haciendo clic en el texto de la etiqueta, además de en el propio control. Esto facilita la selección de los controles, especialmente cuando son pequeños o están muy juntos.
¿Cómo se usa la etiqueta <label>?
La etiqueta <label> tiene la siguiente sintaxis:
<code> <label for=“id”>texto</label> </code>
O bien:
<code> <label>texto <input type=“tipo” id=“id” name=“nombre”> </label> </code>
Donde los atributos y el contenido son:
- for: el id del control de formulario al que se asocia la etiqueta. Debe coincidir con el atributo id del control.
- texto: el contenido de la etiqueta, que debe ser una descripción breve y clara del control.
- input: el elemento que representa el control de formulario, que puede ser de varios tipos, como text, checkbox, radio, etc.
- id: el identificador único del control, que debe coincidir con el atributo for de la etiqueta.
- name: el nombre del control, que se usa para enviar los datos al servidor.
La etiqueta <label> admite todos los atributos HTML globales, así como los atributos de evento. Además, se pueden usar los siguientes atributos específicos:
- form: el id del formulario al que pertenece el control. Esto permite asociar el control a un formulario, aunque no sea un descendiente directo del mismo.
- accesskey: una tecla de acceso rápido para activar el control desde el teclado.
Ejemplos
Aquí tienes tres ejemplos de cómo usar la etiqueta <label> en HTML:
Para crear un formulario de registro con varios campos de entrada, puedes usar la etiqueta <label> así:
<code> <form action=“registro.php” method=“post”> <p><label for=“nombre”>Nombre:</label> <input type=“text” id=“nombre” name=“nombre” required></p> <p><label for=“email”>Email:</label> <input type=“email” id=“email” name=“email” required></p> <p><label for=“password”>Contraseña:</label> <input type=“password” id=“password” name=“password” required></p> <p><input type=“submit” value=“Registrarse”></p> </form> </code>Resultado:
Para crear un formulario de encuesta con varias opciones, puedes usar la etiqueta <label> así:
<code> <form action=“encuesta.php” method=“post”> <p>¿Qué te parece nuestro sitio web?</p> <p><label><input type=“radio” name=“opinion” value=“excelente”> Excelente</label></p> <p><label><input type=“radio” name=“opinion” value=“bueno”> Bueno</label></p> <p><label><input type=“radio” name=“opinion” value=“regular”> Regular</label></p> <p><label><input type=“radio” name=“opinion” value=“malo”> Malo</label></p> <p><input type=“submit” value=“Enviar”></p> </form> </code>Resultado:
Para crear un formulario de contacto con un campo de texto y un botón, puedes usar la etiqueta <label> así:
<code> <form action=“contacto.php” method=“post”> <p><label for=“mensaje”>Escribe tu mensaje:</label></p> <p><textarea id=“mensaje” name=“mensaje” rows=“10” cols=“50”></textarea></p> <p><input type=“submit” value=“Enviar”></p> </form> </code>Resultado:
