La etiqueta <label> en HTML se usa para proporcionar una mejora de usabilidad para los usuarios de mouse, es decir, si un usuario hace clic en el texto dentro del elemento <label>, cambia el control. La etiqueta <label> define la etiqueta para el elemento <button>, <input>, <meter>, <output>, <progress>, <select> o <textarea>.
La etiqueta <label> se puede utilizar de dos formas:
- En primer lugar, use la etiqueta <label> proporcionando el <input> y el atributo id. La etiqueta <label> necesita un atributo for cuyo valor sea el mismo que el ID de entrada.
- Alternativamente, la etiqueta <input> se usa directamente dentro de la etiqueta <label>. En este caso, los atributos for e id no son necesarios porque la asociación es implícita.
Sintaxis:
<label> form content... </label>
Valor de atributo:
- for : Se refiere al control de entrada para el que es esta etiqueta. Su valor debe ser el mismo que el valor del atributo «id» del control de entrada.
- form : Hace referencia a la forma a la que pertenece la etiqueta.
Ejemplo 1: aquí usaremos la etiqueta de entrada fuera de la etiqueta de la etiqueta.
html
<!DOCTYPE html> <html> <body> <h1>GeeksforGeeks</h1> <strong>HTML label Tag</strong> <form> <!-- Starts label tags from here --> <label for="student"> Student </label> <input type="radio" name="Occupation" id="student" value="student"><br> <label for="business"> Business </label> <input type="radio" name="Occupation" id="business" value="business"><br> <label for="other"> Other </label> <!-- Ends label tags here --> <input type="radio" name="Occupation" id="other" value="other"> </form> </body> </html>
Producción:
Ejemplo 2: aquí usaremos la etiqueta de entrada dentro de la etiqueta de nivel.
html
<!DOCTYPE html> <html> <body> <h1>GeeksforGeeks</h1> <strong>HTML label Tag </strong> <form> <!-- label tag starts from here --> <label> Male <input type="radio" name="gender" id="male" value="male" /> </label><br/> <label> Female <input type="radio" name="gender" id="female" value="female" /> </label><br/> <label> Other <input type="radio" name="gender" id="other" value="other" /> </label> <!-- label tag ends from here --> </form> </body> </html>
Producción:
Navegadores compatibles:
- Google Chrome
- Borde 12
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA