3分钟短文:Laravel Form,让你不再写 HTML 的好“库”

简介: 后端工程师写前端页面,就这!

引言

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

img

本文我们讲一个简单且常用的表单类 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输入框添加一个标签,用于提示给用户该字段的用途。

pic

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

{!! 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>

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

pic

写在最后

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

Happy coding :-)

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

相关文章
|
5月前
|
存储 移动开发 JavaScript
HTML5中form表单防止重复提交的两种方法
HTML5中form表单防止重复提交的两种方法
118 2
|
移动开发 HTML5
HTML5 form标签与属性的使用
HTML5 form标签与属性的使用
34 0
|
10月前
|
数据采集 JavaScript 小程序
laravel8(四)使用simple_html_dom库解析html
首先:simple_html_dom下载地址: github.com/samacs/simp… 这是一个PHP解析html的一个库。 这玩意还是很有用的,比如我们在使用PHP做爬虫的时候,需要解析html中的内容等。 他的强大之处不仅仅只是帮助我们验证html文档;更能解析不符合W3C标准的html文档。 关于如何引入第三方类库,请移步《laravel5.8(十)引入第三方类库》laravel8中的设置方法也大同小异。 一:加载 html 有三种方式调用这个类: 1. 从url中加载html文档 2. 从字符串中加载html文档 3. 从文件中加载html文档
103 1
|
17天前
|
存储 移动开发 UED
HTML5 的 form 的自动完成功能
在HTML5中,`&lt;form&gt;`元素具备自动完成功能,可根据用户历史输入提供建议,提高输入效率并改善体验。默认情况下,浏览器会自动开启此功能,也可通过设置`autocomplete`属性为`on`或`off`来明确开启或关闭。对于特定表单字段,如`&lt;input&gt;`,同样可以通过设置`autocomplete`属性控制自动完成行为。浏览器通过记录并存储用户的历史输入,在用户再次访问相同表单时提供相应的自动完成建议。
|
19天前
|
前端开发 JavaScript
pyquery:一个灵活方便的 HTML 解析库
pyquery:一个灵活方便的 HTML 解析库
17 1
|
5月前
|
XML 前端开发 数据格式
BeautifulSoup 是一个 Python 库,用于从 HTML 和 XML 文件中提取数据
【5月更文挑战第10天】BeautifulSoup 是 Python 的一个库,用于解析 HTML 和 XML 文件,即使在格式不规范的情况下也能有效工作。通过创建 BeautifulSoup 对象并使用方法如 find_all 和 get,可以方便地提取和查找文档中的信息。以下是一段示例代码,展示如何安装库、解析 HTML 数据以及打印段落、链接和特定类名的元素。BeautifulSoup 还支持更复杂的查询和文档修改功能。
91 1
|
5月前
|
存储 Java API
Scala中如何使用Jsoup库处理HTML文档?
Scala中如何使用Jsoup库处理HTML文档?
|
4月前
|
Web App开发 前端开发 Java
基于Spring3 MVC实现基于HTML form表单文件上传
基于Spring3 MVC实现基于HTML form表单文件上传
44 7
基于Spring3 MVC实现基于HTML form表单文件上传
|
11月前
|
存储 JavaScript PHP
HTML中form 的作用?
HTML中form 的作用?
126 0
|
5月前
|
数据安全/隐私保护
HTML表单(Form)常用控件
HTML表单(Form)常用控件。
55 1