Подписи к полям (label)

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 18
Автор
Рек. время прохождения 3 минуты
Упражнений 7
Комментарии 0
Тренажер HTML
В этом блоке мы поработаем с подписями к полям формы. Зачем они вообще нужны? Тег `<label>` — это не просто текст рядом с полем ввода. Он играет ключевую роль в доступности (a11y) и удобстве использования ваших форм. Правильно связанная подпись позволяет пользователям кликать по тексту, чтобы активировать соответствующее поле (например, поставить курсор в текстовое поле или отметить чекбокс). Это особенно удобно на мобильных устройствах, где попасть пальцем в маленькое поле бывает сложно. Кроме того, программы для чтения с экрана (скринридеры) используют `<label>`, чтобы объявить, для чего предназначено то или иное поле. В этих заданиях мы пройдем путь от создания простой подписи до правильной её связи с различными элементами формы, чтобы сделать их понятными и удобными для всех.
Список тем

Создание базовой подписи

id: 37852_label-basic-tag

Давайте начнем с основ. У нас есть поле для ввода названия товара. Добавьте рядом с ним текстовую подпись «Название товара», используя для этого соответствующий семантический тег. Пока что она не будет связана с полем, но это первый и самый важный шаг.

CSS
body {
  font-family: sans-serif;
  background-color: #f4f4f9;
  padding: 15px;
}
.form-group {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
label {
  font-weight: bold;
  color: #333;
  margin-right: 10px;
}
input[type="text"] {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: calc(100% - 20px);
}
input[type="text"]:focus {
  outline: 2px solid #8A2BE2;
  border-color: #8A2BE2;
}
HTML
<div class="form-group">
  <input1>Название товара</input1>
  <input type="text" id="product_name">
</div>
Чтобы создать подпись для элемента формы, используется парный тег `<label>`. Просто оберните текст подписи в этот тег: <label>Текст</label>.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Атрибут для явной связи

id: 37852_label-for-attribute

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

CSS
body {
  font-family: sans-serif;
  background-color: #f4f4f9;
  padding: 15px;
}
.form-group {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
label {
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 5px;
}
input[type="text"] {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
}
input[type="text"]:focus {
  outline: 2px solid #8A2BE2;
  border-color: #8A2BE2;
}
HTML
<div class="form-group">
  <label input1="product_category">Категория товара</label>
  <input type="text" id="product_category">
</div>
Для явной связи подписи с элементом формы используется атрибут `for`. Его значение должно совпадать с `id` элемента, к которому он привязывается. Например: `<label for="some-id">`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Соединяем подпись и поле

id: 37852_label-match-for-id

Связь не будет работать, если значения атрибута `for` у подписи и `id` у поля не совпадают. В коде ниже допущена ошибка. Исправьте значение атрибута `for` так, чтобы оно в точности соответствовало `id` поля ввода. После этого клик по слову «Артикул» должен устанавливать курсор в поле.

CSS
body {
  font-family: sans-serif;
  background-color: #f4f4f9;
  padding: 15px;
}
.form-group {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
label {
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 5px;
}
input[type="text"] {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
}
input[type="text"]:focus {
  outline: 2px solid #8A2BE2;
  border-color: #8A2BE2;
}
HTML
<div class="form-group">
  <label for="input1">Артикул</label>
  <input type="text" id="product_sku">
</div>
Значение атрибута `for` у тега `<label>` должно быть таким же, как и значение атрибута `id` у связываемого элемента `<input>`. В данном случае, это `product_sku`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Добавление id к полю

id: 37852_label-add-id-to-input

Теперь обратная задача. У нас есть подпись с правильно настроенным атрибутом `for`, но у самого поля ввода отсутствует необходимый для связи атрибут. Добавьте к тегу `<input>` недостающий атрибут с правильным значением, чтобы связь заработала.

CSS
body {
  font-family: sans-serif;
  background-color: #f4f4f9;
  padding: 15px;
}
.form-group {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
label {
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 5px;
}
input[type="text"] {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
}
input[type="text"]:focus {
  outline: 2px solid #8A2BE2;
  border-color: #8A2BE2;
}
HTML
<div class="form-group">
  <label for="product_rating">Оценка (1-5)</label>
  <input type="text" input1="product_rating">
</div>
Чтобы тег `<label>` мог найти свой элемент с помощью атрибута `for`, у этого элемента должен быть атрибут `id`. Его значение должно совпадать со значением `for`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Неявная связь через вложенность

id: 37852_label-implicit-wrapping

Существует и другой способ связать подпись и поле, без использования `for` и `id`. Этот метод называется неявной связью. Чтобы его применить, просто поместите элемент ввода *внутрь* тега подписи. Завершите создание такой конструкции.

CSS
body {
  font-family: sans-serif;
  background-color: #f4f4f9;
  padding: 15px;
}
.form-group {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
label {
  font-weight: normal;
  color: #333;
  cursor: pointer;
}
input[type="checkbox"] {
  margin-right: 8px;
  vertical-align: middle;
}
HTML
<div class="form-group">
  <input1>
    <input type="checkbox"> Я принимаю условия использования
  </input2>
</div>
Просто оберните чекбокс и его текстовое описание в парный тег `<label>`. Открывающий тег `<label>` должен быть перед `<input>`, а закрывающий `</label>` — после текста.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Подпись для чекбокса

id: 37852_label-for-checkbox

Чекбоксы — яркий пример того, как подписи улучшают пользовательский опыт. Без них пришлось бы целиться в маленький квадратик. Свяжите подпись с чекбоксом, чтобы по клику на текст «Включить уведомления» галочка также устанавливалась или снималась.

CSS
body {
  font-family: sans-serif;
  background-color: #f4f4f9;
  padding: 15px;
}
.form-group {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
label {
  cursor: pointer; /* Показывает, что на текст можно нажать */
}
input[type="checkbox"] {
  margin-right: 8px;
}
HTML
<div class="form-group">
  <input type="checkbox" id="enable_notifications">
  <label input1="input2">Включить уведомления</label>
</div>
Используйте явную связь. Добавьте к тегу `<label>` атрибут `for` со значением, которое совпадает с `id` чекбокса, — `enable_notifications`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Подписи для группы переключателей

id: 37852_label-for-radio-group

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

CSS
body {
  font-family: sans-serif;
  background-color: #f4f4f9;
  padding: 15px;
}
.form-group {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.radio-option {
  margin-bottom: 10px;
}
label {
  cursor: pointer;
}
input[type="radio"] {
  margin-right: 5px;
}
HTML
<div class="form-group">
  <p><b>Способ доставки:</b></p>
  <div class="radio-option">
    <input type="radio" name="delivery" value="courier" id="del_courier">
    <input1 for="del_courier">Курьером</input1>
  </div>
  <div class="radio-option">
    <input type="radio" name="delivery" value="pickup" id="del_pickup">
    <label for="input2">Самовывоз</label>
  </div>
</div>
Первой опции не хватает тега `<label>`. Её нужно обернуть в этот тег. У второй опции подпись есть, но её атрибут `for` пуст. Ему нужно присвоить значение, равное `id` второго `<input>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру