www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.
Веб-дизайн и поисковая оптимизация
Создание формы обратной связи
• Создание формы обратной связи на сайте
• Проверка ввода формы обратной связи
• Простая форма обратной связи с проверкой введенных данных
• Создание анкеты на сайте
• Проверка формы обратной связи "на лету"
• Отправка файлов через форму обратной связи
• Капча в форме обратной связи
• Простая капча для формы обратной связи
• Заказ товаров и услуг через форму обратной связи
• Форма обратной связи - отправка писем на разные адреса
• Проблемы с кодировкой в форме обратной связи
• Создание кнопок в форме обратной связи
• Календарь в форме обратной связи
• Оформление формы обратной связи
>> смотреть все статьи о создании формы обратной связи
Оформление формы обратной связи на сайте
При размещении формы обратной связи на сайте часто требуется изменить её внешний вид. В большинстве случаев для этого достаточно средств CSS, но иногда требуется добавить динамические эффекты, например, плавное затемнение строк, всплывающие подсказки, выдвижение формы сбоку страницы и т.п. В одной из предыдущих статей уже было рассказано о создании выпадающего календаря для ввода даты в форме обратной связи. Теперь расмотрим еще несколько "украшений" для формы, которые легко сделать с помощью плагинов бесплатной библиотеки скриптов jQuery.
Один из простейших эффектов - изменение прозрачности полей при вводе данных. Для этого используем плагин In-Field Labels для jQuery, разработанный Дугом Нейнером (Doug Neiner). При щелчке по полю формы прозрачность текста-подсказки уменьшается, а при начале ввода подсказка исчезает совсем. Действующий пример показан на рисунке:
Установка плагина In-Field Labels
Сначала, во избежание путаницы, создадим на сайте новую папку, назвав её forma. Затем скачиваем архив и распаковываем его в эту папку. В ней получится два файла: jquery-1.8.3.min.js и jquery.infieldlabel.js. В теге <head>...</head> на странице с формой обратной связи размещаем следующие строчки, указывающие пути к новым файлам, дополнительный java-скрипт для инициализации плагина и два правила CSS, определяющие положение полей ввода:
<script src="forma/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="forma/jquery.infieldlabel.js" type="text/javascript" ></script>
<script type="text/javascript" >
$(window).load(function(){
$("label").inFieldLabels();
});
</script>
<style type="text/css">
form p {
position: relative;
}
form p label {
position: absolute;
top: 0;
left: 2px;
}
</style>
Чтобы плагин заработал, необходимо использовать формат полей ввода формы с тегом <label>...</label>. Для нашего примера HTML-код выглядит так:
<form method="post" action="#">.
<p>
<label for="name">Ваше имя</label>
<input type="text" name="name" value="" id="name" />
</p>
<p>
<label for="email">Ваш еmail</label>
<input type="text" name="email" value="" id="email" />
</p>
<p>
<label for="comment">Сообщение</label>
<textarea cols="20" rows="2" name="comment" id="comment"></textarea>
</p>
<p>
<input type="submit" value="Отправить сообщение"/>
</p>
</form>
Обратите внимание, что заданное имя (атрибут name= "... ") для каждого поля формы повторяется также в label и id.
Важное замечание: если на вашем сайте используется несколько плагинов jQuery, то удобнее перенести файл jquery.js (желательно последней версии) в корневую папку, чтобы не загружать его несколько раз. В этом случае, строка обращения к нему будет выглядеть одинаково для всех плагинов. В частности, для нашего примера получается так:
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>.
Не рекомендуется использовать на одной странице несколько разных версий jQuery, чтобы они не конфликтовали друг с другом. При этом обязательно проверяйте работу плагинов с установленной версией jQuery, так как не все версии взаимозаменяемы.
Настройка плагина In-Field Labels
В плагине In-Field Labels можно изменять два параметра: прозрачность текста при наведении мыши и скорость изменения прозрачности. Для их изменения откройте файл jquery.infieldlabel.js в HTML-редакторе или в Блокноте и почти в самом конце его найдите следующие строчки:
fadeOpacity: 0.3, // Прозрачность текста в поле формы обратной связи от 0 до 1
fadeDuration: 300 // Время изменения прозрачности
Прозрачность можно менять в диапазоне от 0 до 1, а время изменения задаете в миллисекундах.
На этом установка плагине In-Field Labels закончена.
С помощью скриптов jQuery можно создавать самые разнообразные эффекты для формы обратной связи и вывода её на экран, о чём продолжим разговор в следующих статьях (см. статьи "Календарь в форме обратной связи", "Применение jQuery для формы обратной связи", "Значки +/- для ввода чисел в форме обратной связи" и др.)
27.08.2013 г.
см. все статьи по веб-дизайну >>
Copyright © 2008 - Марк Розенталь e-mail:
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru