fullstackpe/micro-form

表单构建器

3.0.0 2021-01-30 20:35 UTC

This package is auto-updated.

Last update: 2024-09-15 03:29:11 UTC


README

Micro-form是一个库,可以将任何数据源转换为HTML表单元素。只能使用Json对象作为数据源。

安装

首先,您需要安装Composer。您可以按照getcomposer.org上的说明进行操作。之后运行

composer require fullstackpe/micro-form

如果您愿意,可以在项目文件夹中创建一个composer.json文件。

{
    "require": {
        "fullstackpe/micro-form": "^3.0"
    }
}

它如何工作?

创建一个jsform对象。

use micro\FormFactory;
$jsonForm = FormFactory::jsonForm();
echo $jsonForm->render($json);

然后调用render方法以获取表单元素。render方法接受一个Json对象。

示例

输入

<?php

$json = '[
    {
        "tag": "input",
        "type": "text",
        "name": "username",
        "class": "form-control"
    }
]';

use micro\FormFactory;
$jsonForm = FormFactory::jsonForm();
echo $jsonForm->render($json);

输出

<input type="text" name="username" class="form-control">

多行文本框

<?php

$json = '[
    {
        "tag": "textarea",
        "id": "story",
        "name": "story",
        "rows": "5",
        "cols": "33",
        "value": "It was a dark and stormy night..."
    }
]';

use micro\FormFactory;
$jsonForm = FormFactory::jsonForm();
echo $jsonForm->render($json);

输出

<textarea id="story" name="story" rows="5" cols="33">
It was a dark and stormy night...
</textarea>

选择框

<?php

$json = '[
    {
        "tag": "select",
        "name": "pets",
        "id": "pet-select",
        "value": [
            {
                "tag": "option",
                "label": "--Please choose an option--",
                "value": ""
            },
            {
                "tag": "option",
                "label": "Dog",
                "value": "dog"
            },
            {
                "tag": "option",
                "label": "Cat",
                "value": "cat"
            }
        ]
    }
]';

use micro\FormFactory;
$jsonForm = FormFactory::jsonForm();
echo $jsonForm->render($json);

输出

<select name="pets" id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
</select>

贡献

请随时贡献!只需创建一个新问题或新的pull请求。

许可

此库在MIT许可下发布。