Знакомство с формами / Связываем подпись и поле по id [5/18]
×

Связываем подпись и поле по id [5/18]

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

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

  1. Добавляем к полю ввода идентификатор с помощью атрибута id.

  2. Оборачиваем текст подписи в тег <label>.

  3. Добавляем тегу <label> атрибут for.

  4. В атрибут for записываем такое же значение, что и в атрибуте id у поля.

Например:

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

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Связываем подпись и поле по id</title> </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 #ccc; } tr:nth-child(n+2) { color: #ccc; }
HTML Academy
  1. Добавьте к полю для ввода логина идентификатор login-field.
  2. Оберните текст Ваш логин в тег label. Тег label должен оказаться внутри тега td.
  3. Затем свяжите подпись с полем ввода логина с помощью атрибута for.

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

Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.