15.03.2017   2936

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

Подписи к полям ввода: тег 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">

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

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


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

Следующий урок Предыдущий урок

Комментарии

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


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