webew
Войти » Регистрация
 
PHP
HTML

Генерация HTML-кода форм с помощью языка PHP

11 октября 2014, 2:44

Генерация HTML-кода форм с помощью языка PHP

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

Состав пакета

В состав инструментария входят:

  • функция для генерации данных полей (код доступен в виде отдельного PHP-файла)
  • HTML-шаблоны полей (в виде архива)
  • обработчик шаблонов (ему посвящена отдельная статья, в которой и опубликован его код)

Основные принципы составления конфигурации полей

Предположим, нужно получить вот такую форму:

Для этого потребуется следующий код PHP:

# 1. Получаем данные полей формы

    require_once 'make_form_data.php'; # Подключаем код функции
   
    $cfg = array # Составляем конфигурацию полей
        (   
            // первая группа
            'short_note',
            'longer_text',
            'some_file',
            'flag',
           
            // вторая группа
            'period'   => array('values' => array(
                                        'день',
                                        'неделя',
                                        'месяц',
                                        'год',
                                     )),
            'shape'    => array('values' => array(
                                        'round' => 'круглый',
                                        'square' => 'квадратный',
                                        'triangle' => 'треугольный'
                                     )),
            'size'     => array('values' => array(
                                        array('value' => '', 'title' => '-- размер --'),
                                        array('value' => 'small', 'title' => 'маленький'),
                                        array('value' => 'medium', 'title' => 'средний'),
                                        array('value' => 'big', 'title' => 'большой'),
                                      )),
            'color'    => array('attr' => array('size' => 5), // число видимых элементов
                                                              // у <select>  
                                'values' => array(
                                        'black',
                                        'white',
                                        'red' => 'красный',
                                        'blue' => 'синий',
                                        array('value' => 'green', 'title' => 'зеленый')
                                     )),
        );
   
    $FORMDATA = make_form_data($cfg, $_POST); # Генерируем данные полей  
                                              # с учетом параметров HTTP-запроса
# 2. Получаем HTML-код формы
   
    require_once 'websun.php'; # Подключаем обработчик шаблонов
   
    $HTML = websun_parse_template_path($FORMDATA, 'form.tpl'); # Подставляем данные
                                                               # в HTML-шаблон формы

С точки зрения составления конфигурации поля делятся на две группы:

  1. Одиночные поля:

    • <input type="text">
    • <input type="checkbox">
    • <textarea>
    • <input type="file">

    Составить конфигурацию для этих полей очень просто — надо всего лишь указать их имена1.

  2. Списки значений для выбора. Значения перечисляются в параметре values, каждое из них может быть указано в формате array('value' => 'значение', 'title' => 'подпись'),
    'значение' => 'подпись' или просто 'значение'. Такими полями являются:

    • набор <input type="radio">
    • набор <input type="checkbox"> для выбора нескольких значений одновременно
    • <select> и <select multiple>

В шаблоне формы каждому из полей соответствует запись вида {* + *имя* | шаблон *}:

<form method="POST"> <!-- - Для лучшей читаемости HTML-разметка таблицы не приводится -->
   
    Текст
    {* + *short_note*  | fields/input.tpl *}
   
    Многострочный текст
    {* + *longer_text* | fields/textarea.tpl *}
   
    Загрузка файла
    {* + *some_file*   | fields/file.tpl *}
   
    Флаг (вкл./выкл.)
    {* + *flag*        | fields/checkbox.tpl *}
   
    Радиокнопки
    {* + *period*      | fields/radios.tpl *}
   
    Выбор нескольких значений
    {* + *shape*       | fields/checkbox-multiple.tpl *}
   
    Выпадающий список
    {* + *size*        | fields/select.tpl *}
   
    Список с возможностьюодновременного выборанескольких значений
    {* + *color*       | fields/select-multiple.tpl *}
   
    <button>Отправить</button>
   
</form>

Атрибуты полей

Случается, что полю нужно присвоить какой-то атрибут, будь то класс, стиль или текст-заглушка. Сделать это можно, включив в конфигурацию поля параметр attr, в котором нужные атрибуты следует перечислить в формате 'имя' => 'значение'2. Например, конфигурация

'input_2' => array(
    'attr' => array(
            'placeholder' => 'пишите сюда',
            'class' => 'special',
            'style' => 'border: 2px solid #808080; padding: 2px',
        ),
)

в сочетании с шаблоном input.tpl даст:

<input
 type="text"
 name="input_2"
 value=""
  placeholder="пишите сюда" class="special"  style="border: 2px solid #808080; padding: 2px"
>

Значения атрибутов перед вставкой обрабатываются функцией htmlspecialchars().3

Поля, соответствующие ассоциативным массивам

Форма может содержать поля для указания нескольких значений одного и того же свойства, которые в HTTP-запросе удобно получать в виде ассоциативного подмассива.

Например, ограничение по цене удобно иметь в виде

[price] => Array
      (
            [min] => ...
            [max] => ...
      )

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

'price' => array(
        'keys' => array('min', 'max'),
    );

В массиве для подстановки в шаблон добавится уровень вложенности, и к полям нужно будет обращаться по ключам:

{* + *price.min* | fields/input.tpl *}
{* + *price.max* | fields/input.tpl *}

Бывает нужно дифференцировать отдельные поля, указав те или иные индивидуальные свойства. В этом случае элементы массива keys принимают формат описания конфигурации поля4. Например:

'price' => array(
        'keys' => array(
                'min' => array(
                        'attr' => array(
                                'placeholder' => 'от',
                            ),
                    ),
                'max' => array(
                        'attr' => array(
                                'placeholder' => 'до',
                            ),
                    ),
            ),
    );

Ключей может быть более двух: 'keys' => array('min', 'max', 'avg', ...) и т.д.5

1. Сокращенной записи вида 'имя' соответствует полная форма 'имя' => array()

2. Атрибуты, которые обычно применяют без значений, указываются с дублированием:
'readonly' => 'readonly', 'disabled' => 'disabled' и т.п.

3. Это удобно, в частности, когда в качестве атрибута нужно использовать JSON. Например:

'attr' => array(
        'class' => 'special',
        'data-one' => '{"a":1,"b":2}',
        'data-two' => '{"c":20,"d":30}',
    )
Благодаря обработке htmlspecialchars() кавычки из JSON встанут в значение атрибута без проблем.

4. При этом параметры, не указанные в элементе keys, наследуются от родительской конфигурации.

5. Вложенность ключей может быть многоуровневой:

'price' => array(
        'keys' => array(
                'min',
                'max' => array(
                        'keys' => array(
                                'deep',
                                'deeper' => array(
                                        'keys' => array(
                                                'very_deep',
                                                ...
                                            ),
                                    ),
                            ),
                    ),
            ),
    )


© Все права на данную статью принадлежат порталу webew.ru. Перепечатка в интернет-изданиях разрешается только с указанием автора и прямой ссылки на оригинальную статью. Перепечатка в печатных изданиях допускается только с разрешения редакции.
Добавить комментарий
Отображение комментариев: Древовидное | Плоское
NO USERPIC

maks-vint

HTML-шаблоны полей (в виде архива) ошибка при переходе
12.07.2016, 13:24
Ответить

1234ru

Пардон. Ссылку в статье исправил.
То, что не убивает нас, делает нас инвалидами.
12.07.2016, 16:23
Ответить

wwwplaton

За все время вот так вот случайно наткнулся на это. Я что то подобное мучил для себя, но вышло конечно хуже чем тут.
Михаил, а не думали сделать обработку этих же форм? Применяя разные фильтры. К примеру поле может быть текст, только цифры или e-mail адрес. Было бы очень интересно.
03.01.2017, 22:28
Ответить

1234ru

http://webew.ru/articles/5000.webew
;)
То, что не убивает нас, делает нас инвалидами.
09.01.2017, 09:50
Ответить

wwwplaton

Опа, а я думал мне оно приснилось. Значит я все таки ее как то читал но не придал значению. Сегодня перечитал, отлично. Нужно действовать. Спасибо Михаил.
09.01.2017, 22:47
Ответить
Добавить комментарий
Отображение комментариев: Древовидное | Плоское
© 2008—2024 webew.ru, связаться: x собака webew.ru
Сайт использует Flede и соответствует стандартам WAI-WCAG 1.0 на уровне A.
Rambler's Top100