README

为 Laravel 优化的 Bootstrap 表单

Florms 是一个 Laravel 扩展包，可以帮助您快速方便地将 Bootstrap 4 表单添加到您的应用程序中。输入元素会自动包裹在标准容器中（例如 <div class="form-group">）。标签、验证错误、输入组和其他装饰器会自动正确构建，因此您无需考虑这些。HTML 属性和类选项通过链式方法添加，大多数输入都具备合理的默认值，因此您可以快速轻松地创建表单并回到应用程序更重要的部分。

安装

要安装 Florms，请使用 Composer 在您的控制台/终端中运行以下命令

composer require "se7enet/florms"

如果您使用的是 Laravel 5.5 或更高版本，那么这就足够了，Laravel 将会自动在 Composer 安装过程中发现服务提供者和外观。

Laravel v5.4 及以下版本

但是，如果您使用的是低于 5.5 的版本，或者您不使用自动发现，您需要自己添加以下内容

将服务提供者添加到 config/app.php 文件中的 providers 数组

Se7enet\Florms\FlormsServiceProvider::class,

并将外观添加到 config/app.php 文件中的 aliases 数组

'Florms' => Se7enet\Florms\FlormsFacade::class,

可选：发布配置

如果您想对皮肤进行自定义，也可以选择发布配置文件。

php artisan vendor:publish --provider="Se7enet\Florms\FlormsServiceProvider"

入门

要开始使用，只需打开一个新表单。通常这会在 Blade 模板内部完成，但您也可以将其存储在变量中。请注意，由于这本质上返回 HTML，如果您在 Blade 中使用它，应使用 {!! ... !!} 来打印未转义的字符串。

{!! Florms::open()->url('/url/to/route.php')->post() !!}

这将返回以下内容

<form action="/url/to/route.php" method="post">
<input type="hidden" name="_token" value="SOMECSRFTOKEN">

额外的路由和 HTTP 动词

您还可以使用 route() 或 action() 方法代替 url()，这些方法接受与 Laravel 的 route() 和 action() 辅助函数相同的参数，并将自动将您的路由名称或控制器操作引用转换为完整的 URL。

{!! Florms::open()->route('route.name', [$model->id], true)->post() !!}

此外，您还可以使用 get()、put()、patch() 或 delete() 方法代替 post() 来使用这些方法提交表单。由于 HTML 实际上不支持 PUT、PATCH 和 DELETE 动词，因此表单将使用 POST 动词提交，但将包含必要的隐藏输入 _method，以便 Laravel 了解路由目的。

模型绑定

如果您想使用现有模型预填充表单上所有字段的默认值，只需在表单打开器上链式调用 model($model) 方法。模型会附加到表单，您创建的任何输入都会自动接收一个 value 属性，该属性通过查找模型的属性 name 来确定。

例如，一个 $user 模型可能有一个 $user->first_name 属性，其值为 "John"。如果您将 model($user) 链接到表单打开器，然后创建一个字段，例如 Florms::text()->name('first_name')，则该字段将自动接收 value="John" 属性。

其他选项

您还可以通过链式调用 csrf(false) 来禁用 CSRF 令牌隐藏字段。

添加表单字段

一旦打开了表单，您就可以添加一个新字段。对于纯文本输入，您可能需要做如下操作

{!! Florms::text()
    ->name('first_name')
    ->label('First Name') !!}

这将得到以下内容

<div class="form-group">
    <label for="first_name">First Name</label>
    <input type="text" name="first_name" id="first_name" class="form-control">
</div>

如您所见，字段将被自动包裹在一个 form-group div 中，并且还会为您添加标准 Bootstrap 标签和输入类的类名。

选择框

您也可以创建选择框。默认情况下，选择框使用 Bootstrap 的 "自定义" 变体，以提供更多的样式选项。

{!! Florms::select()
    ->name("selectname")
    ->options([1=>'One', 2=>'Two', 3=>'Three'])
    ->value(2)
    ->label('Label Goes Here') !!}

您将获得

<div class="form-group">
    <label for="selectname">Label Goes Here</label>
    <select name="selectname" id="selectname" class="custom-select">
        <option value="1">One</option>
        <option value="2" selected>Two</option>
        <option value="3">Three</option>
    </select>
</div>

复选框和单选按钮

与选择框类似，复选框和单选按钮也使用 Bootstrap 的 "自定义" 风格。必要的包装器由 Florms 处理。表单还知道标签通常位于复选框和单选按钮之后，而不是像大多数其他输入类型那样在前面，并且它们在这里需要自己的自定义类。

{!! Florms::checkbox()
    ->name('acknowledgement')
    ->value(1)
    ->label('I acknowledge this.') !!}

<div class="form-group">
    <div class="custom-control custom-checkbox">
        <input type="checkbox" name="acknowledgement" id="acknowledgement" value="1" class="custom-control-input">
        <label for="acknowledgement" class="custom-control-label">I acknowledge this.</label>
    </div>
</div>

输入类型和属性

基本上所有 <input type="..."> 值都通过从 Florms 类调用适当的静态方法支持（例如 Florms::number()、Florms::date()、Florms::color() 等），以及额外的输入相关标签（例如 Florms::select() 和 Florms::textarea()）。

大多数 HTML 属性也支持，使用驼峰命名法。方法相互链接，并返回主输入对象，因此您可以构建完整的输入字段。

id 属性将根据字段的 name 自动添加，但您可以通过自己的 ID 覆盖它 - 如您所预期的那样，您只需将 id('your-id-goes-here') 方法链接到字段即可。

您可以通过使用 appendClass(...) 或 prependClass(...) 在正常 Bootstrap form-control 类之前或之后添加额外的类。

下面您可以看到一个更高级的示例，使用几个 HTML 属性以及一个额外的类，所有这些都附加到一个 number 字段类型。

{!! Florms::number()
    ->name('quantity')
    ->id('quantityId')
    ->label('Quantity')
    ->data('toggle', 'something')
    ->rel('last')
    ->max(100)
    ->min(0)
    ->step(1)
    ->appendClass('another-class') !!}

<div class="form-group">
    <label for="quantityId">
    <input type="number" id="quantityId" name="quantity" data-toggle="something" rel="last" max="100" min="0" step="1" class="form-control another-class">
</div>

替代语法

此外，如果您觉得更有意义，您可以将选项数组传递给原始方法调用，类似于 Laravel 内置表单构建器在从框架中删除之前的工作方式。当使用数组语法时，您应使用 spinal case 而不是驼峰命名法。您可以使用以下方式创建与上面相同的字段

{!! Florms::number([
    'name' => 'quantity',
    'id' => 'quantityId',
    'label' => 'Quantity',
    'data-toggle' => 'something',
    'rel' => 'last',
    'max' => 100,
    'min' => 0,
    'step' => 1,
    'append-class' => 'another-class',
]) !!}

总结

在创建所有字段之后，关闭表单，正如您所预期的那样

{!! Florms::close() !!}

通过关闭表单，它将清除任何模型附加项和其他选项，使您回到一个 tabula rasa 状态。一旦第一个表单被清除，您就可以创建另一个表单，具有另一个操作、另一个模型和不同的字段。

请注意，close() 方法只能由自己调用；您不能像大多数其他 Florms 方法那样链接任何其他方法，因为它只是渲染 </form> 关闭标签并将其作为字符串返回。

即将推出

Florms 仍在开发中。首先，我还需要构建完整的文档。这个自述文件只是触及了您可以使用的所有可能选项和属性的一小部分。

我还想构建一些其他功能。目前，您可以通过将方法名称本身链接来调用一些辅助元素的某些方法 - 例如，->formGroupAppendClass('another-class') 会调用字段的 formGroup 上的 appendClass() 方法，从而生成 <div class="form-group another-class">...</div>。

目前，您还不能进行更进一步的链式操作。例如，输入组内部包含多个子元素，我希望您能够使用链式调用方法深入到这些子元素中。一个例子可能是这样的：->inputGroupInputGroupAppendInputGroupTextPrependClass(...)，在内部的input-group-text span上调用prependClass(...)方法，该span位于input-group-append div中，而该div又位于input-group div中。我知道这看起来很荒谬，但现阶段没有其他方法可以添加自定义类或属性到这些子元素上，所以我想为这一功能实现一个解决方案。

贡献

如果您想贡献，我欢迎您提交pull请求。这是我的第一个Laravel包，所以我还在学习如何操作，请您在我不熟悉的时候多多包涵。

许可证

MIT许可证

在此特此授予任何人免费获得本软件及其相关文档副本（以下简称“软件”）的权利，不受限制地使用该软件，包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或销售软件副本，并允许提供软件的个人为此目的而这样做，前提是必须遵守以下条件：

se7enet / florms

维护者

详细信息