Атрибут placeholder

Удобный атрибут для подсказки в поле ввода. Но есть нюансы!

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Атрибут, который подсказывает пользователю, что именно нужно ввести в поле ввода (обычно это пример слова или фразы). Выглядит это как будто поле уже заполнено, только гораздо бледнее. А ещё значение атрибута исчезает, как только пользователь начинает вводить текст.

Пример

Секция статьи "Пример"
        
          
          <input type="text" id="name" placeholder="Введите ваше имя">
          <input type="text" id="name" placeholder="Введите ваше имя">

        
        
          
        
      
Открыть демо в новой вкладке

Как пишется

Секция статьи "Как пишется"

Атрибут placeholder можно задать для <input> и <textarea>. Атрибут работает со следующими типами:

  • text;
  • search;
  • url;
  • telephone;
  • email;
  • password.
        
          
          <input type="email" id="email" placeholder="your_email@gmail.com">
          <input type="email" id="email" placeholder="your_email@gmail.com">

        
        
          
        
      

Внешний вид можно стилизовать при помощи псевдоэлемента ::placeholder.

Для браузеров старых версий нужны вендорные префиксы:

        
          
          input::-webkit-input-placeholder {  color: #F0BBD7;}input:-moz-placeholder {  color: #F0BBD7;}input::-moz-placeholder {  color: #F0BBD7;}input:-ms-input-placeholder {  color: #F0BBD7;}input::-ms-input-placeholder {  color: #F0BBD7;}
          input::-webkit-input-placeholder {
  color: #F0BBD7;
}

input:-moz-placeholder {
  color: #F0BBD7;
}

input::-moz-placeholder {
  color: #F0BBD7;
}

input:-ms-input-placeholder {
  color: #F0BBD7;
}

input::-ms-input-placeholder {
  color: #F0BBD7;
}

        
        
          
        
      

Как понять

Секция статьи "Как понять"

Текст плейсхолдера должен быть краткой подсказкой о том, что пользователь должен ввести в поле ввода.

Если для заполнения поля нужна инструкция (формате номера телефона или длина пароля), то такую инструкцию лучше оформить отдельно от поля ввода. Иначе пользователь не сможет эффективно её использовать, потому что заполнители исчезают во время набора текста.

        
          
          <label for="password">Пароль</label><input type="text" id="password" placeholder="Введите пароль" aria-describedby="hint"><span id="hint">Пароль должен состоять из 8 символов, включая цифры и буквы.</span>
          <label for="password">Пароль</label>
<input type="text" id="password" placeholder="Введите пароль" aria-describedby="hint">
<span id="hint">Пароль должен состоять из 8 символов, включая цифры и буквы.</span>

        
        
          
        
      

В этом примере инструкция к паролю всегда доступна пользователю и точно не потеряется.

Контрастность

Секция статьи "Контрастность"

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

Цветовой контраст между фоном и самим текстом должен быть достаточным, чтобы пользователи с нарушениями зрения могли его прочитать:

  • текст и его фон должны иметь контрастность не менее 4.5:1;
  • текст заголовка (или просто крупный текст) должен иметь соотношение не менее 3:1.

Подробнее о шкале контрастности можно узнать в руководстве по доступности веб-сайтов.

Подсказки

Секция статьи "Подсказки"

💡 Часто из-за дизайнерских решений placeholder используется для замены более семантического элемента метки. Однако это не означает, что текст-заполнитель может заменить <label>, поскольку это создаёт неудобства для пользователей с особыми потребностями.

На практике

Секция статьи "На практике"

Марианна Минич

Секция статьи "Марианна Минич"

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

🛠 Проверка заполненных полей. placeholder исчезает, когда пользователь начинает печатать в поле ввода. Если заполнитель используется в качестве единственной подсказки, то будет сложнее проверить свои ответы перед отправкой формы и исправить ошибки. Такая проверка будет дополнительной когнитивной нагрузкой для всех пользователей, включая людей с ограниченными возможностями.