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

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

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

Проверка формы обратной связи "на лету"

В предыдущих статьях было рассмотрено создание формы обратной связи и проверка её заполнения посетителем сайта. Проверка осуществлялась после нажатия кнопки Отправить сообщение. Однако иногда, особенно при заполнении больших анкет или опросов, такой способ не удобен. Лучшим вариантом является проверка правильности заполнения формы "на лету", то есть сразу после ввода с клавиатуры данных в поле формы, в момент перехода посетителя к следующему полю.

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

С помощью JavaScript это сделать проще простого. Для примера, рассмотрим созданную нами форму обратной связи (см. статью Создание формы обратной связи на сайте):

Ваше имя:

Ваш e-mail и/или телефон (для ответа):

Ваше сообщение:

В строке Ваш e-mail и/или телефон (для ответа), очевидно, не должно быть букв кириллицы (временно забудем, что появились русскоязычные домены .рф), символов пробела, табуляции и абзаца. Для проверки содержимого поля используем событие onchange и встроенную функцию test( ), проверяющую введенные символы, в сочетании с переменной pattern, содержащей список недопустимых символов. Синтаксис проверки поля email в HTML-коде формы обратной связи для тега <input> следующий:
<input type="text" name="email" size="30" onchange="var pattern=/['А-я','\s']/; if(pattern.test(this.value))alert('Проверьте поле Ваш e-mail и/или телефон');">

Обратите внимание, что запрещенные символы перечисляются через запятую. Для обозначения массивов символов применяют следующие сокращения:

• '0-9' или '\d' - все цифры,
• 'а-я' - все строчные буквы кириллицы,
• 'А-Я' - все прописные буквы кириллицы,
• 'А-я' - все буквы кириллицы,
• 'a-z' - все строчные латинские буквы,
• 'A-Z' - все прописные латинские буквы,
• 'A-z' - все латинские буквы,
• 'А-я' - все буквы (первая буква - латинская А,
• '\w' - все буквы, цифры и символ подчеркивания _,
• '\s' - символы пробела, табуляции и абзаца.

Теперь вспомним про домены .рф и разрешим в поле e-mail вводить буквы рф. Для этого просто "вырежем" две эти буквы из списка недопустимых символов: pattern=/['А-п','с-у','х-я']

В сценарии JavaScript, как видим, конструкция с оператором if (условие) при обнаружении недопустимого символа функцией test выполняет встроенную функцию alert (текст сообщения), выводящую надпись Проверьте поле Ваш e-mail и/или телефон на экран монитора. Вы можете это проверить: введите любую русскую букву в форму обратной связи в поле e-mail на этой странице, и при переходе к следующему полю (Ваше сообщение) будет выведена надпись об ошибке ввода.

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

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

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

25.12.2009 г.

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