程式設計師小助手2020-10-09 10:40:34引言
作為後端工程師的你，是不是面對一堆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內容如下：
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表單元素： // 表單內容
接著是表單內容結構，頭部和尾部：
{！！ Form：：open（［‘route’ => ‘events。store’］， ［‘class’ => ‘form’］） ！！}
// 表單元素
{！！ Form：：close（） ！！}
下面是一個完整的
輸入框
：
{！！ Form：：label（‘name’， ‘Event Name’， ［‘class’ => ‘control-label’］）！！}
{！！ Form：：text（‘name’， null， ［‘class’ => ‘form-control input-lg’， ‘placeholder’ => ‘PHP Hacking and Pizza’］）！！}
還有
下拉選擇框
：
{！！ 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’］）！！}
以及
文字框
輸入：
{！！ Form：：label（‘description’， “Description”， ［‘class’ => ‘control-label’］）！！}
{！！ Form：：textarea（‘description’， null， ［‘class’ => ‘form-control input-lg’， ‘placeholder’ => ‘Describe the event’］）！！}
以及最重要的
提交按鈕
：
{！！ Form：：submit（‘Add Event’， ［‘class’ => ‘btn btn-info btn-lg’， ‘style’ => ‘width： 100%’］）！！}
最後生成的表單頁面如下圖：
寫在最後
本文介紹了laravel框架引入的Form類庫，用於生成前端的表單頁面元素，不過是用PHP的方式呼叫。 我們演示了常用的表單元素的用法，大家可以自定檢視文件深入學習。
Happy coding ：-）
我是@程式設計師小助手，專注程式設計知識，圈子動態的IT領域原創作者
