3分钟短文：Laravel Form，让你不再写 HTML 的好“库”
原创3分钟短文：Laravel Form，让你不再写 HTML 的好“库”
原创
引言
作为后端工程师的你，是不是面对一堆JS，CSS感觉无比抓狂。如果能摆脱大量的冗余的HTML代码块，
那该多好啊。laravel作为扩展性极强的框架，自然是为广大后端开发者赋能。
本文我们讲一个简单且常用的表单类 Form。
代码时间
还记得我们之前文章提到的，laravel快速注册restful api方式路由方法的方式吗？
Route::resource('events', 'EventsController');在那个章节，我们并没有手动实现路由对应的控制器方法，仅仅搭建了简单的代码框架。
现在我们首先实现添加记录的内容，预想前端页面有一个表单，用于提交数据。
public function create()
{
return view('events.create');
}相对应地，需要创建一个blade文件，resources/views/events/create.blade.php ,
为了使用框架提供的 Form 类库，在 config/app.php 文件内添加如下内容：
'aliases' => [
'Form' => Collective\Html\FormFacade::class
],当然了，使用此类之前，你需要保证使用 composer 安装了匹配版本的类库文件。首先是一个简单的文本输入框：
{!! Form::text('name', null,
[
'class' => 'form-control input-lg',
'placeholder' => 'PHP Hacking and Pizza'
])
!!}以上代码最终生成的HTML内容如下：
<input
placeholder="PHP Hacking and Pizza"
name="name"
type="text"
value=""
id="name"
class="form-control input-lg"
>大家注意，模板文件内使用的分隔符是使用 {!! !!}，也就是说不对其进行转义。
Form::text第一个参数是分配给输入元素的name属性的字符串，该值也将分配给id属性，除非你在数组中明确为id分配值，并作为第三个参数传递。
第二个参数（当前设置为null）可用于设置表单字段的value属性。设置为null时，将使用空白值。
接着我们为input输入框添加一个标签，用于提示给用户该字段的用途。
上述表单元素会包裹在 <form>...</form>标签内，所以我们需要为上述内容添加这个标签。
{!! Form::open(['route' => 'events.store'], ['class' => 'form']) !!}
{!! Form::close() !!}其中默认表单使用的是 POST 方法，route 参数指定了路由的位置。也可以是使用的路由别名。
有了上方的代码结构，我们就可以构建一个完整的页面了。模板 resources/views/events/create.blade.php 代码如下。
首先使用布局模板文件：
@extends('layouts.app')然后手动实现 @section('content')...@endsection部分代码。为了节约空间，仅贴出主要form表单元素：
<div class="row">
<div class="col">
// 表单内容
</div>
</div> 接着是表单内容结构，头部和尾部：
{!! Form::open(['route' => 'events.store'], ['class' => 'form']) !!}
// 表单元素
{!! Form::close() !!}下面是一个完整的输入框：
<div class="form-group">
{!! Form::label('name', 'Event Name', ['class' => 'control-label'])!!}
{!! Form::text('name', null, ['class' => 'form-control input-lg', 'placeholder' => 'PHP Hacking and Pizza'])!!}
</div>还有下拉选择框：
<div class="form-group">
{!! Form::label('max_attendees', 'Maximum Number of Attendees', ['class' => 'control-label'])!!}
{!! Form::select('max_attendees', [2,3,4,5], null, ['placeholder' => 'Maximum Number of Attendees', 'class' => 'form-control input-lg'])!!}
</div>以及文本框输入：
<div class="form-group">
{!! Form::label('description', "Description", ['class' => 'control-label'])!!}
{!! Form::textarea('description', null, ['class' => 'form-control input-lg', 'placeholder' => 'Describe the event'])!!}
</div>以及最重要的提交按钮：
<div class="form-group">
{!! Form::submit('Add Event', ['class' => 'btn btn-info btn-lg', 'style' => 'width: 100%'])!!}
</div>最后生成的表单页面如下图：
写在最后
本文介绍了laravel框架引入的Form类库，用于生成前端的表单页面元素，不过是用PHP的方式调用。
我们演示了常用的表单元素的用法，大家可以自定查看文档深入学习。
Happy coding :-)
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。