Варианты добавления в html подсказки input-полю

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

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

Первый вариант — атрибут value

Допустим, у нас есть обычный текстовый input и нужно подсказать пользователю, что он должен ввести в него свое любимое число (это я только что придумал такую условную ситуацию). Это можно сделать с помощью атрибута value, то есть поле сразу же получит определенное значение:

<input type = "text" value = "Введите ваше любимое число">

атрибут value
Видим, что подсказка отобразилась, у меня она даже не влезла полностью, но это можно легко поправить. Можно через css увеличить ширину поля, можно с помощью атрибута size указать количество символов, которые должны влезать и полностью отображаться в него.

Минус такого подсказывающего текста в том, что при получении фокуса и даже при попытке ввода текст не сотрется сам. Человеку придется стирать его самостоятельно и только после этого можно будет начинать ввод нужного значения. Согласитесь, это не все удобно.

Второй вариант — атрибут placeholder

А вот этот атрибут является одним из нововведений по работе с формами в html5.

<input type = "text" size = "30" placeholder = "Введите ваше любимое число">

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

В Internet Explorer же все работает по-другому и текст стирается уже при получении полем фокуса.
фокус

Какой вариант выбрать?

На сегодняшний день абсолютно оптимальным я вижу выбор атрибута placeholder, так как он более удобен для людей. Единственная проблема, он не так хорошо поддерживается старыми браузерами. Но именно старыми, такими, как IE 8-9. Но здесь я не вижу никаких препятствий, чтобы не использовать атрибут.

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: