Добавляем подписи к полям ввода

Добавляем подписи к полям ввода


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

Добавление подписей для полей – казалось бы не такая сложная задача, однако есть свои тонкости. Разберем код ниже:

 

 

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

Вроде бы все хорошо, подписи есть – но нету логической связи между input и подписями.

Чтобы связать input и подпись следует использовать тег

 <label>

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

Подпись и input должны находиться внутри label

 

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


Результат в браузере

Связь подписи и поле по ID

Бывают ситуации когда разметка не позволяет использовать стандартное решение, как быть? на помощь приходит идентификатор label

Название идентификатора не должно повторяться на странице. Оно должно быть уникальным.

Вот что мы получили:

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