Теория
Теория

Связываем подпись и поле по id

Иногда обернуть поле и текст подписи в тег <label> нельзя. Например, когда они размещены в разных ячейках таблицы.

В этом случае можно связать подпись с полем с помощью атрибута id. Алгоритм такой:

Добавляем к полю ввода идентификатор с помощью атрибута id.
Оборачиваем текст подписи в тег <label>.
Добавляем тегу <label> атрибут for.
В атрибут for записываем такое же значение, что и в атрибуте id у поля.

Например:

<label for="user-field-id">Имя пользователя</label>
...
много-много других тегов
...
<input id="user-field-id" type="text" name="username">

index.html
style.css

HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Связываем подпись и поле по id</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Форма входа</h1> <form action="https://echo.htmlacademy.ru" method="post"> <table> <tr> <td> Ваш логин </td> <td> <input type="text" name="login"> </td> </tr> <tr> <td>Подпись</td> <td>Другое поле</td> </tr> <tr> <td></td> <td>Кнопка отправки</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; }

ЗадачиВыполнено

Добавьте к полю для ввода логина идентификатор login-field.
Оберните текст Ваш логин в тег <label>. Тег <label> должен оказаться внутри тега <td>.
Затем свяжите подпись с полем ввода логина с помощью атрибута for.

Не забудьте нажать на подпись, чтобы проверить, что поле активируется.

Связываем подпись и поле по id

Вход

Регистрация

Восстановление доступа