Чат веб-разработчиков
Подписи к полям ввода: тег label

Как правильно сделать подписи к полям ввода

С одной стороны, может показаться, что подпись к полю делать легче легкого. Что если написать код, который приведен ниже, то это даст нужный результат.

Код доступен только после покупки курса HTML для начинающих.

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

Чтобы текст стал действительно подписью к полю, следует задействовать для этого парный тег <label>.

Именно он осуществляет логическую связь между текстом и полем ввода. И если вы клацнете по такой подписи мышкой, то курсор автоматически разместится в соответствующем поле. Поэтому решать данную задачу нужно с помощью <label>.

Чтобы все было корректно, текст подписи и тег поля должны присутствовать внутри тега <label>. На практике это выглядит вот так:

Код доступен только после покупки курса HTML для начинающих.

Результат в браузере:
Форма с подписями к полям

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

Связываем подпись и поле по id

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

Каким образом в такой ситуации привязать подпись к конкретному полю? В этом нам поможет атрибут id, или по-другому - идентификатор поля ввода. Следует запомнить следующее правило: идентификатор обязательно следует делать уникальным. При этом, он должен быть таковым не только в рамках формы, но и в пределах всей страницы.

Как правило, применяется идентификатор для того, чтобы работа с формой была более удобной. Например, речь может идти про создание подписей, которые относятся к небольшим полям. А вот если нажать на такую подпись левой кнопкой мышки, то связанное поле станет активным. Если имя поля передается на сервер, то идентификатор – нет. Но, тем не менее, идентификатор должен отличаться от имени поля. Порядок действий будет следующий:

  1. Поле ввода снабжаем идентификатором посредством атрибута id.
  2. Текст, который должен быть в подписи, берем в тег <label>.
  3. Тегу <label> приписываем атрибут for.
  4. А атрибуту for придаем значение аналогичное тому, которое прописано в атрибуте id у поля.

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

Код доступен только после покупки курса HTML для начинающих.

Понимаю, может быть немного сложно - спрашивайте в комментариях, это курс для новичков, не стесняйтесь.

Читайте также
Комментарии


trialex3
trialex3

Не понял. Конкретно вот эту строчку где прописывать? <label for="loginField">Логин</label> Прямо в теге <form>? или в head в стилях?
Если прямо в форме то у меня не работает.

<form>
<label for="1"> One </label>
<label for="2"> Two </label>
<input id="1" type="text" name="text">
<p>
<input id="2" type="text" name="text">
<p>
<input id="1" type="text" name="text">
<p>
<input id="2" type="text" name="text">
<p>
<input id="1" type="text" name="text">
</form> 
ivashkevich
ivashkevich

У вас сразу несколько ошибок:

  1. тег <p> является парным
  2. id и name у каждого input должны быть уникальными! Перечитайте внимательно статью, это выделено жирным текстом.

Исправьте данные ошибки и всё заработает. И повнимательнее, не торопитесь.

trialex3
trialex3

то есть нельзя привязать один id к нескольким полям? Это было бы удобно.

ivashkevich
ivashkevich

Нет, нельзя. Как вы это представляете? Нажимаете на один лэйбл и курсоры появляются сразу в трёх полях? Сложно представить, для чего такое может понадобиться. Идентификатор на то и идентификатор, что позволяет однозначно что-либо идентифицировать.

Nikolas
Nikolas

чтобы задать какие-то одинаковые параметры нескольким элементам,например css-стили, существует атрибут class.
Синтаксис <p class="luboe-nazvanye">. Думаю это то,что автор хотел( для будущих поколений)

Sony
Sony

Не очень понимаю последнюю часть. Что должно произойти и почему между двумя строчками стоит многоточие? Это значит ,что лейбл может быть где-то выше,в тексте ,но при нажатии будет направлять на это поле?

ivashkevich
ivashkevich

Да, всё именно так.