15.03.2017   3626
Подписи к полям ввода: тег label

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

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

<form action="/login/">
    Логин <input type="text" name="login">
    Email <input type="text" name="email">
    <input type="submit" value="Войти">
</form>

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

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

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

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

<form action="/login/">
    <label>
        Логин <input type="text" name="login">
    </label>
    <label>
        Email <input type="text" name="email">
    </label>
    <input type="submit" value="Войти">
</form>

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

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

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

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

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

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

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

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

<label for="loginField">Логин</label>
...
<input id="loginField" type="text" name="login">

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

Домашнее задание
Для просмотра домашки нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности

Комментарии

 trialex3 2017-08-11 22:16:10
0

Не понял. Конкретно вот эту строчку где прописывать? <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 2017-08-11 23:28:45
    0

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

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

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

    Ответить
 trialex3 2017-08-12 07:08:45
0

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

Ответить
  •  ivashkevich 2017-08-13 11:47:39
    0

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

    Ответить
Чтобы написать комментарий нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности