www.seomark.ru |
Веб-дизайн и поисковая оптимизация |
|||||||
Главная | Веб-дизайн и оптимизация сайтов | Фотолаборатория | Радиотехника | Полезные программы | Разработка сайтов | ||||||||
Создание формы обратной связи
Форма обратной связи - примеры использованияПри создании формы обратной связи на сайте можно изменять не только её внешний вид, но и функциональность в зависимости от конкретных задач. Для этого удобно использовать различные атрибуты тегов полей ввода <input>, <select> и др. Рассмотрим несколько простых и полезных примеров. Как всегда, они действующие и их HTML-код можно посмотреть (и позаимствовать) в исходном коде данной страницы. 1. Вывод подсказки при наведении указателя мыши на поле формы обратной связи. Для этого необходимо указать текст подсказки в атрибуте title тега <input>: Ключевые слова: 2. Вывод подсказки непосредственно в ячейке формы с помощью атрибута value тега <input>. Здесь же показано и использование тега <select> для выбора вариантов ответа о времени обратного звонка из выпадающего списка:
Полный HTML-код этого примера следующий: Обратите внимание на значение атрибута size тега <select>: если ему присвоено значение "1", то выводится выпадающий список, как в приведенном примере, а при любом другом значении - обычный список с полосой прокрутки. Если вам необходимо выбирать несколько элементов из списка, то установите атрибут multiple. В этом случае, конечно, список всегда имеет обычную форму с полосой прокрутки, даже если установлено size=1. Подробнее об особенностях применения тега <select> рассказано в статье "Выбор нескольких элементов в теге <select> формы обратной связи". 3. Для обратной связи с посетителем обычно просят его указать адрес электронной почты. Между тем, многие посетители вполне обоснованно стараются не указывать свой e-mail, опасаясь спама, который начнет поступать на их почтовый ящик. В этом случае рекомендуется предлагать альтернативный вариант - ввод номера телефона: Укажите ваш e-mail или телефон (для ответа): Так как это поле обычно является обязательным для заполнения, то обратите внимание на его проверку, так как номер телефона некоторые посетители вводят, используя дефис или круглые скобки для кода города. Для проверки надо разрешить ввод этих символов. Можно ограничиться простой проверкой наличия любых символов в этом поле, то есть чего-нибудь, кроме пустого места. См. статью Проверка заполнения формы обратной связи на сайте. 4. При оформлении формы обратной связи можно использовать любые средства дизайна, встраивая форму на страницу сайта как обычный HTML элемент. При этом для сохранения правильной верстки желательно указывать значения атрибута size - ширина поля ввода в символах (по умолчанию 20 символов), а также maxlength - максимально допустимое число символов в строке, чтобы ограничить словесный водопад посетителя сайта. 5. В случае необходимости предоставить пользователю возможность выбора между несколькими фиксированными параметрами используют флажки и переключатели. Флажки позволяют выбрать любое количество параметров, а переключатели - только один из списка. Тип элемента управления указывается в атрибуте type тега <input>: checkbox - флажок, radio - переключатель. Следующий пример показывает различие в применении флажков (слева) и переключателей (справа):
Код этого примера также понятен, надеюсь, без пояснений: 6. Оформление текстого поля. Для его создания используется пара тегов <textarea >...</textarea> со следующими атрибутами:
Если вы хотите задать в поле текст по умолчанию, то просто введите его между тегами <textarea >...</textarea>.
7. И последнее, если в форме обратной связи есть поля, обязательные для заполнения, не забудьте сообщить об этом посетителю сайта, отметив их звездочкой или другим способом. Этим вы проявляете уважение к своим гостям, не заставляя их гадать, какие поля можно пропустить, а какие нет. Рассмотренные примеры требуют, как всегда, наличия РНР-страниц для отправки созданных форм обратной связи на ваш адрес электронной почты. Для этого вы можете воспользоваться рекомендациями из статьи Создание анкеты на сайте. 27.07.2010 г. |
||||||||
|
||||||||
Главная | Веб-дизайн и оптимизация сайтов | Фотолаборатория | Радиотехника | Полезные программы | Разработка сайтов | ||||||||
Copyright © 2008 - Марк Розенталь e-mail: Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru Ключевые слова: форма обратной связи - примеры использования, создание формы обратной связи |