Атрибут placeholder

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

        
          
          <div>  <label for="name">Ваше имя:</label>  <input    type="text"    id="name"    placeholder="Евгений Онегин"  ></div><div>  <label for="about">О вас:</label>  <textarea    id="about"    placeholder="Томясь в бездействии досуга&#10;Без службы,      без жены, без дел,&#10;Ничем заняться не умел"  >  </textarea></div>
          <div>
  <label for="name">Ваше имя:</label>
  <input
    type="text"
    id="name"
    placeholder="Евгений Онегин"
  >
</div>
<div>
  <label for="about">О вас:</label>
  <textarea
    id="about"
    placeholder="Томясь в бездействии досуга&#10;Без службы,
      без жены, без дел,&#10;Ничем заняться не умел"
  >
  </textarea>
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Атрибут 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;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В ARIA есть атрибут aria-placeholder. Он тоже нужен для добавления плейсхолдера к полю.

Старайтесь всегда использовать placeholder. aria-placeholder поможет в сложных ситуациях, когда создаёте кастомные поля.

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

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

        
          
          <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>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В этом примере инструкция к паролю всегда доступна пользователю и точно не потеряется. Для неё также используется атрибут aria-describedby. Благодаря ему скринридеры зачитывают подсказку при фокусе на поле.

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

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

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

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

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

На практике

Скопировать ссылку "На практике" Скопировано

Марианна Минич советует

Скопировать ссылку "Марианна Минич советует" Скопировано

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

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