Атрибут placeholder - за и против

Лого ве6-студии noviKEY

статья опубликована

inc/articles/blog_1.jpg
Атрибут placeholder - за и против
Пример заполнения формы с атрибутом placeholder

На первый взгляд placeholder – это крайне удобный атрибут в html. Внутри формы ввода выводится текст, установили курсор в поле, и оно очистилось – вводи нужную информацию. Но всегда ли он удобен и уместен?

Самый распространенный пример использования – это форма поиска на сайтах. На входе один input с содержимым «поиск» или что-то вроде «введите текст для поиска». Как только мы кликнули в поле ввода, текст пропадает, а мигающий курсор предлагает нам набрать пару слов для поиска. Удобно? Несомненно.

Другой пример и скорее всего это ошибочное использование этого атрибута – большая форма, например, форма регистрации. Нам предлагают заполнить несколько полей: имя пользователя, почту, номер телефона и пароль с подтверждением. Допустим, что при вводе данных происходит ошибка, вместо номера телефона мы вводим ИНН, а вместо ИНН номер телефона. При попытке зарегистрироваться видим ошибку: «Неверный формат ИНН». Если поле, в котором была допущена ошибка дополнительно не выделяется, то сложно понять где же должен быть вписан номер телефона, а где ИНН. Даже если поле с не валидными данными подсвечивается красной рамкой, то мы можем запутаться.



<form action="handler.php">
   <input type="search" placeholder="Поиск..."/>
   <input type="submit" value="Искать"/>
</form>  

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

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

P.S. кроссбраузерность IE10+