В любом текстовом поле для ввода чего либо, можно оставить текст подсказки. В этой короткой заметке я вам покажу варианты добавления в html подсказок input-ам.
Вообще, в большинстве случаев при заполнении формы справа или слева от поля для заполнения идет поясняющий текст, который подсказывает вам, что именно нужно вписать. Но в некоторых случаях подсказку необходимо встроить в само поле. Например, когда речь идет о поле для поиска или в каких-то других случаях.
Первый вариант — атрибут value
Допустим, у нас есть обычный текстовый input и нужно подсказать пользователю, что он должен ввести в него свое любимое число (это я только что придумал такую условную ситуацию). Это можно сделать с помощью атрибута value, то есть поле сразу же получит определенное значение:
<input type = "text" value = "Введите ваше любимое число">
Видим, что подсказка отобразилась, у меня она даже не влезла полностью, но это можно легко поправить. Можно через css увеличить ширину поля, можно с помощью атрибута size указать количество символов, которые должны влезать и полностью отображаться в него.
Минус такого подсказывающего текста в том, что при получении фокуса и даже при попытке ввода текст не сотрется сам. Человеку придется стирать его самостоятельно и только после этого можно будет начинать ввод нужного значения. Согласитесь, это не все удобно.
Второй вариант — атрибут placeholder
А вот этот атрибут является одним из нововведений по работе с формами в html5.
<input type = "text" size = "30" placeholder = "Введите ваше любимое число">
Как видим, подсказывающий текст тот же, только атрибут другой. Какие изменения? Во-первых, цвет текста серенький, то есть сам браузер подсказывает, что текст, вероятно, сотрется в начале ввода. Именно так и происходит — как только вы начнете вводить что-то, подсказка исчезнет. Интересно, что при получении фокуса в Google Сhrome и некоторых других браузерах текст не стирается, это происходит только после того, как начат ввод.
В Internet Explorer же все работает по-другому и текст стирается уже при получении полем фокуса.
Какой вариант выбрать?
На сегодняшний день абсолютно оптимальным я вижу выбор атрибута placeholder, так как он более удобен для людей. Единственная проблема, он не так хорошо поддерживается старыми браузерами. Но именно старыми, такими, как IE 8-9. Но здесь я не вижу никаких препятствий, чтобы не использовать атрибут.