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' => [
    //...
    '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()!!}

区域

使用区域，该包将查找资源/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')!!}

Id

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

Id 前缀

// 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')!!}

默认值

// 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()!!}

paulmenheere / laravel-bootstrap-4-forms

维护者

详细信息