talentasia / form
一个基本的、与框架无关的表单构建包,包含一些额外功能,如记住旧输入和检索错误消息。
Requires
- php: >=5.4.0
Requires (Dev)
- illuminate/support: 4.*
- mockery/mockery: ~0.9
- phpunit/phpunit: 3.7.*
- satooshi/php-coveralls: ^1.0
This package is auto-updated.
Last update: 2024-09-26 16:11:27 UTC
README
一个不起眼的包名。使用流畅且直观的语法构建HTML表单。
安装
您可以通过在项目的根目录下终端运行以下命令来使用Composer安装此包
composer require talentasia/form
Laravel
此包可以作为Laravel 5中已删除的表单构建器的替代品使用。API不同,但所有功能都在。
如果您正在使用Laravel 4或5,可以通过在您的 config/app.php
文件中的 providers
数组中注册 FormServiceProvider
来自动获得旧输入和错误消息功能。
为此,只需更新您的 config/app.php
文件中的 providers
数组
'providers' => [ //... 'TalentAsia\Form\FormServiceProvider' ],
您也可以选择使用外观,只需在 config/app.php
中添加别名即可
'aliases' => [ //... 'Form' => 'TalentAsia\Form\Facades\Form', ],
请注意,在Laravel 4中,已经存在一个用于内置表单构建器的表单外观。如果您想使用两个,请使用不同的别名。如果您只想使用这个,请删除指向 Illuminate 组件的表单别名。
基本用法
入门
首先,实例化一个 FormBuilder...
$builder = new TalentAsia\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="reset">Reset Form</button> <?= $builder->reset('Reset Form'); ?> // <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'); ?> // Multiple data-* attributes can be set at once // <input type="text" data-foo="bar" data-bar="foo" name="foobar"> <?= $builder->text('foobar')->data(['foo' => 'bar', 'bar' => 'foo']); ?>
记住旧输入
如果您因为验证错误而重定向回表单,Form Builder 可以记住旧输入并自动填充表单字段。
要使此功能正常工作,您必须创建一个实现 OldInputInterface
的类并将其传递给 FormBuilder
$builder->setOldInputProvider($myOldInputProvider);
现在,如果用户有旧输入数据,表单元素将自动填充。
这可以很好地与 defaultValue()
方法配合使用,允许您设置一个默认值,如果用户已提交表单,则该值将被旧输入覆盖。
此包随带一个名为
IlluminateOldInput
的 Laravel 实现作为默认选项。
错误消息
FormBuilder 还允许您轻松检索表单元素的错误消息。要这样做,只需实现 ErrorStoreInterface
并将其传递给 FormBuilder
$builder->setErrorStore($myErrorStore);
此包随带一个名为
IlluminateErrorStore
的 Laravel 实现作为默认选项。
// 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
操作。