html设置输入框长度_3分钟短文:Laravel Form,让你不再写 HTML 的好“库”

引言

作为后端工程师的你,是不是面对一堆JS,CSS感觉无比抓狂。如果能摆脱大量的冗余的HTML代码块, 那该多好啊。laravel作为扩展性极强的框架,自然是为广大后端开发者赋能。

b6225bd7353d2ac6b57464331707ca66.png

本文我们讲一个简单且常用的表单类 Form。

代码时间

还记得我们之前文章提到的,laravel快速注册restful api方式路由方法的方式吗?

Route

在那个章节,我们并没有手动实现路由对应的控制器方法,仅仅搭建了简单的代码框架。 现在我们首先实现添加记录的内容,预想前端页面有一个表单,用于提交数据。

public 

相对应地,需要创建一个blade文件,resources/views/events/create.blade.php , 为了使用框架提供的 Form 类库,在 config/app.php 文件内添加如下内容:

'aliases' 

当然了,使用此类之前,你需要保证使用 composer 安装了匹配版本的类库文件。首先是一个简单的文本输入框:

{

以上代码最终生成的HTML内容如下:

<

大家注意,模板文件内使用的分隔符是使用 {!! !!},也就是说不对其进行转义。

Form::text第一个参数是分配给输入元素的name属性的字符串,该值也将分配给id属性,除非你在数组中明确为id分配值,并作为第三个参数传递。 第二个参数(当前设置为null)可用于设置表单字段的value属性。设置为null时,将使用空白值。

接着我们为input输入框添加一个标签,用于提示给用户该字段的用途。

de1216da0121d6f8badcf75a8abff6c9.png

上述表单元素会包裹在 <form>...</form>标签内,所以我们需要为上述内容添加这个标签。

{

其中默认表单使用的是 POST 方法,route 参数指定了路由的位置。也可以是使用的路由别名。

有了上方的代码结构,我们就可以构建一个完整的页面了。模板 resources/views/events/create.blade.php 代码如下。 首先使用布局模板文件:

@

然后手动实现 @section('content')...@endsection部分代码。为了节约空间,仅贴出主要form表单元素:

<

接着是表单内容结构,头部和尾部:

{

下面是一个完整的输入框

<

还有下拉选择框

<

以及文本框输入:

<

以及最重要的提交按钮

<

最后生成的表单页面如下图:

2eec499ac63908e0656e219e869f7f0a.png

写在最后

本文介绍了laravel框架引入的Form类库,用于生成前端的表单页面元素,不过是用PHP的方式调用。 我们演示了常用的表单元素的用法,大家可以自定查看文档深入学习。

Happy coding :-)

我是@程序员小助手,专注编程知识,圈子动态的IT领域原创作者