README

1分钟内构建完全定制的HTML表单

信息

UssForm是一个强大的独立表单构建库，可以在几分钟内创建和配置复杂的HTML表单。

该组件最初是为User Synthetics项目创建的，但现在是一个可以轻松集成到任何其他平台的独立库。

它利用了bootstrap 5的类名和构建模型进行样式设计，但如果你在项目中不使用bootstrap 5，则可以轻松地对其进行修改。

主要功能

• 轻松创建表单：快速轻松地构建HTML表单，减少开发时间。
• 自定义：设置表单属性，添加表单字段，并通过编程定义表单结构。
• 直观的API：UssForm的API用户友好，使表单生成过程简单直接。
• HTML输出：生成适合嵌入到您的网页中的HTML字符串。
• 扩展UssElement：利用UssElement的力量无缝集成到您的PHP项目中。

安装

要在项目中使用UssForm，请通过Composer要求它

composer require ucscode/uss-form

使用示例

以下是如何使用UssForm类创建表单的示例

use Ucscode\UssForm\Form;
use Ucscode\UssForm\Field;

// Instantiate the form

$form = new Form();

// Get the default internal Collection instance (or create and add new ones)

$collection = $form->getCollection(Form::DEFAULT_COLLECTION);

// Create any desired Field;

$regularField = new Field();
$emailField = new Field(Field::NODE_INPUT, Field::TYPE_EMAIL);
$passwordField = new Field(Field::NODE_INPUT, Field::TYPE_PASSWORD);
$textareaField = new Field(Field::NODE_TEXTAREA);
$selectField = new Field(Field::NODE_SELECT);

// Add the created fields into the collection

$collection->addField("username", $regularField);
$collection->addField("email", $emailField);
$collection->addField("password", $passwordField);
$collection->addField("textarea", $textareaField);
$collection->addField("select", $selectField);

// Return and print the HTML Output

echo $form->export();

生成的HTML输出

UssForm根据您在PHP代码中定义的组件和元素生成结构化的HTML输出。以下是一个示例，展示生成的HTML可能的样子

<form class='Form'> <!-- FORM -->

    <fieldset class='Collection'> <!-- COLLECTION -->

        <legend>...</legend>

        <...SOME OTHER NODES (Represeting Subtitle && Instructionc)...>

        <div class='container'>

            <div class='Field'> <!-- FIELD -->

                <label>...</label>

                <...SOME OTHER NODES (Representing message context like Info, Validation etc)...>

                <div class='gadget-container'> <!-- GADGET -->

                    <div class='widget-container'>
                        <input type="text" /> <!-- WIDGET -->
                    </div>

                    <...SOME OTHER WIDGET (IF ANY)...>

                </div>
            </div>

            <...SOME OTHER FIELD (IF ANY)...>
            
        </div>

    </fieldset>

    <...SOME OTHER COLLECTION (IF ANY)...>

</form>

这个结构反映了UssForm实例中不同组件之间的层次结构和关系。然而，您可能已经注意到，在上面的示例中，我们没有配置像Label、Field Name等任何内容。更多相关信息请参阅文档页面。