www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.
Веб-дизайн и поисковая оптимизация
Создание формы обратной связи
• Создание формы обратной связи на сайте
• Проверка ввода формы обратной связи
• Простая форма обратной связи с проверкой введенных данных
• Создание анкеты на сайте
• Проверка формы обратной связи "на лету"
• Отправка файлов через форму обратной связи
• Капча в форме обратной связи
• Простая капча для формы обратной связи
• Заказ товаров и услуг через форму обратной связи
• Форма обратной связи - отправка писем на разные адреса
• Проблемы с кодировкой в форме обратной связи
• Создание кнопок в форме обратной связи
• Календарь в форме обратной связи
• Оформление формы обратной связи
>> смотреть все статьи о создании формы обратной связи
Выбор нескольких элементов в теге <select> формы обратной связи
При создании формы обратной связи часто используются списки, создаваемые тегом <select>. Несмотря на простоту его применения, иногда возникают проблемы с обработкой таких списков, особенно, если вы не знакомы со страшным зверем по кличке РНР. Однако, в большинстве случаев работы с формами можно обойтись и без знания этого языка программирования, а использовать только логическое мышление.
Рассмотрим два конкретных примера.
1. Раскрывающийся список с выбором одного элемента.
HTML-код формы обратной связи, в данном случае, следующий:
<form action="mail.php" method="post">
Выберите автомобиль, который вы можете купить:<br />
<select name="car" style="width: 90%">
<option value="Феррари">Феррари </option>
<option value="Бентли">Бентли</option>
<option value="Роллс-Ройс">Роллс-Ройс </option>
<option value="Ламборджини">Ламборджини </option>
<option value="Бугатти">Бугатти</option>
<option value="Жигули">Жигули</option>
</select>
<br />
<br />
<input type="submit" value="Отправить" />
</form>В браузере это выглядит так (пример рабочий, можно потыкать):
Рис.1. Форма обратной связи с выбором одного элемента из списка
В данном примере после обработки формы на сервере на вашу почту придет название выбранной марки авто. За отправку письма отвечает программа, размещенная на странице mail.php. Эту страницу следует разместить на сайте в той же папке, что и страница с формой. Полный рабочий код страницы mail.php следующий:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Обратная связь</title>
</head>
<body>
<?php
if (isset($_POST['car'])) {$car = $_POST['car'];}
$to = "pupkin@rambler.ru"; // Укажите здесь свой e-mail
$headers = "Content-type: text/plain; charset = utf-8";
$subject = "Сообщение с вашего сайта";
$message = "Марка автомобиля: $car";
$send = mail ($to, $subject, $message, $headers);
if ($send == 'true')
{
echo "<b>Молодец! Твой автомобиль уже в пути.<p>";
}
else
{
echo "<p><b>Ошибка. Сообщение не отправлено!";
}
?>
</body>
</html>
Обратите внимание, что для обработки формы используется указанное в теге <select> имя name="car", а его значение подставляется из тегов <option> (строчка $message = "Марка автомобиля:$car";.
2. Раскрывающийся список с выбором нескольких элементов.
Для его создания необходимо в HTML-коде формы обратной связи добавить атрибут multiple="multiple" в тег <select > и, что особенно важно (!), добавить квадратные скобки после имени. В данном примере это name="car[ ]". Если их не добавить, то вы получите на почту только одно, последнее введенное значение из списка. Это происходит потому, что обработчику, то есть РНР-программе, последовательно передаются из формы все выбранные элементы (теги option), а так как переменная задана только одна ($car), то следующий элемент перезаписывает предыдущее значение. В результате и остается только последнее введенное значение.
Кроме того, желательно указать в теге <select> число выводимых строк в поле списка. Их количество задается атрибутом size и обычно устанавливается равным количеству элементов списка, но никто не запрещает выбрать любое значение, определяемое дизайном страницы, то есть вашей фантазией. Измененный вариант HTML-кода списка с выбором нескольких элементом и его вид в браузере показан на рис.2. Чтобы выбрать несколько значений, используйте клавиши Shift и Ctrl.
<form action="mail.php" method="post">
Выберите автомобили, которые вы хотите купить:<br />
<select name="car[]" size="4" multiple="multiple" style="width: 90%">
<option value="Феррари">Феррари </option>
<option value="Бентли">Бентли</option>
<option value="Жигули" disabled="disabled">Жигули</option>
<option value="Роллс-Ройс">Роллс-Ройс </option>
<option value="Ламборджини">Ламборджини </option>
<option value="Бугатти">Бугатти</option>
</select>
<br />
<br />
<input type="submit" value="Отправить" />
</form>
Рис.2. Форма обратной связи с выбором нескольких элементов из списка
Квадратные скобки в имени name="car[ ]" указывают PHP-программе, что переменную $car нужно считать массивом (списком), и каждый выбранный пользователем элемент добавлять в этот массив. Первый элемент будет $car[0], следующий - $car[1] и т.д.
Чтобы весь этот список, а не только последний выбранный элемент, поступил на вашу почту, необходимо изменить одну строку в приведенной выше программе на странице mail.php:
$message = "Марка автомобиля: $car[0] $car[1] $car[2] $car[3] $car[4] $car[5]";
Естественно, не забывайте проследить, чтобы количество переменных $car[ ] в этой строке равнялось количеству тегов <option> в вашей форме обратной связи. Для нашего случая их шесть.
В рассмотренных примерах использования тега <select> иногда возникает необходимость оставить в списке какие-либо элементы, но запретить их выбор пользователем. Для этого достаточно в атрибуте <option> соответствующей строки добавить disabled="disabled". При этом элемент выделяется серым цветом и становится недоступным для выбора. В примере на рис.2 - это "Жигули".
Замечание: всё вышеописанное полностью применимо и для случая группы флажков в теге <input name="имя группы [ ]" type="checkbox" />, когда необходимо выбрать несколько пунктов из списка.
14.11.2012 г.
Copyright © 2008 - Марк Розенталь e-mail:
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru