ipridham/form-json

一个基本的、无框架的表单构建包，具有一些额外的功能，如记住旧输入和检索错误信息。

维护者

详细信息

github.com/ipridham/form-json

源代码

问题

安装次数: 10,927

依赖项: 1

建议者: 0

安全性: 0

星标: 2

关注者: 3

分支: 2

开放问题: 0

dev-master 2019-01-29 11:06 UTC

Requires

  • php: >=5.3.0

Requires (Dev)

MIT f54a5d0efb5a97787f889d2a6239db0519fa204d

  • Ian Pridham <info.woop@oxygen24.com>

This package is auto-updated.

Last update: 2024-09-04 15:36:16 UTC

README

Code Climate Coverage Status

一个无聊的包名。使用流畅、直观的语法构建表单HTML。

安装

您可以通过在项目根目录的终端中运行以下命令来使用Composer安装此包：

composer require adamwathan/form

Laravel

此包作为Laravel 5中删除的表单构建器的替代品运行良好。API不同，但所有功能都在。

如果您使用Laravel 4或5，可以通过在config/app.php中的providers数组中注册FormServiceProvider来自动获得对旧输入和错误信息功能的使用权限。

要这样做，只需更新您的config/app.php中的providers数组。

'providers' => [
        //...
        'AdamWathan\Form\FormServiceProvider'
    ],

您还可以选择通过在config/app.php中添加别名来使用门面。

'aliases' => [
        //...
        'Form' => 'AdamWathan\Form\Facades\Form',
    ],

请注意，在Laravel 4中，已经有一个内置的表单门面用于内置的表单构建器。如果您想同时使用这两个，请使用不同的别名。如果您只想使用这个，请删除指向Illuminate组件的Form别名。

基本用法

入门

首先，实例化一个FormBuilder...

$builder = new AdamWathan\Form\FormBuilder;

然后，使用FormBuilder来构建一个元素。例如

// <input type="text" name="email" value="example@example.com" required="required">
<?= $builder->text('email')->value('example@example.com')->required(); ?>
  • 所有元素都支持方法链，因此您可以向一个元素添加任意多的选项。
  • 所有元素都实现了__toString()，因此不需要手动渲染。

打开表单

// <form method="POST">
<?= $builder->open(); ?>

// <form method="GET">
<?= $builder->open()->get(); ?>

// <form method="POST">
// <input type="hidden" name="_method" value="PUT">
<?= $builder->open()->put(); ?>

// <form method="POST">
// <input type="hidden" name="_method" value="DELETE">
<?= $builder->open()->delete(); ?>

// <form method="POST" action="/test">
<?= $builder->open()->action('/test'); ?>

// <form method="POST" action="" enctype="multipart/form-data">
<?= $builder->open()->multipart() ?>

// <form method="POST" action="" enctype="custom">
<?= $builder->open()->encodingType("custom") ?>

文本和密码字段

文本和密码字段具有相同的接口。

// <input type="text" name="email">
<?= $builder->text('email'); ?>

// <input type="text" name="email" id="email_field">
<?= $builder->text('email')->id('email_field'); ?>

// <input type="password" name="password" class="required">
<?= $builder->password('password')->addClass('required'); ?>

// <input type="text" name="email" value="example@example.com" required="required">
<?= $builder->text('email')->value('example@example.com')->required(); ?>

其他可用方法

  • placeholder($string)
  • optional()
  • defaultValue($string)
  • disable()
  • enable()

文本区域

文本区域与常规文本字段具有相同的接口，有一些额外的有用方法。

// <textarea name="bio" rows="5" cols="50"></textarea>
<?= $builder->textarea('bio')->rows(5); ?>

// <textarea name="bio" rows="10" cols="20"></textarea>
<?= $builder->textarea('bio')->cols(20); ?>

// <textarea name="bio" rows="5" cols="20" class="important">My biography</textarea>
<?= $builder->textarea('bio')->rows(5)->cols(20)->addClass('important')->value('My biography'); ?>

复选框和单选按钮

// <input type="checkbox" name="terms" value="1">
<?= $builder->checkbox('terms'); ?>

// <input type="checkbox" name="terms" value="1" checked="checked">
<?= $builder->checkbox('terms')->check(); ?>

// <input type="checkbox" name="terms" value="1">
<?= $builder->checkbox('terms')->uncheck(); ?>

// <input type="checkbox" name="terms" value="1" checked="checked">
<?= $builder->checkbox('terms')->defaultToChecked(); ?>

// <input type="checkbox" name="terms" value="agree">
<?= $builder->checkbox('terms')->value('agree'); ?>

// <input type="radio" name="color" value="red">
<?= $builder->radio('color', 'red'); ?>

下拉列表

// <select name="birth_year"></select>
<?= $builder->select('birth_year'); ?>

// <select name="birth_year">
//   <option value="0">1990</option>
//   <option value="1">1991</option>
//   <option value="2">1992</option>
// </select>
<?= $builder->select('birth_year', [1990, 1991, 1992]); ?>

// <select name="birth_year">
//   <option value="1990">1990</option>
//   <option value="1991">1991</option>
//   <option value="1992">1992</option>
// </select>
<?= $builder->select('birth_year', ['1990' => 1990, '1991' => 1991, '1992' => 1992]); ?>

// <select name="birth_year">
//   <optgroup label="Ontario">
//     <option value="toronto">Toronto</option>
//     <option value="ottawa">Ottawa</option>
//   </optgroup>
//   <optgroup label="Quebec">
//     <option value="montreal">Montreal</option>
//     <option value="quebec_city">Quebec City</option>
//   </optgroup>
// </select>
$options = [
	'Ontario' => [
		'toronto' => 'Toronto',
		'ottawa' => 'Ottawa',
	],
	'Quebec' => [
		'montreal' => 'Montreal',
		'quebec_city' => 'Quebec City',
	]
];

<?= $builder->select('birth_year', $options); ?>

// <select name="birth_year">
//   <option value="1">1990</option>
// </select>
<?= $builder->select('birth_year')->addOption('1', 1990); ?>

// <select name="birth_year">
//   <option value="1">1990</option>
//   <option value="2">1991</option>
//   <option value="3" selected>1992</option>
// </select>
<?= $builder->select('birth_year', ['1' => 1990, '2' => 1991, '3' => 1992])->select('3'); ?>

按钮

// <button type="button">Click Me</button>
<?= $builder->button('Click Me'); ?>

// <button type="submit">Sign Up</button>
<?= $builder->submit('Sign Up'); ?>

// <button type="submit" class="js-submit">Sign Up</button>
<?= $builder->submit('Sign Up')->addClass('js-submit'); ?>

隐藏输入

// <input type="hidden" name="secret" value="my-secret-value">
<?= $builder->hidden('secret')->value('my-secret-value'); ?>

标签

基本标签

// <label>Email</label>
<?= $builder->label('Email'); ?>

// <label for="email">Email</label>
<?= $builder->label('Email')->forId('email'); ?>

包装其他元素

// <label>Email<input type="text" name="email"></label>
<?= $builder->label('Email')->before($emailElement); ?>

// <label><input type="text" name="email">Email</label>
<?= $builder->label('Email')->after($emailElement); ?>

设置属性

// Attributes can be set with attribute(...)
// <input type="text" name="foobar" min="4">
<?= $builder->text('foobar')->attribute('min', 4); ?>

// Or by calling the attribute name as a method
// <input type="text" name="foobar" min="4">
<?= $builder->text('foobar')->min(4); ?>

// Setting data-* attributes
// <input type="text" data-foo="bar" name="foobar">
<?= $builder->text('foobar')->data('foo', 'bar'); ?>

记住旧输入

当您因验证错误而重新定向回表单时，FormBuilder可以记住旧输入并自动预填充您的表单字段。

要使此功能正常工作，您必须创建一个实现OldInputInterface的类，并将其传递给FormBuilder

$builder->setOldInputProvider($myOldInputProvider);

现在，如果用户有旧输入数据，您的表单元素将自动填充。

这与defaultValue()方法一起工作，允许您设置一个默认值，如果用户已经提交了表单，则该值将被旧输入覆盖。

此包附带一个Laravel实现，称为IlluminateOldInput。

错误信息

FormBuilder还允许您轻松检索表单元素的错误信息。为此，只需实现ErrorStoreInterface并将其传递给FormBuilder

$builder->setErrorStore($myErrorStore);

此包附带一个Laravel实现，称为IlluminateErrorStore。

// Check if the form has an error for an element
$builder->hasError('email');

// Retrieve the error message for an element
$builder->getError('email');

您还可以向getError()提供format参数，以清理您的标记。而不是这样做

<?php if ($builder->hasError('email')): ?>
	<span class="error"><?= $builder->getError('email'); ?></span>
<?php endif; ?>

...您可以简单地这样做，这将显示格式化的消息（如果存在），否则不显示。

<?= $builder->getError('email', '<span class="error">:message</span'); ?>

CSRF保护

假设您在实例化Formbuilder时设置了CSRF令牌（或您正在使用Laravel），您可以轻松地将CSRF令牌添加到表单中，如下所示

<?= $builder->token(); ?>

模型绑定

有时你可能会遇到一个表单，其中所有字段都与系统中某种对象上的属性匹配，并且你想让用户能够编辑这些属性。通过允许您将模型绑定到表单，模型绑定使得这个过程变得非常简单，该表单将自动为所有字段提供默认值。

$model->first_name = "John";
$model->last_name = "Doe";
$model->email = "john@example.com";
$model->date_of_birth = new DateTime('1985-05-06');

<?= $builder->open(); ?>
<?= $builder->bind($model); ?>
<?= $builder->text('first_name'); ?>
<?= $builder->text('last_name'); ?>
<?= $builder->email('email'); ?>
<?= $builder->date('date_of_birth'); ?>
<?= $builder->close(); ?>

这将与Laravel的Eloquent模型无缝工作。

在使用模型绑定时，旧输入将优先于模型上的任何值，因此您仍然可以轻松地将用户重定向回表单，并带有任何验证错误，而不会丢失他们输入的数据。

注意：务必在创建任何其他表单元素之前进行bind。