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

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

Присоединяйтесь к нам в ВКонтакте и в Facebook, чтобы не пропустить новые уроки. А также вступайте в наш чат PHP-разработчиков в Telegram.
Домашнее задание
  • добавьте подписи к полям на Вашей форме
Онлайн обучение PHP
Путь с полного нуля до джуниора!
Начать бесплатно
Читайте также
Курс программирования на PHP
Подготовка до уровня устройства на работу!
Начать бесплатно
Комментарии (10)


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

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

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

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

trialex3

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

ivashkevich

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

Nikolas

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

Sony

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

ivashkevich

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

ilya
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="/login/"method="get">
        <label>
            Логин 
            <input type="text"name="login"value="ivanovulya78">
        </label>
        <br>
        <label>
            Пароль 
            <input type="text"name="password"value="Не менее 8 символов">
        </label>
        <input type="submit"value="Войти">
    </form>
</body>
</html>
ivashkevich

Поле для пароля должно быть с типом password

Самый понятный курс PHP
Онлайн-уроки в удобное время!
Начать бесплатно
Популярное за сутки
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Сейчас читают
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Новые статьи
Логические задачи с собеседований