Урок 12. Динамическая генерация HTML-кода для форм

В этом уроке вы узнаете о том, как создавать элементы HTML-форм с помощью PHP. Эти приемы позволяют задавать значения по умолчанию для элементов ввода, а также генерировать раскрывающиеся списки и группы переключателей на основе сценария.

Установка значений по умолчанию

Рассмотрим несколько простых примеров того, как установить при помощи PHP стандартные значения для некоторых элементов при загрузке страницы.

Стандартные значения для ввода

Значение по умолчанию для текстового поля ввода задается в атрибуте VALUE. Это значение будет отображаться в форме после загрузки страницы, и если его не изменить, оно и передается в PHP-сценарий при отправке формы.

Рассмотрим страницу электронного магазина с корзиной для покупок. У покупателя есть возможность изменить количество единиц товаров в корзине, перед окончательной отправкой заказа. Текущее количество товаров в корзине можно изменить в небольшом текстовом поле. После этого пользователь может щелкнуть на кнопке подачи формы и обновить содержимое корзины. В листинге 12.1 показано, как реализовать магазин. Он одержит всего один товар и дает возможность выбрать его количество для покупки.

Листинг 12.1. Значение по умолчанию для текстового поля ввода

<?php
if(isset($_POST[“quantity”])) {
    $quantity = settype($_POST[“quantity”], “integer”);
}
else {
    $quantity = 1;
}

$item_price = 5.99;
printf(“%d x item = $%.2f”, $quantity * $item_price);
?>
<FORM ACTION=”buy.php” METHOD=POST>
Обновить количество:
<INPUT NAME=”quantity” SIZE=2
    VALUE=”<?php echo $quantity;?>”>
<INPUT TYPE=SUBMIT VALUE=”Изменить количество”>
</FORM>

При начальной загрузке страницы переменная $quantity равна единице, и это значение используется при расчете общей цены. После этого внутри выражения VALUE выполняется инструкция PHP, которая выводит значение переменной $quantity. Если ввести новое значение, оно будет использоваться вместо предыдущего.

Сценарий нужно сохранить в файле buy.php, тогда форма передаст данные в тот же сценарий. Если изменить количество и щелкнуть на кнопке подачи формы, сценарий рассчитает новую итоговую стоимость. Кроме того, после каждой перезагрузки страницы устанавливается новое значение по умолчанию.

Установка атрибута CHECKED для типа CHECKBOX

Атрибут CHECKED устанавливает или сбрасывает флажок. С помощью PHP можно выполнить проверку для дескриптора <INPUT>, чтобы определить состояние атрибута CHECKED для типа CHECKBOX:

<INPUT TYPE=”CHECKBOX” NAME=”mybox” <?php if(условие) echo “CHECKED”;?>>

Такой вариант выглядит слегка непривычно, потому что два символа > находятся в конце дескриптора — один для того чтобы закрыть PHP-код, а другой, - чтобы закрыть дескриптор <INPUT>. На самом деле положение атрибута CHECKED не имеет значение, его можно вставить в другом месте для повышения удобочитаемости:

<INPUT <?php if(условие) echo “CHECKED”;?> TYPE=”CHECKBOX” NAME=”mybox” >

Закрытие дескрипторов PHP. Все небольшие вставки PHP-кода в HTML нужно обязательно закрывать комбинацией ?>. Если ее пропустить, весь дальнейший HTML-код трактуется как PHP, и на экране получается множество ошибок.

При вставке PHP в HTML-код нужно внимательно следить за пробелами. Если в примере выше удалить пробел после закрытия дескриптора PHP и условие будет истинным, на выходе получим следующий HTML-код:

<INPUT CHECKEDTYPE="CHECKBOX" NAME=”mybox”>

Название CHECKEDTYPE не является частью дескриптора <INPUT>, поэтому браузер вместо CHECKBOX выведет стандартный тип NEXT! Поэтому лучше всегда оставлять место вокруг динамических элементов в HTML-коде.

Установка переключателя

Атрибут CHECKED также используется для группы RADIO, чтобы установить элемент по умолчанию. Например, в электронном магазине можно предложить три варианта с различной ценой. Для того чтобы узнать, на каком варианте остановился покупатель, достаточно установить один вариант по умолчанию. При желании покупатель всегда сможет выбрать другой вариант (переключатель сбрасывается только при выборе другого из этой же группы):

<INPUT TYPE=”RADIO” CHEKED NAME=”shipping” VALUE=”economy”> Экономный
<INPUT TYPE=”RADIO” NAME=”shipping” VALUE=”standard”> Стандартный
<INPUT TYPE=”RADIO” NAME=”shipping” VALUE=”express”> Быстрый

Чтобы динамически установить атрибут CHECKED для одного из группы переключателей, нужно создать условие, которое проверит текущее значение переменной $shipping на совпадение с соответствующим элементом. В листинге 12.2 приводится пример.

Листинг 12.2. Установка значения по умолчанию для группы переключателей

<?php
if (!isset($shipping)) {
    $shipping = “economy”;
}
echo “Вы получите $shipping вариант заказа”;
?>
<FORM ACTION=”shipping.php” METHOD=POST>
<INPUT TYPE=”RADIO” NAME=”shipping” VALUE=”economy”
    <?php if ($shipping == “economy”) echo “CHECKED”;?>>
Экономный

<INPUT TYPE=”RADIO” NAME=”shipping” VALUE=”standard”
    <?php if ($shipping == “standard”) echo “CHECKED”;?>>
Стандартный

<INPUT TYPE=”RADIO” NAME=”shipping” VALUE=”express”
    <?php if ($shipping == “express”) echo “CHECKED”;?>>
Быстрый
<INPUT TYPE=”SUBMIT” VALUE=”Изменить вариант заказа”>
</FORM>

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

Установка стандартного значения для раскрывающегося списка

Атрибут SELECTED устанавливает дескриптор <OPTION> как элемент по умолчанию. Если в группе <OPTION> нет элемента с атрибутом SELECTED, первый устанавливается по умолчанию.

Можно использовать PHP для установки атрибута SELECTED, пройдя по всему списку дескрипторов <OPTION>. Но результат будет таким же громоздким, как и для группы RADIO. В листинге 12.3 приводится аналог примера из листинга 12.2 для группы элементов <OPTION>.

Листинг 12.3. Установка стандартного значения для раскрывающегося списка

<?php
if (!isset($shipping)) {
    $shipping = “economy”;
}
echo “ Вы получите $shippping вариант заказа”;
?>
<FORM ACTION=”shipping.php” METHOD=POST>
<SELECT NAME=”shipping”>
<OPTION <?php if ($shipping == “economy”) echo “SELECTED”; ?>
    VALUE=”economy”>Экономный</OPTION>
<OPTION <?php if ($shipping == “standard”) echo “SELECTED”; ?>
    VALUE=”standard”>Стандартный</OPTION>
<OPTION <?php if ($shipping == “express”) echo “SELECTED”; ?>
    VALUE=”express”>Быстрый</OPTION>
<INPUT TYPE=”SUBMIT” VALUE=”Изменить вариант заказа”>
</FORM>

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

Создание элементов формы

Теперь рассмотрим, как с помощью специальных PHP-функций можно динамически генерировать элементы HTML-форм. Такая модульность позволяет использовать функцию снова и снова, если возникает необходимость повторно задействовать соответствующий элемент.

Создание динамической группы переключателей

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

Пусть нужно реализовать функциональность, которая с помощью следующего кода генерирует группу переключателей:

$options = array(“economy” => “Экономичный”,
        “standard” => “Стандартный”,
        “express” => “Экспресс”);
$default = “economy”;
$html = generate_radio_group(“shipping”, $options, $default);

Как видно, такая функция очень подходит для регулярного применения в HTML-формах. Набор похожих функций значительно облегчает выполнение рутинных задач. Ниже приводится пример реализации функции generate_radio_group:

function generate_radio_group($name, $options, $default=””) {
    $name = htmlentities ($name);
    foreach ($options as $value => $label) {
        $value = htmlentities ($value);
        $html .= “<INPUT TYPE=\”RADIO\” ";
        if ($value == $default) {
            $html .= “CHECKED “;
        }
        $html .= “NAME=\”$name\” VALUE=\”$value\”>”;
        $html .= $label . “<br>”;
    }
    return ($html);
}

Ядром функции является цикл, который проходит по всем значениям массива $options. Он создает по очереди каждый дескриптор <INPUT> с одинаковым значением атрибута <NAME> и разными — атрибута VALUE. Поясняющий текст размещается после каждой кнопки. Сразу за ним ставится форматирующий дескриптор <br> между каждым переключателем этой группы. При желании можно отформатировать этот список с помощью таблицы или другим подходящим способом.

При очередной итерации сценарий сравнивает текущее значение $value с переданным значением в переменной $default. Если они совпадают, атрибут CHECKED добавляется в генерирующийся HTML. Напомним, что важно ставить пробелы. Поэтому после CHECKED выводится дополнительный пробел в HTML-коде.

Значение $default является необязательным. Функцию generate_radio_group можно вызвать с двумя аргументами. Тогда не устанавливается переключатель по умолчанию.

HTML-объекты. Функция htmlentities позволяет заменить определенные символы в строке на соответствующие HTML-объекты. Значение переменных $name и $value выводится внутри других HTML-дескрипторов и может их нарушить. Применение htmlentities позволяет избежать этого нежелательного поведения.

Создание динамического раскрывающегося списка

Динамический раскрывающийся список реализуется так же, как и группа переключателей. Теперь в каждой итерации цикла создается дескриптор <OPTION> для всех элементов по очереди. Кроме того функция выводит дескрипторы <SELECT> и </SELECT> вокруг списка элементов <OPTION>. Функция generate_menu выглядит так:

function generate_menu ($name, $options, $default=””) {
    $html = “<SELECT NAME=\”$name\”>”;
    foreach ($options as $value => $label) {
        $html .= “<OPTION “;
        if ($value == $default)
            $html .= “SELECTED ";
            $html .= “VALUE=\$value\”>$label</OPTION>";
    }
    $html .= “</SELECT>”;
    return ($html);
}

Функция возвращает полный HTML-код для раскрывающегося списка с нужными опциями. Можно также реализовать ее без внешних дескрипторов <SELECT> вокруг, это позволяет установит нужный сценарий JavaScript на событие onChange или любое другое.

Элемент множественного выбора

Атрибут MULTIPLE в элементе <SELECT> позволяет пользователю выбрать несколько элементов из списка. Для этого нужно удерживать клавишу <Ctrl> и щелкнуть мышкой на нужных опциях. Чтобы обработать несколько выбранных (отмеченных) элементов в PHP, имя должно быть массивом. При отправки формы массив будет состоять из значений выбранных элементов в порядке их следования.

Например, создадим список с множественным выбором, как в следующем HTML-коде. Выберем и передадим значения в PHP-сценарий с одной инструкцией — print_r. На экране мы увидим, что элемент $_POST[“colors”] является массивом всех выбранных значений:

<SELECT MULTIPLE NAME=”colors[]”>
    <OPTION VALUE=”red”>Красный</OPTION>
    <OPTION VALUE=”white”>Белый</OPTION>
    <OPTION VALUE=”blue”>Синий</OPTION>
</SELECT>

Если выбрать все три варианта, в массиве $_POST[“colors”] будет три элемента с числовыми индексами от 0 до 2 с соответствующими значениями red, white и blue.

Аналогичный принцип подходит для любого типа ввода. Если существует несколько элементов с одинаковым именем, которое заканчивается парой квадратных скобок, PHP создает массив с таким именем и элементами для каждого значения.

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

Окончательный вариант примера в этом уроке использует функцию generate_checkboxes для создания набора флажков с одинаковым именем. Его можно использовать как альтернативу к <SELECT MULTIPLE>. Это еще один способ реализации множественного выбора в HTML-форме. Функция с простым примером использования приводится в листинге 12.4.

Листинг 12.4. Реализация множественного выбора с помощью флажков

<?php
function generate_checkboxes ($name, $options, $default=array()) {
    if (!is_array($default)) {
        $default = array();
    }
    foreach ($options as $value => $label) {
        $html .= “<INPUT TYPE=CHECKBOX ";
        if (in_array($value, $default)) {
            $html .= “CHECKED “;
        }
        $html .= “NAME=\”{$name}[]\” VALUE=\”$value\”>”;
        $html .= $label . “<br>”;
    }
    return($html);
}

$options = array(“movies” => “Ходить в кино”,
          “music” => “Слушать музыку”,
          “sport” => “Играть или смотреть спортивные передачи”,
          “travel” => “Путешествовать”);
$html = generate_checkboxes (“interests”, $options, $interests);
?>
<H1>Пожалуйста, укажите область ваших интересов</H1>
<FORM ACTION=”interests.php” METHOD=POST>
<?php print $html;?>
<INPUT TYPE=SUBMIT VALUE=”Продолжить”>
</FORM>

В функции generate_checkboxes аргумент $default является массивом, а не одиночным значением. Это позволяет выбрать несколько вариантов по умолчанию. Массив $default может точно соответствовать набору значений, которые получает PHP из соответствующего HTML-элемента.

Функция in_array позволяет узнать, как те флажки нужно установить. Она проверяет, находится ли данное значение в списке стандартных значений. Если значение $value содержится в массиве $default, флажок устанавливается при загрузке страницы.

В листинге 12.4 эта функция используется для части Web-странички, где запрашивается область интересов посетителя. Он может выбрать произвольное количество вариантов из списка. После этого сценарий отправляет соответствующие флажки при выводе. Тогда пользователь может изменить свой выбор.

В массиве $interests, который формируется в PHP, каждый элемент — это значение ключа из массива $options. Отыскать подпись, соответствующую каждому выбранному варианту, можно, обратившись к соответствующему элементу $options.

Резюме

В этом уроке вы научились динамически генерировать HTML-компоненты и освоили несколько приемов для создания динамических элементов ввода. В следующем уроке вы узнаете о том, как проверить значения HTML-форм.