Как сделать форму с подсказкой

Дата публикации: 2009-11-06

форма

Всем доброго времени суток.

С вами Андрей Бернацкий.

Обратился ко мне знакомый с вопросом следующего содержания: Как сделать такие поля формы как на твоем с Виктором сайте (что бы в поле была подсказка, что нужно вводить, а по клику на форму она исчезала)?

Дел конечно сейчас много, но хорошим людям, почему б не помочь. Заодно решил написать о том как это реализуется на практике кратенькую статейку. Думаю, вам будет интересно.

И так, начинаем.

Для начала нам понадобиться файл placeholder.js, качаем его отсюда. Там, собственно, находится исходник.

Первый пример Вы можете посмотреть тут, а второй пример результат наших с Вами действий Вы можете посмотреть тут.

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

<script src="placeholder.js"></script>

1	<script src="placeholder.js"></script>

Далее мастерим нашу форму:

<form method="get" action="">
 <input placeholder="поиск по сайту" id="hide_show">
  <script type="text/javascript">
    inputPlaceholder( document.getElementById('hide_show') )
  </script>
  <input type="submit" value="go" />
</form>

inputPlaceholder( document.getElementById('hide_show') )

</script>

</form>

Что нас здесь интересует? Во второй строке параметр placeholder. В качестве значения этого параметра указываем тот текст, который мы хотим отобразить на форме. И обязательно указываем id. Этот id запоминаем. Именно его нужно указать в четвертой строке:

inputPlaceholder( document.getElementById('hide_show') )

1	inputPlaceholder( document.getElementById('hide_show') )

Но есть нюанс. Куда ж без него. Изначально текст отображается серым цветом, а когда начинаем вводить свой текст он черный, верно? Нам нужно немного поиграть с цветами.

Чтобы получить нужный нам цвет у текста, который виден сразу (текст-подсказка), открываем файл placeholder.js. На 18-ой строке ищем запись:

var placeholder_color = color || '#AAA';

1	var placeholder_color = color \|\| '#AAA';

Как раз в конце строки (в кавычках) #AAA – это и есть цвет текста. Давайте поменяем цвет на красный. Вместо #AAA пишем #FF0000.

Текст стал красным. Это так, но когда вводишь свой текст, он по-прежнему черный. Для того что бы и наш текст стал красным, добавляем в CSS файл или в часть head (в зависимости от того где у вас описаны стили) свойство color для id нашего input-а:

#hide_show{
		color:#FF0000;
		}

#hide_show{

color:#FF0000;

}

Вот и все хитрости.

Что еще вам рассказать?

Думаю, у кого-нибудь возникнет вопрос: А что если мне нужно два поля с подсказками?

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

<form method="get" action="">
 <input placeholder="поиск по сайту" id="hide_show1">
  <script type="text/javascript">
    inputPlaceholder( document.getElementById('hide_show1') )
  </script>
  <input placeholder="вводи текст сюда" id="hide_show2">
  <script type="text/javascript">
    	inputPlaceholder( document.getElementById('hide_show2') )
  </script>
  <input type="submit" value="go" />
</form>