Ejemplo de uso del elemento "label" y del atributo for en HTML

Ejemplo explicado en el apartado "Formularios" del tutorial de HTML.

"uso-elemento-label-y-atributo-for.html"

<!DOCTYPE html>
<html lang="es-ES">
  <head>
    <meta charset="utf-8">
    <title>Ejemplo uso del elemento label y del atributo for</title>
  </head>
  <body>
    <form action="procesar-datos.php" method="post">
      <label for="nombre_usuario">Usuario: </label>
      <input type="text" name="usuario" id="nombre_usuario">
      <br><br>
      <label for="clave_usuario">Contraseña: </label>
      <input type="password" name="clave" id="clave_usuario">
      <br><br>
      <input type="submit" value="Enviar datos">
    </form>
  </body>
</html>

Visualización en pantalla

Visualización del archivo uso-elemento-label-y-atributo-for.html en Google Chrome, donde se han definido dos elementos label con atributos for.

Practicar el código del ejemplo

Editar en CodePen