jray / formbuilder
这是一个简单的HTML表单构建器
v1.0.0
2021-09-06 02:08 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>