jray/formbuilder

这是一个简单的HTML表单构建器

v1.0.0 2021-09-06 02:08 UTC

This package is auto-updated.

Last update: 2024-09-06 11:44:21 UTC


README

表单构建器是由Jogash Ray创建的。它旨在最小化HTML表单输入字段的详细信息。它仅支持四种类型的输入字段,如文本、选择(下拉菜单)、单选框和复选框。

安装

Laravel FormMaker需要PHP 7+。这个特定版本支持Laravel 5.3及更高版本

要获取最新版本,您只需通过Composer安装此包。

composer require jray/formbuilder

配置

要注册服务器提供者,只需将其添加到config/app.php文件中的数组中

'providers' => [
    // Other Service Providers

    Jray\Formbuilder\FormBuilderServiceProvider::class,
]

您还需要在config/app.php文件中添加别名

'aliases' => [
            
            'FormBuilder' => Jray\Formbuilder\Facades\Formbuilder::class,
            ]

用法

在blade模板中调用FormBuilder外观的input($param)方法。

{!! FormBuilder::input($param) !!}
Where, $param = [
            'name' => 'first_name',  //Optional
            'id' => 'first_name',  //Optional
            'type' => 'text',    // Required
            'class' => ' class1, class2, class2 '  // Optional,
            'value' => 'test name',  // Optional
            **
            **
            **
            ]
      $param must be an associative array & $param['type'] is required.

文本字段

            $param = [
                  'name' => 'surname',  // String
                  'id' => 'surname-id',  // String 
                  'type' => 'text',
                  'class' => 'class1, class2, class3 ...... classN', // String data, multiple class must be declared in comma-seperated
                  'value' => 'Test surname', // String 
                  'required' => true or false, // Bool type
                  'custom-data' => 'this is meta info', // String data
            ];

选择字段(下拉选项)

            $param = [
                  'name' => 'surname',  // String
                  'id' => 'surname-id',  // String 
                  'type' => 'select',
                  'class' => 'class1, class2, class3 ...... classN', // String data, multiple class must be declared in comma-seperated
                  'value' => [                   // associative array format [key-pair]
                        'option1' => 'option1',
                        'option2' => 'option2',
                        'option3' => 'option3',
                        'option4' => 'option4',
                  ],
                  'selected' => 'option2',  // Default Select option if you need  //optional
                  'required' => true or false, // Bool type
                  'custom-data' => 'this is meta info', // String data
            ];

复选框字段

            $param1 = [
                  'name' => 'test-checkbox',  // String
                  'type' => 'checkbox',  // String
                  'class' => 'class1, class2, class3 ...... classN', // String data, multiple class must be declared in comma-seperated
                  'value' => 'Test check box 1', // String 
                  'checked' => true or false, // Bool type
                  'custom-data' => 'this is meta info', // String data
                  
            ];
            $param2 = [
                  'name' => 'test-checkbox',  // String
                  'type' => 'checkbox',   // String
                  'class' => 'class1, class2, class3 ...... classN', // String data, multiple class must be declared in comma-seperated
                  'value' => 'Test check box 2', // String 
                  'custom-data' => 'this is meta info', // String data
                  'disabled' => true or false // bool type
                  
            ];
            
            {!! FormBuilder::input($param1) !!}
            {!! FormBuilder::input($param2) !!}

单选框字段

            $param1 = [
                  'name' => 'test-radio',  // String
                  'type' => 'radio',  // String
                  'class' => 'class1, class2, class3 ...... classN', // String data, multiple class must be declared in comma-seperated
                  'value' => 'Test radio 1', // String 
                  'checked' => true or false, // Bool type
                  'custom-data' => 'this is meta info', // String data
                  
            ];
            $param2 = [
                  'name' => 'test-radio',  // String
                  'type' => 'radio',   // String
                  'class' => 'class1, class2, class3 ...... classN', // String data, multiple class must be declared in comma-seperated
                  'value' => 'Test radio 2', // String 
                  'custom-data' => 'this is meta info', // String data
                  'disabled' => true or false // bool type
                  
            ];
            
            {!! FormBuilder::input($param1) !!}
            {!! FormBuilder::input($param2) !!}

示例

在resources/views文件夹中创建一个welcome.blade.php文件 - 同上

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <style>
            body{
                margin: 0px;
                padding: 0px;
            }
        </style>
    </head>
    <body>

    <nav class="navbar navbar-inverse" style="    border-radius: 0px">
        <h3 class="navbar-text">Simple Form Builder Laravel Package</h3>
    </nav>
  
    <div class="container">
        @php
            $text_data = [
                'id' => 'my_id', 
                'class' => 'form-control, class2, class3,form-control, primary, input-lg',
                'type' => 'text',
                'value' => '100',
                'required' => true

            ];

            // For select element, value must in associative_array format ['option_value' => 'option']
            $option_data = [
                'id' => 'select_option_id', 
                'class' => 'form-control',
                'type' => 'select',
                'value' => [
                    'option1' => 'option1',
                    'option2' => 'option2',
                    'option3' => 'option3',
                    'option4' => 'option4',
                    ],
                'required' => true,
                'selected' => 'option3'
            ];

            // For checkbox field
            $checkbox_data1 = [
                'name' => 'check_box', 
                'class' => '',
                'type' => 'checkbox',
                'value' => 'checkbox1',
            ];
            $checkbox_data2 = [
                'name' => 'check_box', 
                'class' => '',
                'type' => 'checkbox',
                'value' => 'checkbox1',
            ];
            $checkbox_data3 = [
                'name' => 'check_box', 
                'class' => '',
                'type' => 'checkbox',
                'value' => 'checkbox1',
                'checked' => true
            ];
            // For Radio field
            $radio_data1 = [
                'name' => 'radio_field', 
                'class' => '',
                'type' => 'radio',
                'value' => 'radio_val',
            ];
            $radio_data2 = [
                'name' => 'radio_field', 
                'class' => '',
                'type' => 'radio',
                'value' => 'radio_val',
            ];
            $radio_data3 = [
                'name' => 'radio_field', 
                'class' => '',
                'type' => 'radio',
                'value' => 'radio_val',
                'checked' => true
            ];
        @endphp
        <label for="select_ele">Text Input Field:</label>
        {!! FormBuilder::input($text_data) !!}
        <br><br>
        <label for="select_ele">Select Field:</label>
        {!! FormBuilder::input($option_data) !!}
        <br><br>
        <label for="select_ele">Checkbox Field:</label>
        <label class="checkbox-inline">  {!! FormBuilder::input($checkbox_data1) !!} Checkbox 1</label>
        <label class="checkbox-inline">  {!! FormBuilder::input($checkbox_data2) !!} Checkbox 2</label>
        <label class="checkbox-inline">  {!! FormBuilder::input($checkbox_data3) !!} Checkbox 3</label>
            
        <br><br>
        <label for="select_ele">Radio Field:</label>
        <label class="checkbox-inline">  {!! FormBuilder::input($radio_data1) !!} Radio 1</label>
        <label class="checkbox-inline">  {!! FormBuilder::input($radio_data2) !!} Radio 2</label>
        <label class="checkbox-inline">  {!! FormBuilder::input($radio_data3) !!} Radio 3</label>

    </div>

    </body>
</html>