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

форма

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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

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

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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

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

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

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

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

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

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

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

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

E-mail:contact@webformyself.com

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки: , ,

Похожие статьи:

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

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