README

Biblioteca que gera tags HTML de formulários e campos com estilos do Bootstrap 4.

1. Dependências
2. Instalação
3. Utilização
   1. bsText
   2. bsSelect
   3. bsFile
   4. bsCheckbox
   5. bsRadio
   6. bsTextarea
   7. bsSubmit
   8. Formulário
   9. restForm
   10. deleteLink

Dependências

• Bootstrap 4
• FontAwesome 4
• Laravel 5.5 ou superior
• Laravel Forms 5.5 ou superior

Instalação

$ composer require agenciamaior/bootstrap_forms

Esse pacote instala automaticamente a biblioteca Laravel Forms. Nenhuma configuração adicional é necessária.

Utilização

bsText

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

Exemplo

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

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

Exemplo com atributos

{{ 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>

Observações:

• O atributo default preenche o campo com um valor padrão.
• O atributo class adiciona classes novas ao campo, porém, a classe form-control sempre vai estar presente.

Campo sem label

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

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

Label com 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>

Variações

{{ 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 = []) }}

Exemplo

{{ 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>

Exemplo com atributos

{{ 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>

Sem placeholder

{{ 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 = []) }}

Exemplo

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

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

Exemplo com atributos

{{ 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>

Imagem padrão

{{ 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 = []) }}

Exemplo

{{ 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>

Exemplo com atributos

{{ 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>

Múltiplos

{{ 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 = []) }}

Exemplo

{{ 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>

Observação: Para que o campo funcione corretamente com mais de um, o name de todos os radios deve ser igual.

bsTextarea

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

Exemplo

{{ 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>

Exemplo com atributos

{{ 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 = []) }}

Exemplo

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

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

Exemplo com atributos

{{ 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>

Trocar o ícone

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

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

Sem ícone

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

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

Formulário

Formulário comum

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

// ...

{{ Form::close() }}

Exemplo

{{ 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>

Mudar o método

{{ 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>

Formulário para usar com o 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() }}

Exemplo com Insert

Suponha um model Pedido com o seguinte Controller 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,
        ]);
    }

    //...
}

E sua respectiva view pedidos/create.blade.php:

//...

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

//...

{{ Form::close() }}

//...

Ao identificar a variável $pedido como um novo Model, a função restForm vai tentar procurar dentro do arquivo routes/web.php por uma rota com o name pedidos.store, por isso, devemos criar essa rota dentro desse arquivo, por exemplo:

//...

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

//...

HTML gerado pela função

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

</form>

A função restForm vai tentar utilizar o nome da variável para buscar as rotas. No nosso exemplo, a variável é $pedido (no singular) e o prefixo da rota seria pedidos (no plural). Você pode alterar esse prefixo através do atributo route_prefix. Exemplo:

//...

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

//...

{{ Form::close() }}

//...

routes/web.php

//...

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

//...

Exemplo com Update

Suponha um model Pedido com o seguinte Controller 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,
        ]);
    }

    //...
}

E sua respectiva view pedidos/edit.blade.php:

//...

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

//...

{{ Form::close() }}

//...

Ao identificar a variável $pedido como registro existente, a função restForm vai tentar procurar dentro do arquivo routes/web.php por uma rota com um name pedidos.update e com um parâmetro pedido, por isso, devemos criar essa rota dentro desse arquivo, por exemplo:

//...

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

//...

Diferente do Insert, que utilizar o método POST, a função vai usar o método PUT nas rotas para realizar o update.

HTML gerado pela função

<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>

A função vai gerar um campo do tipo hidden com valor do ID do registro selecionado.

A função restForm vai tentar utilizar o nome da variável para buscar as rotas. No nosso exemplo, a variável é $pedido (no singular) e o prefixo da rota seria pedidos (no plural). Você pode alterar esse prefixo através do atributo route_prefix. Exemplo:

//...

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

//...

{{ Form::close() }}

//...

routes/web.php

//...

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

//...

Assim como o prefixo das rotas vai tentar utilizar o nome no plural da variável. O parâmetro da rota vai tentar utilizar o nome no singular da variável. Você pode alterar o nome desse parâmetro através do atributo route_param_name. Exemplo:

//...

{{ 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 = []) }}

O padrão REST do Laravel recomenda que qualquer função destrutiva, como excluir um registro, seja chamada através de um método DELETE ao invés do GET padrão que os links utilizam. Essa função simula um link com uma requisição DELETE através de um formulário:

Exemplo

{{ 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>

Exemplo com atributos

{{ 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>

Exemplo com ícone

{{ 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>