Teoría
Teoría

Asociar una etiqueta y un campo mediante id

A veces no se puede envolver el campo y el texto de su etiqueta en <label>. Por ejemplo, cuando están en distintas celdas de una tabla.

En ese caso, puedes asociar la etiqueta con el campo mediante el atributo id. Estos son los pasos:

Agregamos un identificador al campo mediante el atributo id.
Envolvemos el texto de la etiqueta en <label>.
Agregamos el atributo for a <label>.
Asignamos a for el mismo valor que tiene el atributo id del campo.

Por ejemplo:

<label for="user-field-id">Nombre de usuario</label>
...
muchas otras etiquetas
...
<input id="user-field-id" type="text" name="username">

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Asociar una etiqueta y un campo mediante id</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Iniciar sesión</h1> <form action="https://echo.htmlacademy.ru/courses" method="post"> <table> <tr> <td> Tu nombre de usuario </td> <td> <input type="text" name="login"> </td> </tr> <tr> <td>Etiqueta</td> <td>Otro campo</td> </tr> <tr> <td></td> <td>Botón de envío</td> </tr> </table> </form> </body> </html>

CSS

table { border-collapse: collapse; } td { padding: 10px; border: 1px solid #cccccc; } tr:nth-child(n+2) { color: #cccccc; }

ObjetivosRealizado

Agrega al campo del nombre de usuario el identificador login-field.
Envuelve el texto Tu nombre de usuario en la etiqueta <label>. La etiqueta <label> debe quedar dentro de <td>.
Asocia la etiqueta con el campo del nombre de usuario mediante el atributo for.

Haz clic en la etiqueta para comprobar que el campo se activa.