Многие видели в формах, поля ввода данных с подсказками. Я решил создать кроссбраузерный правильный вариант решения данной задачи.
Для начала демонстрирующий пример, кликните мышкой по полям ввода данных:
Посмотреть пример в отдельном окне »
Принцип работы
Пользователь видит форму с полями, например форму поиска, сайт источник http://yapro.ru Thu Feb 17 2011 15:59:05 GMT+0300в ней написано «Поиск» или «Найти...» он кликает и эта надпись исчезает, тем самым давая пользователю ввести свои данные.
Все это возможно благодаря атрибуту placeholder, который к сожалению поддерживается не во всех браузерах. Чтобы исправить данную ситуацию и сделать поддержку для всех браузеров, был разработан jQuery плагин placeholder.
Например Вы сделали для пользователя форму заполнения и решили что полям ввода placeholder_yes и placeholder_yes_2 нужны подсказки. Эти подсказки можно указать значениями в атрибутах placeholder, например так:
<form action="" method="post">
<input name="placeholder_yes" placeholder="Enter the text">
<input name="placeholder_no">
<textarea name="placeholder_yes_2" placeholder="Введите сообщение" style="width:150px; height:35px;"></textarea>
<input type="submit">
</form>
В браузерах поддерживающих placeholder, подсказки будут работать даже сайт источник http://yapro.ru Thu Feb 17 2011 15:59:13 GMT+0300если отключен JavaScript, а остальным браузерам мы добавим такую возможность самостоятельно.
Подключение
Вставьте перед тегом </head> код:
<script type="text/javascript" src="placeholder.js"></script>
Использование
Включить плэйсхолдеры для всех форм на странице можно так:
$("FORM").placeholderLebnik();
для определенной формы с id="myForm" так:
$("#myForm").placeholderLebnik();
а для группы форм с class="myForm" так:
$(".myForm").placeholderLebnik();
Включение производите перед тегом </body> или через $(document).ready(); например так:
$(document).ready(function(){
$("FORM").placeholderLebnik();
});
CSS стили
Цвет подсветки можно задавать с помощью класса placeholder, например так:
.placeholder {
color:#CCCCCC;
}
Скачать placeholder »
Надеюсь это облегчит Вам разработку правильных форм, а пользователям ввод данных, всем удачи!
