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

форма

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

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

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

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

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

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

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

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

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

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

inputPlaceholder( document.getElementById('hide_show') )

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

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

var placeholder_color = color || '#AAA';

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

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

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

Если что-то не получилось можно скачать архив примеров по данному уроку тут.

Надеюсь, урок был полезен. До встречи!

Урок подготовил: Андрей Бернацкий. Команда webformyself.

E-mail:contact@webformyself.com

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

P.S. Хотите опубликовать интересный тематический материал? Если ответ «Да», то жмите сюда.

Тут Вы можете с нуля поднять HTML&CSS

Проверка формы без перезагрузки с помощью JavaScript

Прямо сейчас посмотрите курс по организации динамической работы с формами!

Смотреть курс

Метки: , ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (5)

  1. Александер

    Это интересно спасибо вам дольшое

  2. Людмила

    Спасибо большое! Очень полезный материал. Буду постоянно его использовать.

  3. Never Lex

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

    Просто к нужным элементам (input или textarea) дописывается onfocus и onblur.

    Можете посмотреть у меня на блоге neverlex.com в форме комментариев или контакта.

  4. Сергей

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

  5. Evgeniy

    интересное решение, спасибо. У меня только в Google Chrome работает, в остальных браузерах не отображается, к сожалению, не проходит проверку на валидность. (There is no attribute ) как с этим бороться??

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree