README

生成具有 Bootstrap 4 样式的 HTML 表单标签和字段的库。

依赖项
安装
使用
1. bsText
2. bsSelect
3. bsFile
4. bsCheckbox
5. bsRadio
6. bsTextarea
7. bsSubmit
8. 表单
9. restForm
10. 删除链接

依赖项

安装

$ composer require agenciamaior/bootstrap_forms

该包会自动安装 Laravel Forms 库。无需额外配置。

使用

bsText

{{ Form::bsText($name, $label, $attributes = []) }}

示例

{{ Form::bsText('nome', 'Nome') }}

<div class="form-group">
    <label for="nome">Nome</label>
    <input class="form-control" name="nome" type="text" id="nome" >
</div>

带属性的示例

{{ Form::bsText('nome', 'Nome', ['class' => 'active', 'default' => 'João', 'placeholder' => 'Seu nome aqui', 'id' => 'nome-input']) }}

<div class="form-group">
    <label for="nome">Nome</label>
    <input class="form-control active" name="nome" type="text" id="nome-input" value="João" placeholder="Seu nome aqui" />
</div>

注意

default 属性用于填充字段默认值。
class 属性向字段添加新类，但 form-control 类始终存在。

无标签字段

{{ Form::bsText('nome', null) }}

<div class="form-group">
    <input class="form-control" name="nome" type="text" id="nome" >
</div>

带 HTML 标签的标签

{{ Form::bsText('nome', '<b>Nome</b> do Campo') }}

<div class="form-group">
    <label for="nome"><b>Nome</b> do Campo</label>
    <input class="form-control" name="nome" type="text" id="nome" >
</div>

变体

{{ Form::bsEmail('email', 'E-mail') }}

<div class="form-group">
    <label for="email">E-mail</label>
    <input class="form-control" name="email" type="email" id="email" >
</div>

{{ Form::bsUrl('url', 'Link') }}

<div class="form-group">
    <label for="url">Link</label>
    <input class="form-control" name="url" type="url" id="url" >
</div>

{{ Form::bsPassword('pass', 'Senha') }}

<div class="form-group">
    <label for="pass">Senha</label>
    <input class="form-control" name="pass" type="password" id="pass" >
</div>

bsSelect

{{ Form::bsSelect($name, $label, $values, $attributes = []) }}

示例

{{ Form::bsSelect('items', 'Itens', [0 => 'Item 1', 1 => 'Item 2']) }}

<div class="form-group">
    <label for="items">Itens</label>
    <select name="item" id="item" class="form-control">
        <option value=""></option>
        <option value="0">Item 1</option>
        <option value="1">Item 2</option>
    </select>
</div>

带属性的示例

{{ Form::bsSelect('items', 'Itens', [0 => 'Item 1', 1 => 'Item 2'], ['placeholder' => 'Selecione uma opção', 'default' => 1]) }}

<div class="form-group">
    <label for="items">Itens</label>
    <select name="item" id="item" class="form-control">
        <option value="">Selecione uma opção</option>
        <option value="0">Item 1</option>
        <option value="1" selected>Item 2</option>
    </select>
</div>

无占位符

{{ Form::bsSelect('items', 'Itens', [0 => 'Item 1', 1 => 'Item 2'], ['placeholder' => null]) }}

<div class="form-group">
    <label for="items">Itens</label>
    <select name="item" id="item" class="form-control">
        <option value="0">Item 1</option>
        <option value="1">Item 2</option>
    </select>
</div>

bsFile

{{ Form::bsFile($name, $label, $attributes = []) }}

示例

{{ Form::bsFile('image', 'Foto') }}

<div class="form-group">
    <label for="image">Foto</label>
    
    <input id="image" class="form-control" name="image" type="file">
</div>

带属性的示例

{{ Form::bsFile('image', 'Foto', ['class' => 'my-2']) }}

<div class="form-group">
    <label for="image">Foto</label>
    
    <input id="image" class="form-control my-2" name="image" type="file">
</div>

默认图片

{{ Form::bsFile('image', 'Foto', ['default' => '/images/my-image.png']) }}

<div class="form-group">
    <label for="image">Foto</label>
    
    <input id="image" class="form-control" name="image" type="file">

    <figure class="form-image-container">
        <img src="/images/my-image.png">
    </figure>
</div>

bsCheckbox

{{ Form::bsCheckbox($name, $label, $value, $attributes = []) }}

示例

{{ Form::bsCheckbox('agreed', 'Li e concordo com os termos', true) }}

<div class="form-check">
    <input id="agreed" class="form-check-input" name="agreed" type="checkbox" value="true">

    <label class="form-check-label" for="agreed">
        Li e concordo com os termos
    </label>
</div>

带属性的示例

{{ Form::bsCheckbox('agreed', 'Li e concordo com os termos', true, ['checked' => true, 'id' => 'option-agreed']) }}

<div class="form-check">
    <input id="option-agreed" checked class="form-check-input" name="agreed" type="checkbox" value="true">

    <label class="form-check-label" for="agreed">
        Li e concordo com os termos
    </label>
</div>

多选

{{ Form::bsCheckbox('option_1', 'Opção 1') }}
{{ Form::bsCheckbox('option_2', 'Opção 2') }}
{{ Form::bsCheckbox('option_3', 'Opção 3') }}

<div class="form-check">
    <input id="option_1" class="form-check-input" name="option_1" type="checkbox">

    <label class="form-check-label" for="option_1">
        Opção 1
    </label>
</div>

<div class="form-check">
    <input id="option_2" class="form-check-input" name="option_2" type="checkbox">

    <label class="form-check-label" for="option_2">
        Opção 2
    </label>
</div>

<div class="form-check">
    <input id="option_3" class="form-check-input" name="option_3" type="checkbox">

    <label class="form-check-label" for="option_3">
        Opção 3
    </label>
</div>

bsRadio

{{ Form::bsRadio($name, $label, $value, $attributes = []) }}

示例

{{ Form::bsRadio('options', 'Opção 1', 1) }}
{{ Form::bsRadio('options', 'Opção 2', 2) }}
{{ Form::bsRadio('options', 'Opção 3', 3) }}

<div class="form-check">
    <input id="options-1" class="form-check-input" name="options" type="radio" value="1">

    <label class="form-check-label" for="options-1">
        Opção 1
    </label>
</div>

<div class="form-check">
    <input id="options-2" class="form-check-input" name="options" type="radio" value="2">

    <label class="form-check-label" for="options-2">
        Opção 2
    </label>
</div>

<div class="form-check">
    <input id="options-3" class="form-check-input" name="options" type="radio" value="3">

    <label class="form-check-label" for="options-3">
        Opção 3
    </label>
</div>

注意：为了使多个单选按钮正确工作，所有单选按钮的 name 必须相同。

bsTextarea

{{ Form::bsTextarea($name, $label, $attributes = []) }}

示例

{{ Form::bsTextarea('msg', 'Mensagem') }}

<div class="form-group">
    <label for="msg">Mensagem</label>
        
    <textarea id="msg" class="form-control" name="msg" cols="50" rows="10"></textarea>
</div>

带属性的示例

{{ Form::bsTextarea('msg', 'Mensagem', ['cols' => 20, 'default' => 'Uma mensagem']) }}

<div class="form-group">
    <label for="msg">Mensagem</label>
        
    <textarea id="msg" class="form-control" name="msg" cols="20" rows="10">Uma mensagem</textarea>
</div>

bsSubmit

{{ Form::bsSubmit($text, $attributes = []) }}

示例

{{ Form::bsSubmit('Salvar') }}

<button type="submit" class="btn btn-success btn-lg">
    <i class="fa fa-check"></i> 
        
    Salvar
</button>

带属性的示例

{{ Form::bsSubmit('Salvar', ['class' => 'btn btn-default', 'id' => 'button-save', 'type' => 'button']) }}

<button type="button" class="btn btn-default" id="button-save">
    <i class="fa fa-check"></i> 
        
    Salvar
</button>

更换图标

{{ Form::bsSubmit('Imprimir', ['icon' => 'print']) }}

<button type="submit" class="btn btn-success btn-lg">
    <i class="fa fa-print"></i> 
        
    Salvar
</button>

无图标

{{ Form::bsSubmit('Salvar', ['icon' => null]) }}

<button type="submit" class="btn btn-success btn-lg">
    Salvar
</button>

表单

常规表单

{{ Form::open($attributes = []) }}

// ...

{{ Form::close() }}

示例

{{ Form::open(['url' => '/save', 'id' => 'form-insert']) }}
    
{{ Form::close() }}

<form method="POST" action="/save" accept-charset="UTF-8" id="form-insert">
    <input name="_token" type="hidden" value="token_csrf_gerado_automaticamente">
    
</form>

更改方法

{{ Form::open(['url' => '/save', 'method' => 'get']) }}
    
{{ Form::close() }}

<form method="GET" action="/save" accept-charset="UTF-8">
    <input name="_token" type="hidden" value="token_csrf_gerado_automaticamente">
    
</form>

用于与 bsFile 一起使用的表单

{{ Form::open(['url' => '/upload', 'files' => true]) }}

{{ Form::bsFile('image', 'Foto') }}

{{ Form::close() }}

<form method="POST" action="/upload" accept-charset="UTF-8" enctype="multipart/form-data">
    <input name="_token" type="hidden" value="token_csrf_gerado_automaticamente">

    <div class="form-group">
        <label for="image">Foto</label>
        <input id="image" class="form-control" name="image" type="file">
    </div>
</form>

restForm

{{ Form::restForm($model, $attributes = []) }}

// ...

{{ Form::close() }}

带有插入的示例

假设有一个 Pedido 模型，其对应的控制器为 PedidosController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Pedido;

class PedidosController extends Controller
{
    //...

    public function create() {
        $pedido = new Pedido;

        return view('pedidos.index', [
            'pedido' => $pedido,
        ]);
    }

    //...
}

以及相应的视图 pedidos/create.blade.php

//...

{{ Form::restForm($pedido) }}

//...

{{ Form::close() }}

//...

当将变量 $pedido 识别为新 Model 时，restForm 函数将尝试在 routes/web.php 文件中查找名为 pedidos.store 的路由，因此，我们应在该文件中创建此路由，例如

//...

Route::post('/pedidos', 'PedidosController@store')->name('pedidos.store');

//...

由函数生成的 HTML

<form method="POST" action="{{ route('pedidos.store') }}" accept-charset="UTF-8">
    <input name="_token" type="hidden" value="token_csrf_gerado_automaticamente">

</form>

restForm 函数将尝试使用变量名来查找路由。在我们的示例中，变量是 $pedido（单数）且路由前缀为 pedidos（复数）。您可以通过 route_prefix 属性修改此前缀。示例

//...

{{ Form::restForm($pedido, ['route_prefix' => 'requests']) }}

//...

{{ Form::close() }}

//...

routes/web.php

//...

Route::post('/pedidos', 'PedidosController@store')->name('requests.store');

//...

带有更新的示例

假设有一个 Pedido 模型，其对应的控制器为 PedidosController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Pedido;

class PedidosController extends Controller
{
    //...

    public function edit() {
        $pedido = Pedido::find(10); //ID fictício

        return view('pedidos.edit', [
            'pedido' => $pedido,
        ]);
    }

    //...
}

以及相应的视图 pedidos/edit.blade.php

//...

{{ Form::restForm($pedido) }}

//...

{{ Form::close() }}

//...

当将变量 $pedido 识别为现有记录时，restForm 函数将尝试在 routes/web.php 文件中查找名为 pedidos.update 且带有参数 pedido 的路由，因此，我们应在该文件中创建此路由，例如

//...

Route::put('/pedidos/{pedido}', 'PedidosController@update')->name('pedidos.update');

//...

与 Insert 不同，它使用 POST 方法，函数将使用 PUT 方法在路由中执行更新。

由函数生成的 HTML

<form method="PUT" action="{{ route('pedidos.update', ['pedido' => $pedido]) }}" accept-charset="UTF-8">
    <input name="_token" type="hidden" value="token_csrf_gerado_automaticamente">
    <input type="hidden" name="id" id="id" value="10" />
</form>

函数将生成一个包含选定记录 ID 的 hidden 字段。

//...

{{ Form::restForm($pedido, ['route_prefix' => 'requests']) }}

//...

{{ Form::close() }}

//...

routes/web.php

//...

Route::put('/pedidos/{pedido}', 'PedidosController@update')->name('requests.update');

//...

就像路由前缀会尝试使用变量的复数形式一样。路由参数会尝试使用变量的单数形式。您可以通过 route_param_name 属性来更改该参数的名称。示例

//...

{{ Form::restForm($pedido, ['route_param_name' => 'ped']) }}

//...

{{ Form::close() }}

//...

routes/web.php

//...

Route::put('/pedidos/{ped}', 'PedidosController@update')->name('pedidos.update');

//...

<form method="PUT" action="{{ route('pedidos.update', ['ped' => $pedido]) }}" accept-charset="UTF-8">
    <input name="_token" type="hidden" value="token_csrf_gerado_automaticamente">
    <input type="hidden" name="id" id="id" value="10" />
</form>

deleteLink

{{ Html::deleteLink($text, $route, $attributes = []) }}

Laravel 的 REST 标准推荐，任何具有破坏性的函数，例如删除一个记录，都应该通过 DELETE 方法调用，而不是默认使用的 GET 方法，这是链接所使用的。这个函数通过表单模拟了一个 DELETE 请求的链接

示例

{{ Form::deleteLink('Excluir', '/pedido/delete') }}

<form method="POST" action="/pedido/delete" accept-charset="UTF-8">
    <input name="_method" type="hidden" value="DELETE">
    <input name="_token" type="hidden" value="token_csrf_gerado_automaticamente">

    <button type="submit">
        Excluir
    </button>
</form>

带属性的示例

{{ Form::deleteLink('Excluir', '/pedido/delete', ['form_class' => 'form-1', 'button_class' => 'btn btn-danger', 'button_id' => 'btn-delete']) }}

<form method="POST" action="/pedido/delete" accept-charset="UTF-8" class="form-1">
    <input name="_method" type="hidden" value="DELETE">
    <input name="_token" type="hidden" value="token_csrf_gerado_automaticamente">

    <button type="submit" class="btn btn-danger" id="btn-delete">
        Excluir
    </button>
</form>

带有图标的示例

{{ Form::deleteLink('Excluir', '/pedido/delete', ['icon' => 'trash']) }}

<form method="POST" action="/pedido/delete" accept-charset="UTF-8">
    <input name="_method" type="hidden" value="DELETE">
    <input name="_token" type="hidden" value="token_csrf_gerado_automaticamente">

    <button type="submit">
        <i class="fa fa-trash"></i>

        Excluir
    </button>
</form>

agenciamaior / bootstrap_forms

维护者

详细信息

README

依赖项

安装

使用

bsText

示例

带属性的示例

无标签字段

带 HTML 标签的标签

变体

bsSelect

示例

带属性的示例

无占位符

bsFile

示例

带属性的示例

默认图片

bsCheckbox

示例

带属性的示例

多选

bsRadio

示例

bsTextarea

示例

带属性的示例

bsSubmit

示例

带属性的示例

更换图标

无图标

表单

常规表单

示例

更改方法

用于与 bsFile 一起使用的表单

restForm

带有插入的示例

带有更新的示例

deleteLink

示例

带属性的示例

带有图标的示例