www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.
Веб-дизайн и поисковая оптимизация
Создание формы обратной связи
• Создание формы обратной связи на сайте
• Проверка ввода формы обратной связи
• Простая форма обратной связи с проверкой введенных данных
• Создание анкеты на сайте
• Проверка формы обратной связи "на лету"
• Отправка файлов через форму обратной связи
• Капча в форме обратной связи
• Простая капча для формы обратной связи
• Заказ товаров и услуг через форму обратной связи
• Форма обратной связи - отправка писем на разные адреса
• Проблемы с кодировкой в форме обратной связи
• Создание кнопок в форме обратной связи
• Календарь в форме обратной связи
• Оформление формы обратной связи
>> смотреть все статьи о создании формы обратной связи
Создание кнопок в форме обратной связи
При заполнении формы обратной связи всегда требуется выполнение пользователем некоторых действий. Например, сбросить ошибочно введенные данные, выполнить поиск файла для прикрепления к письму, после заполнения полей дать команду для отправки данных на сервер и т.п. Для подобных операций используются разнообразные кнопки, щелчок по которым приводит к выполнению требуемой функции.
В большинстве случаев используются стандартные кнопки, которые обеспечивают обработку определенных событий:
- <button> - кнопка общего вида,
- <submit> - кнопка подачи запроса,
- <reset> - кнопка сброса.
Надпись на кнопке задается атрибутом value="Надпись", а всплывающая подсказка на выполнение требуемых действий с помощью атрибута title="Текст подсказки". Конечно, никто не запрещает вам использовать кнопки не только в форме обратной связи, но и как элемент страницы сайта. Например, для входа в личный кабинет можно использовать кнопку, при нажатии на которую откроется страница входа или регистрации:
Код такой кнопки следующий:
<input type="button" style="cursor:pointer" value="Войти в Личный кабинет" onclick="window.open('адрес страницы входа в личный кабинет');" />.
Как видим, для задания кнопке функции открытия нового окна используется сценарий JavaScript - onclick. Для наглядности дополнительно задан стиль курсора рука-указатель style="cursor:pointer" (см. статью "Курсор как элемент веб-дизайна").
Кнопки-ссылки можно создавать и непосредственно двойным тегом <button> надпись </button> без использования <input>. Такой синтаксис обычно используется для вызова нестандартных функций, например, выполнения вычислений или проверки правильности ввода данных. Естественно, предварительно необходимо создать требуемый сценарий функции.
Часто веб-дизайнеры заменяют надписи на кнопках графическими изображениями или вообще создают своё изображение кнопки. Практически в любой компьютерной программе вы встретите такие кнопки, например:
В данном примере изображение помещается на поверхность кнопки (можно понажимать!). При необходимости вы можете разместить на кнопке и текст, введя его перед или после тега <img>. Для создания такой кнопки-ссылки используется простой HTML-код:
<a href="адрес ссылки">
<button style="cursor:pointer"><img src="адрес файла изображения" width="22" height="22" border="0" />
<br />
Мои друзья</button></a>.
Следует иметь в виду, что такая ссылка работает не во всех браузерах IE, поэтому лучше и здесь использовать конструкцию <button onclick="window.open('адрес ссылки');">...</button>
При создании формы обратной связи можно заменить стандартную кнопку оправки запроса Submit любым изображением. Для этого достаточно заменить в теге input атрибут type="submit" на type="image". В этом случае код графической кнопки подачи запроса (submit) будет таким:
<input type="image" src="адрес файла изображения" title="Отправить" width="50px"height="20px"alt="Кнопка отправки запроса" />.
При этом, в отличие от предыдущего примера, отсутствует рамка кнопки вокруг изображения и эффект нажатия, но курсор мыши при наведении его на картинку принимает изображение руки-указателя -
.
Обратите внимание, что в данном случае размеры изображения при выводе его в браузере задаются необязательными атрибутами width и height тега <input>, а не <img>, но задавать несоответствующие изображению размеры нежелательно, так как качество картинки заметно ухудшится.
В некоторых случаях в форме обратной связи требуется сделать кнопку активной только после выполнения некоторых действий, например, заполнения предшествующих полей. В этом случае используется атрибут disabled, который можно устанавливать для любого типа кнопок. После выполнения действия он сбрасывается с помощью пользовательского сценария и кнопка становится доступной для нажатия (активной).
8.01.2012 г.
Copyright © 2008 - Марк Розенталь e-mail:
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru