63. Метки в HTML формах - LABEL

В предыдущем уроке научились добавлять на HTML-страницу многострочное текстовое поле. В этом уроке поговорим про тег <label>.

Тег <label>, в переводе метка, устанавливает связь текста с элементом формы (<input>, <textarea>, <select>). Эта связь существует для изменения значения элемента нажатием на текст (метку <label>). Для большего понимания рассмотрим пример:

<input id = "name"><label for = "name">Текст</label>
<label><input type = "checkbox"> Текст</label> 

Как вы могли заметить, в первой строке мы указываем идентификатор id для связывания метки <label> с универсальным атрибутом <input>. Во втором примере нужный элемент формы помещаем внутрь тега <label>. Если не поняли, что означает «связаны», попробуйте кликнуть на слово Текст обоих примеров и посмотреть что произойдет.

В следующем примере, вы увидите, что метка срабатывает только для первого элемента.

<label>
    <input type = "checkbox">
    <input type = "checkbox">
    Текст
</label> 

В этом уроке разобрались с достаточно простым и полезным тегом <label>. В следующем уроке изучим раскрывающийся список <select>.

Похожие уроки Codebra

1. Добавьте универсальный тег <input> и сделайте из него флажок. id тега сделайте name
2. Добавьте текст и сделайте так, чтобы по нажатию на него (на добавленный текст), флажок срабатывал (который вы создали)

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.