Знакомство с формами / Подпись для поля ввода [4/18]
×

Подпись для поля ввода [4/18]

Можно подумать, что сделать подпись к полю очень просто. Пишем текст рядом с полем и всё готово:

Подпись <input type="text" name="username">

На самом деле этого недостаточно — мы получили просто кусок текста и поле, которые расположены рядом друг с другом, но логически никак не связаны.

Есть специальный тег, который позволяет смело сказать: «Этот кусок текста действительно подпись к этому полю!». Это парный тег <label>.

Он связывает текст и поле ввода логически. А ещё если щёлкнуть по тексту в такой подписи, то курсор переместится в соответствующее поле.

Создавать подписи к полям с помощью <label> — хороший приём. Используйте его.

Первый способ создать подпись — просто обернуть текст подписи и тег поля в тег <label>, вот так:

<label>
  Подпись <input type="text" name="username">
</label>

Надо отметить, что при оборачивании текста в тег <label> он визуально никак не меняется, ведь главная задача подписи — создать логическую связь.


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Подпись для поля ввода</title> </head> <body> <h1>Форма входа</h1> <form action="https://echo.htmlacademy.ru" method="post"> Ваш логин <input type="text" name="login"> <br><br>Другие поля </form> </body> </html>
CSS
h1 { font-size: 18px; }
HTML Academy
  1. Оберните подпись Ваш логин и текстовое поле внутрь тега label.

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

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

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

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

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

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