Элемент label

Элемент <label> связывает текст с определённым элементом формы. Обычно применяется в следующих случаях.

  • Текст становится активным и при щелчке по нему изменяется значение связанного с текстом переключателя или флажка. Это удобно для пользователя, потому что не приходится целиться курсором в небольшой по размерам элемент.
  • Стили для <label> позволяют задать положение текста и другие характеристики оформления.

Простой вариант использования заключается в добавлении полей формы прямо внутрь <label> с желаемым текстом, как показано в примере 1.

Пример 1. Использование <label>

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Формы</title> </head> <body> <form> <p>Выберите желаемое состояние:</p> <p><label><input type="radio" name="psi"> Импритинг</label></p> <p><label><input type="radio" name="psi"> Реимпритинг</label></p> </form> </body> </html>

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

Поля формы и текст для них могут визуально находиться рядом, но в коде документа располагаться внутри разных элементов. Чтобы связать их между собой применяется атрибут for, его значением выступает идентификатор у <input>, как показано в примере 2.

Пример 2. Атрибут for

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Формы</title> <style> table { border-collapse: collapse; /* Убираем двойные линии*/ } td { border: 1px solid #ccc; /* Параметры рамки */ padding: 4px; /* Поля в ячейках */ } </style> </head> <body> <form> <table> <tr> <th>#</th> <th>Работа со временем</th> </tr> <tr> <td><input type="checkbox" value="t1" id="t1"></td> <td><label for="t1">Создание пунктуальности (никогда не будете никуда опаздывать).</label></td> </tr> <tr> <td><input type="checkbox" value="t2" id="t2"></td> <td><label for="t2">Излечение от пунктуальности (никогда никуда не будете торопиться).</label></td> </tr> <tr> <td><input type="checkbox" value="t3" id="t3"></td> <td><label for="t3">Изменение восприятия времени.</label></td> </tr> </table> </form> </body> </html>

Для каждого элемента <input> задаём свой уникальный идентификатор через атрибут id, а внутри элемента <label> указываем этот же идентификатор как значение атрибута for.

Также <label> применяется как один из элементов для вёрстки сложных форм. В примере 3 показана форма авторизации, в которой текст располагается рядом с полями для ввода логина и пароля.

Пример 3. Форма для авторизации

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Форма</title> <style> #textField, #passField { width: 300px; /* Ширина поля */ padding: 10px; /* Поля */ box-shadow: inset 0 1px 5px rgba(0,0,0,0.2); /* Тень внутри */ border: 1px solid #ccc; /* Параметры рамки */ color: #ff6d37; /* Цвет текста */ background: url(/example/image/user.png) no-repeat 5px 50%; /* Картинка пользователя */ padding-left: 30px; /* Расстояние от левого края */ } #passField { background: url(/example/image/lock.png) no-repeat 5px 50%; /* Картинка для поля с паролем */ } label { width: 100px; /* Ширина */ text-align: right; /* Выравниваем по правому краю */ float: left; /* Выстраиваем элементы рядом */ margin-right: 10px; /* Расстояние от текста до текстового поля */ line-height: 30px; /* Выравниваем по высоте */ } .submitField { margin-left: 110px; /* Сдвигаем вправо под поля */ } </style> </head> <body> <form action="handler.php"> <p><label for="textField">Логин:</label> <input maxlength="25" name="login" id="textField"></p> <p><label for="passField">Пароль:</label> <input type="password" maxlength="25" name="password" id="passField"></p> <p><input type="submit" value="Войти" class="submitField"></p> </form> </body> </html>

Результат данного примера показан на рис. 1.

Форма для авторизации пользователя

Рис. 1. Форма для авторизации пользователя

Автор: Влад Мержевич
Последнее изменение: 15.02.2024