3分鐘短文：Laravel Form，讓你不再寫 HTML 的好“庫”

程式設計師小助手發表於2020-10-09
LaravelORMHTML

引言

作為後端工程師的你，是不是面對一堆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領域原創作者

本作品採用《CC 協議》，轉載必須註明作者和本文連結
write-less-do-more-make-you-out-of-door

相關文章