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' => CollectiveHtmlFormFacade::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 :-)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- php获取是星期几的的一些常用姿势
- laravel 实现用户登录注销并限制功能
- PHP Swoole异步Redis客户端实现方法示例
- PHP全局使用Laravel辅助函数dd
- 在laravel中实现ORM模型使用第二个数据库设置
- laravel5.1 ajax post 传值_token示例
- Laravel框架处理用户的请求操作详解
- Laravel实现ORM带条件搜索分页
- Laravel等框架模型关联的可用性浅析
- laravel5.6中的外键约束示例
- Yii框架核心组件类实例详解
- Python 绘制可视化折线图
- Laravel (Lumen) 解决JWT-Auth刷新token的问题
- PHP单元测试配置与使用方法详解
- Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解