README

这是一个用于在Laravel 5中创建Bootstrap 4风格表单元素的包。

功能

• 标签
• 错误信息
• Bootstrap 4标记和类（包括状态、颜色和大小）
• 错误验证信息
• 表单填充（使用模型实例、数组或在表单提交后出现验证错误时）
• 国际化
• 使用PHP链式方法添加参数
• 无依赖（无Laravel Collective依赖）

简介

之前

<div class="form-group">
    <label for="username">Username</label>
    <input
        type="text"
        class="form-control @if($errors->has('username')) is-invalid @endif "
        id="username"
        value="{{old('username', $username)}}"
    />
    @if($errors->has('username'))
    <div class="invalid-feedback">{{$errors->first('username')}}</div>
    @endif
</div>

之后

Form::text('username', 'Username')

安装

使用Composer安装此包。

composer require netojose/laravel-bootstrap-4-forms

Laravel 5.5或更高版本

如果您正在使用Laravel 5.5，自动发现功能将为您完成所有工作，您的任务已完成，您现在可以开始使用了。否则，请按照以下步骤进行安装。

Laravel 5.4

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

'providers' => [
    //...
	NetoJose\Bootstrap4Forms\Bootstrap4FormsServiceProvider::class,
],

将BootForm门面添加到config/app.php中的aliases数组中

'aliases' => [
    //...
    'Form' => NetoJose\Bootstrap4Forms\Bootstrap4FormsFacade::class,
],

用法

基本表单控件

打开和关闭表单

// Opening a form using POST method

{!!Form::open()!!}
// ... Form components here
{!!Form::close()!!}

打开表单将自动为您添加_token字段

内联表单

// Making all inputs inline
{!!Form::inlineForm()!!}

字段集

// Example
{!!Form::fieldsetOpen('Legend title')!!}
// ... fieldset content
{!!Form::fieldsetClose()!!}

基本输入

文本输入

// Example
{!!Form::text('name', 'User name')!!}

文本域

// Example
{!!Form::textarea('description', 'Description')!!}

选择框

// Example
{!!Form::select('city', 'Choose your city', [1 => 'Gotham City', 2 => 'Springfield'])!!}

选择默认值

{!!Form::select('city', 'Choose your city', [''=>'--choose your city---',1 => 'Gotham City', 2 => 'Springfield'])!!}

复选框

// Example
{!!Form::checkbox('orange', 'Orange')!!}

单选按钮

// Example
{!!Form::radio('orange', 'Orange')!!}

文件

// Example
{!!Form::file('doc', 'Document')!!}

日期输入

// Example
{!!Form::date('birthday', 'Birthday')!!}

时间输入

// Example
{!!Form::time('hour', 'Meeting hour')!!}

范围输入

// Example
{!!Form::range('name', 'User name')!!}

隐藏

// Example
{!!Form::hidden('user_id')!!}

锚点

// Example
{!!Form::anchor("Link via parameter", 'foo/bar')!!}

按钮

提交

// Example
{!!Form::submit("Send form")!!}

按钮

// Example
{!!Form::button("Do something", "warning", "lg")!!}

重置

// Example
{!!Form::reset("Clear form")!!}

链式方法

此包使用链式调用功能，允许轻松传递更多参数。

填写表单

// Examples

// With initial data using a Model instance
$user = User::find(1);
{!!Form::open()->fill($user)!!}

// With initial array data
$user = ['name' => 'Jesus', 'age' => 33];
{!!Form::open()->fill($user)!!}

URL

在锚点和表单打开中使用

// Example
{!!Form::anchor("Link via url")->url('foo/bar')!!}

路由

在锚点和表单打开中使用

// Example
{!!Form::anchor("Link via route")->route('home')!!}

选中

设置复选框/单选按钮的选中状态

// Examples

// Using readonly field
{!!Form::checkbox('agree', 'I agree')->checked()!!}

// You can use FALSE to turn off checked status
{!!Form::checkbox('agree', 'I agree')->checked(false)!!}

内联

设置复选框/单选按钮的选中状态

// Examples
{!!Form::radio('orange', 'Orange')->inline()!!}

{!!Form::checkbox('orange', 'Orange')->inline()!!}

占位符

// Example
{!!Form::text('name', 'Name')->placeholder('Input placeholder')!!}

多选

// Example
{!!Form::select('city', 'Choose your city', [1 => 'Gotham City', 2 => 'Springfield'])->multiple()!!}

区域

使用区域，该包将查找resources/lang/{CURRENT_LANG}/forms/user.php语言文件，并使用标签和帮助文本作为替换文本的键

// Example
{!!Form::open()->locale('forms.user')!!}

帮助文本

// Example
{!!Form::text('name', 'Name')->help('Help text here')!!}

自定义属性

// Example
{!!Form::text('name', 'Name')->attrs(['data-foo' => 'bar', 'rel'=> 'baz'])!!}

包装div中的自定义属性（<div class="form-group">...</div>）

// Example
{!!Form::text('name', 'Name')->wrapperAttrs(['data-foo' => 'bar', 'id'=> 'name-wrapper'])!!}

只读

// Examples

// Using readonly field
{!!Form::text('name', 'Name')->readonly()!!}

// You can use FALSE to turn off readonly status
{!!Form::text('name', 'Name')->readonly(false)!!}

禁用

// Examples

// Disabling a field
{!!Form::text('name', 'Name')->disabled()!!}

// Disabling a fieldset
{!!Form::fieldsetOpen('User data')->disabled()!!}

// You can use FALSE to turn off disabled status
{!!Form::text('name', 'Name')->disabled(false)!!}

块

// Examples

// Disabling a field
{!!Form::text('name', 'Name')->block()!!}

// You can use FALSE to turn off block status
{!!Form::text('name', 'Name')->block(false)!!}

必填

// Examples

// Disabling a field
{!!Form::text('name', 'Name')->required()!!}

// Disabling a fieldset
{!!Form::fieldsetOpen('User data')->required()!!}

// You can use FALSE to turn off required status
{!!Form::text('name', 'Name')->required(false)!!}

自动填充

查看：https://html.whatwg.cn/multipage/forms.html#autofill

如果没有指定表单的自动完成值，HTML规范要求默认值为'on'。因此，您必须明确将其关闭。

自动完成值将自动为具有单个单词名称且与有效值匹配的字段生成（例如name、email、tel、organization）。完整的列表见上述规范。

// Examples

// Switch off autocomplete for the form
{!!Form::open()->autocomplete('off')!!}

// Explicitly set a autocomplete value
{!!Form::text('mobile', 'Mobile Number')->autocomplete('tel')!!}

// Disable autocomplete for fields with valid names
{!!Form::text('name', 'Name')->autocomplete('off')!!}

标识符

// Example
{!!Form::text('name', 'Name')->id('user-name')!!}

标识符前缀

// Example
{!!Form::open()->idPrefix('register')!!}

多部分

// Examples
{!!Form::open()->multipart()!!}

// You can use FALSE to turn off multipart
{!!Form::open()->multipart(false)!!}

方法

// Examples
{!!Form::open()->method('get')!!}
{!!Form::open()->method('post')!!}
{!!Form::open()->method('put')!!}
{!!Form::open()->method('patch')!!}
{!!Form::open()->method('delete')!!}

显式HTTP动词

// Examples
{!!Form::open()->get()!!}
{!!Form::open()->post()!!}
{!!Form::open()->put()!!}
{!!Form::open()->patch()!!}
{!!Form::open()->delete()!!}

颜色

// Examples
{!!Form::button("Do something")->color("warning")!!}

{!!Form::button("Do something")->color("primary")!!}

显式颜色

// Examples
{!!Form::button("Button label")->warning()!!}
{!!Form::button("Button label")->outline()!!}
{!!Form::button("Button label")->success()!!
{!!Form::button("Button label")->danger()!!}
{!!Form::button("Button label")->secondary()!!}
{!!Form::button("Button label")->info()!!}
{!!Form::button("Button label")->light()!!}
{!!Form::button("Button label")->dark()!!}
{!!Form::button("Button label")->link()!!}

大小

// Examples
{!!Form::button("Do something")->size("sm")!!}

{!!Form::button("Do something")->size("lg")!!}

显式大小

// Examples
{!!Form::button("Button label")->sm()!!}
{!!Form::button("Button label")->lg()!!}

类型

// Examples

// Password field
{!!Form::text('password', 'Your password')->type('password')!!}

// Number field
{!!Form::text('age', 'Your age')->type('number')!!}

// Email field
{!!Form::text('email', 'Your email')->type('email')!!}

名称

// Examples
{!!Form::text('text')->name('name')!!}

标签

// Examples
{!!Form::text('age')->label('Your age')!!}

默认值

// Example
{!!Form::text('name', 'Your name')->value('Maria')!!}

渲染

// Examples

// Number field
{!!Form::render('text')->name('age')->label('Your age')!!}

链式属性

您可以使用链式功能为每个组件设置许多设置

// Examples

{!!Form::open()->locale('forms.user')->put()->multipart()->route('user.add')->data($user)!!}

{!!Form::text('name', 'Name')->placeholder('Type your name')->lg()!!}

{!!Form::anchor("Link as a button")->sm()->info()->outline()!!}

{!!Form::submit('Awesome button')->id('my-btn')->disabled()->danger()->lg()!!}

{!!Form::close()!!}