Як зробити форму з підказкою

19

Всім доброго часу доби.

З вами Андрій Бернацький.

Звернувся до мене знайомий з питанням наступного змісту: Як зробити такі поля форми як на твоєму з Віктором сайті (що б в полі була підказка, що потрібно вводити, а по кліку на форму вона зникала)?

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

І так, починаємо.

Для початку нам знадобиться файл placeholder.js качаємо його звідси. Там, власне, знаходиться джерело.

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

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

Далі майструємо нашу форму:

inputPlaceholder( document.getElementById(‘hide_show’) )
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 і ці ж значення передавати скрипту, який знаходитися під формою. Нижче приклад:

inputPlaceholder( document.getElementById(‘hide_show1’) )
inputPlaceholder( document.getElementById(‘hide_show2’) )

Якщо щось не вийшло можна скачати архів прикладів по даному уроку тут.

Сподіваюся, що урок був корисним. До зустрічі!

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

E-mail:[email protected]

Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування

P. S. Хочете опублікувати цікавий тематичний матеріал? Якщо відповідь «Так», то тисніть сюди.

Тут Ви можете з нуля підняти HTML&CSS