引言
作為後端工程師的你，是不是面對一堆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="" >
大家注意，模板檔案內使用的分隔符是使用 {!! !!}，也就是說不對其進行轉義。
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> <div> // 表單內容 </div></div>
接著是表單內容結構，頭部和尾部：
{!! Form::open(["route" => "events.store"], ["class" => "form"]) !!}// 表單元素{!! Form::close() !!}
下面是一個完整的輸入框：
<div>{!! Form::label("name", "Event Name", ["class" => "control-label"])!!}{!! Form::text("name", null, ["class" => "form-control input-lg", "placeholder" => "PHP Hacking and Pizza"])!!}</div>
還有下拉選擇框：
<div>{!! 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>{!! Form::label("description", "Description", ["class" => "control-label"])!!}{!! Form::textarea("description", null, ["class" => "form-control input-lg", "placeholder" => "Describe the event"])!!}</div>
<div>{!! Form::submit("Add Event", ["class" => "btn btn-info btn-lg", "style" => "width: 100%"])!!}</div>
最後生成的表單頁面如下圖：
寫在最後
本文介紹了laravel框架引入的Form類庫，用於生成前端的表單頁面元素，不過是用PHP的方式呼叫。 我們演示了常用的表單元素的用法，大家可以自定檢視文件深入學習。
Happy coding :-)
引言
作為後端工程師的你，是不是面對一堆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="" >
大家注意，模板檔案內使用的分隔符是使用 {!! !!}，也就是說不對其進行轉義。
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> <div> // 表單內容 </div></div>
接著是表單內容結構，頭部和尾部：
{!! Form::open(["route" => "events.store"], ["class" => "form"]) !!}// 表單元素{!! Form::close() !!}
下面是一個完整的輸入框：
<div>{!! Form::label("name", "Event Name", ["class" => "control-label"])!!}{!! Form::text("name", null, ["class" => "form-control input-lg", "placeholder" => "PHP Hacking and Pizza"])!!}</div>
還有下拉選擇框：
<div>{!! 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>{!! Form::label("description", "Description", ["class" => "control-label"])!!}{!! Form::textarea("description", null, ["class" => "form-control input-lg", "placeholder" => "Describe the event"])!!}</div>
<div>{!! Form::submit("Add Event", ["class" => "btn btn-info btn-lg", "style" => "width: 100%"])!!}</div>
最後生成的表單頁面如下圖：
寫在最後
本文介紹了laravel框架引入的Form類庫，用於生成前端的表單頁面元素，不過是用PHP的方式呼叫。 我們演示了常用的表單元素的用法，大家可以自定檢視文件深入學習。
Happy coding :-)