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=windows-1251"/>
<title>Обратная связь</title>
</head>
<body>
<?php
if (isset($_POST['car'])) {$car = $_POST['car'];}
$to = "pupkin@rambler.ru"; // Укажите здесь свой e-mail
$headers = "Content-type: text/plain; charset = windows-1251";
$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: Мой e-mail
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru
Ключевые слова: форма обратной связи, создание формы обратной связи, форма обратной связи для сайта