Веб-дизайн и поисковая оптимизация

Создание формы обратной связи - 14

• Создание формы обратной связи на сайте
• Проверка ввода формы обратной связи
• Создание анкеты на сайте
• Самая простая форма обратной связи
• Проверка формы обратной связи "на лету"
• Отправка файлов через форму обратной связи
• Капча в форме обратной связи
• Заказ товаров и услуг через форму обратной связи
• Форма обратной связи - примеры использования
• Форма обратной связи для заказа обедов в офис
• Форма обратной связи - отправка писем на разные адреса
• Проблемы с кодировкой в форме обратной связи
• Простая капча для формы обратной связи
• Создание кнопок в форме обратной связи

Создание кнопок в форме обратной связи

При заполнении формы обратной связи всегда требуется выполнение пользователем некоторых действий. Например, сбросить ошибочно введенные данные, выполнить поиск файла для прикрепления к письму, после заполнения полей дать команду для отправки данных на сервер и т.п. Для подобных операций используются разнообразные кнопки, щелчок по которым приводит к выполнению требуемой функции.

В большинстве случаев используются стандартные кнопки, которые обеспечивают обработку определенных событий:

• <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><img src="адрес файла изображения" width="22" height="22" border="0" />
<br /> Мои друзья</button></a>.

Следует иметь в виду, что такая ссылка работает не во всех браузерах IE, поэтому лучше и здесь использовать конструкцию <button onclick="window.open('адрес ссылки');">...</button>

При создании формы обратной связи также можно заменить стандартные кнопки любыми изображениями. При этом не надо создавать сценарий обработки события (клика по кнопке), так как он уже задан соответствующим тегом. Например, графическая кнопка подачи запроса (submit) задается кодом
<input type="image" src="адрес файла изображения" title="Отправить" width="50px" height="20px"/>.
При этом, в отличие от предыдущего примера, отсутствует рамка кнопки вокруг изображения и эффект нажатия, но курсор мыши при наведении его на картинку принимает изображение руки-указателя -   .
Обратите внимание, что в данном случае размеры изображения при выводе его в браузере задаются необязательными атрибутами width и height тега <input>, а не <img>, но задавать несоответствующие изображению размеры нежелательно, так как качество картинки заметно ухудшится.

В некоторых случаях в форме обратной связи требуется сделать кнопку активной только после выполнения некоторых действий, например, заполнения предшествующих полей. В этом случае используется атрибут disabled, который можно устанавливать для любого типа кнопок. После выполнения действия он сбрасывается с помощью пользовательского сценария и кнопка становится доступной для нажатия (активной).

8.01.2012 г.

Ещё статьи по теме "Создание, оптимизация и раскрутка сайта":
• Как раскрутить сайт (серия статей)
• Создание иконки для сайта
• Создание выпадающего меню
• Курсор как элемент веб-дизайна
• Создание гостевой книги на сайте
• Фон для сайта
• Вывод текущей даты на сайте
• Создание бегущей строки на сайте
• Создание "схемы проезда" на сайте
• Ключевые слова и продвижение сайта
• Отправка файлов через форму обратной связи
• Сжатие фотографий для интернета и электронной почты