1. 程式人生 > >Laravel 元件之 Forms & HTML 元件 (laravelcollective/html)

Laravel 元件之 Forms & HTML 元件 (laravelcollective/html)

安裝

1.安裝 HTML 之前,需要確保PHP版本是否叨叨你使用的框架的環境要求

我們使用Composer在命令列安裝最新版本的laravelcollective/html

composer require laravelcollective/html
執行命令後,會在專案composer.json檔案中的require中增加如下圖所示:

如果這一步驟執行失敗了,也沒關係,可能是你的框架不支援最新版本的,可以直接指定版本更新:

composer require laravelcollective/html 5.3.*
這樣也可以。

還有一種方式去載入:

首先通過 composer 來安裝這個 包, 編輯專案的 composer.json

檔案. 在 require 部分 加入laravelcollective/html :

"require": {
    "laravelcollective/html": "5.3.*"
}
接下來從命令列更新 composer :
composer update
更新完成之後,開啟config/app.php

在providers陣列下面新增

'Illuminate\Html\HtmlServiceProvider',

在aliases陣列下面新增

'Form'    => 'Illuminate\Html\FormFacade',
'HTML'    => 'Illuminate\Html\HtmlFacade'

這樣就安裝好啦!

建立表單

開啟表單

{!! Form::open(array('url' => 'foo/bar')) !!}
    //
{!! Form::close() !!}

預設是 POST 方法, 你可以隨意指定其他接收方法

echo Form::open(array('url' => 'foo/bar', 'method' => 'put'))
Note: HTML 表單僅僅支援 POST 和 GET方法, PUT 和DELETE 方法將會使用一個隱藏域_method 新增到form 表單中來欺騙實現

你可以使用指定的控制器@動作 或者命名的路由來建立表單

echo Form::open(array('route' => 'route.name'))

echo Form::open(array('action' => '
[email protected]
'))

同樣也可以向路由中傳入引數.

echo Form::open(array('route' => array('route.name', $user->id)))

echo Form::open(array('action' => array('[email protected]', $user->id)))

如果你的表單需要支援檔案上傳, 在陣列中新增 一個 files 配置項.

echo Form::open(array('url' => 'foo/bar', 'files' => true))

CSRF 保護

向表單中新增 CSRF Token

Laravel 提供了一個簡單的方法來防止你的應用遭受跨站攻擊. 首先會在你的session 中生成一個隨機的 token, 如果你使用 Form::open 方法並且提交方法是POST, PUT或者是 DELETE, CSRF token 將會自動的新增到你的form 表單的隱藏域中. 換種方法 如果你像自己生成 CSRF token 欄位, 你可以使用token 方法.

echo Form::token();

給路由新增 CSRF 過濾器

Route::post('profile', array('before' => 'csrf', function()
{
    //
}));

表單模型繫結

給表單繫結模型

通常, 你需要想表單中填入來自資料庫模型的資料. 想這樣做你可以使用 Form::model 方法.

echo Form::model($user, array('route' => array('user.update', $user->id)))

現在當你自動生成一個表單元素, 例如文字輸入框. Model 的值將會自動匹配並且填寫到相關的表單欄位中.例如. 一個文字輸入框的 name 是email這個欄位將會用 使用者 Modelemail 屬性來填充並且設定. 當然, 還有其他用法. 如果一個欄位在session 快閃記憶體資料中 也存在這個名字, 這個將會覆蓋模型中的這個欄位值. 優先順序是這個樣子的:

  1. Session Flash Data (Old Input) [session 快閃記憶體 / 老的輸入資料 ]
  2. Explicitly Passed Value [輸入值]
  3. Model Attribute Data [模型屬性值]

這個可以讓你快速的使用模型資料來建立表單, 也能輕鬆的在伺服器校驗錯誤之後重新發布表單.

Note: 使用 Form::model方法的時候一定要使用 Form::close來關閉表單!

標籤

生成標籤元素

echo Form::label('email', 'E-Mail Address');

指定額外的 html 屬性

echo Form::label('email', 'E-Mail Address', array('class' => 'awesome'));
Note: 在建立了一個標籤之後, 如果有建立的表單元素的 name 值和 label 的 name 值相符的話, 將會自動在 表單元素 中自動匹配增加 id 屬性. id 的值就是 label 的name 值.

文字框, 文字域, 密碼 & 隱藏域

建立文字框

echo Form::text('username');

指定預設值

echo Form::text('email', '[email protected]');
Note: hidden 和 textarea 方法的引數和 text 相同.

生成密碼輸入框

echo Form::password('password', array('class' => 'awesome'));

生成其他輸入框

echo Form::email($name, $value = null, $attributes = array());
echo Form::file($name, $attributes = array());

多選和單選

生成單選和多選

echo Form::checkbox('name', 'value');
echo Form::radio('name', 'value');

生成帶有選中狀態的表單元素

echo Form::checkbox('name', 'value', true);
echo Form::radio('name', 'value', true);

數字

生成數字輸入框

echo Form::number('name', 'value');

日期

生成日期輸入框

echo Form::date('name', \Carbon\Carbon::now());

檔案選擇器

生成檔案選擇器

echo Form::file('image');
Note: 表單中必須設定 files 引數的值為 true

下拉列表

生成下拉列表

echo Form::select('size', array('L' => 'Large', 'S' => 'Small'));

生成有預設值的下拉列表

echo Form::select('size', array('L' => 'Large', 'S' => 'Small'), 'S');

生成空佔位符的 下拉列表

這回建立一個沒有任何值的 <option> 元素作為下拉列表的第一個選擇值.

echo Form::select('size', array('L' => 'Large', 'S' => 'Small'), null, ['placeholder' => 'Pick a size...']);

生成分組的列表

echo Form::select('animal', array(
        'Cats' => array('leopard' => 'Leopard'),
        'Dogs' => array('spaniel' => 'Spaniel'),
    ));

生成範圍選擇值的下拉列表

echo Form::selectRange('number', 10, 20);

生成有月份名稱的選擇值

echo Form::selectMonth('month');

按鈕

生成提交按鈕

echo Form::submit('Click Me!');
Note: 想建立一個按鈕元素? 試用 button 方法. 他和 submit 方法有相同的引數.

自定義表單元素

註冊一個新的表單元素

用來很方便的來自定義一個表單元素的方法叫做 macros . 合理是怎樣使用它. 首先簡單的使用名稱和閉包函式來註冊一個 :

Form::macro('myField', function()
{
    return '<input type="awesome">';
});

現在你可以使用自定義的名字來呼叫這個 macro

呼叫自定義的 Form Macro

echo Form::myField();

生成URL

link_to

根據給定的URL生成 html 連結

echo link_to('foo/bar', $title = null, $attributes = array(), $secure = null);

link_to_asset

生成一個連結到指定資源的 html

echo link_to_asset('foo/bar.zip', $title = null, $attributes = array(), $secure = null);

link_to_route

生成一個根據給定路由的html連結

echo link_to_route('route.name', $title = null, $parameters = array(), $attributes = array());

link_to_action

根據指定的控制器/方法來生成 html 連結

echo link_to_action('[email protected]', $title = null, $parameters = array(), $attributes = array());

相關推薦

Laravel 元件 Forms & HTML 元件 (laravelcollective/html)

安裝 1.安裝 HTML 之前,需要確保PHP版本是否叨叨你使用的框架的環境要求 我們使用Composer在命令列安裝最新版本的laravelcollective/html composer require laravelcollective/html 執行命令後,會在專案

自定義控制元件下載控制元件1(DownloadView1)

前段時間在乾貨集中營看到了兩個炫酷的下載按鈕:       可惜是隔壁 iOS 的孩子,怎麼辦,我也好喜歡,emmm,某該,只能自己模仿著實現一下了。先從第一個入手(第二個波浪效果暫時還不會)。 1 準備動作 寫過幾次自定義控制元件

【ASP.NET】——複合控制元件TreeView控制元件

在ASP.NET中常用的複合控制元件有:TreeView控制元件,MultiView控制元件,JavaScript方式的選項卡,WiZard控制元件。 今天先來學習TreeView控制元件。 在開發過程中經常會遇到一些有樹形層次關係的資料,比如顯示無限極分類和顯示某個檔案下的所有檔案及資

自定義控制元件組合式控制元件 下拉選擇框

自定義控制元件之組合式控制元件 下拉選擇框 文章目錄 自定義控制元件之組合式控制元件 下拉選擇框 零 組合控制元件下載 一 自定義控制元件思路 二 MainActivity核心程式碼 三 activity_main.xml

C#控制元件DateTimePicker控制元件使用

Ø  分別獲取控制元件裡的年、月、日等資訊,如下所示: MessageBox.Show(dtpTime.Value.Year.ToString()); MessageBox.Show(dtpTime.Value.Month.ToString()); MessageBox.Show(dtpTime.V

android UI控制元件webview控制元件使用例項:載入網頁到webview中

package com.vincent.org.networkapp; import android.app.Activity; import android.app.ProgressDialog; import android.os.Bundle; impo

Windows應用程式高階控制元件月曆控制元件--MonthCalendar控制元件

MonthCalendar--月曆控制元件 提供一個直觀的圖形介面,可以讓使用者檢視和設定日期。 允許使用滑鼠進行拖曳,以便選擇一段連續的時間,此段連續的時間包括起始和結束時間 (1)MonthCalendar控制元件以粗體顯示特定日期 步驟: 建立一個DateTime

Android自定義元件日曆控制元件-精美日曆實現(內容、樣式可擴充套件)

需求 我們知道,Android系統本身有自帶的日曆控制元件,網路上也有很多開源的日曆控制元件資源,但是這些日曆控制元件往往樣式較單一,API較多,不易於在實際專案中擴充套件並實現出符合具體樣式風格的,內容可定製的效果。本文通過自定義日曆控制元件,實現了在內容和樣

分分鐘搞定自定義控制元件組合控制元件--自定義View入門篇

今天給大家詳細講解一下如何實現自定義組合控制元件,組合控制元件其實很簡單。大家可以自由地組合任意控制元件。好了,下面開始我們的正文。 我們要實現的效果如右圖底部所示,其實呢!大家只要把握規律,還是挺容易的。 新建一個attrs.xml屬性集檔案,即你要自定義控制元件的

Android 自定義控制元件標籤控制元件

一、首先這是效果 二、實現原理 通過繼承ViewGroup,然後在重寫 onMeasure測量每個View的寬度,重新onLayout控制每個控制元件的位置, 並新增點選事件 三、實現 1、在onMeasure方法中得到顯示方式,並得到寬高 int widt

vue高階元件路由許可權元件

主要是用render渲染函式 在路由配置檔案中使用該元件,判斷渲染哪一個頁面 // right.js import hav

.Net Core 認證元件Cookie認證元件解析原始碼

接著上文.Net Core 認證系統原始碼解析,Cookie認證算是常用的認證模式,但是目前主流都是前後端分離,有點雞肋但是,不考慮移動端的站點或者純管理後臺網站可以使用這種認證方式.注意:基於瀏覽器且不是前後端分離的架構(頁面端具有服務端處理能力).移動端就不要考慮了,太麻煩.支援前後端分離前給移動端提供認

abp vnext2.0核心元件模組載入元件原始碼解析

abp vnext是abp官方在abp的基礎之上構建的微服務框架,說實話,看完核心元件原始碼的時候,很興奮,整個框架將元件化的細想運用的很好,真的超級解耦.老版整個框架依賴Castle的問題,vnext對其進行了解耦,支援AutoFac或者使用.Net Core的預設容器.vnext依然沿用EF core為主

微信小程式裡面的標籤和html標籤的對比、微信小程式基礎常用控制元件

微信小程式和html5標籤的區別: HTML5 微信小程式 <h1></h1>...<h6></h6> <p>&l

DjangoForms元件

froms元件 校驗欄位 校驗欄位是forms元件最重要的功能。 以使用者註冊為例 模型 class UserInfo(models.Model): name=models.CharField(max_length=32) pwd=models.CharField(max_

django django中的HTML控制元件及引數傳遞方法 以及 HTML form 裡的資料是怎麼被包成http request 的?如何在瀏覽器裡檢視到這些資料? 從HTML form submit 到 django response是怎麼完成的

  https://www.jb51.net/article/136738.htm django中的HTML控制元件及引數傳遞方法 下面小編就為大家分享一篇django中的HTML控制元件及引數傳遞方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧

laravel框架 向郵箱傳送html頁面

需要系統配置的檔案資訊   .env檔案中   MAIL_DRIVER=smtp //預設 MAIL_HOST=smtp.163.com //你的郵箱格式 MAIL_PORT=465 //郵箱埠 [email protected]

你聽說過原生 HTML 元件嗎?(轉載)

嘿!看看這幾年啊,Web 前端的發展可是真快啊! 想想幾年前,HTML 是前端開發者的基本技能,通過各式各樣的標籤就可以搭建一個可用的網站,基本互動也不是問題。如果再來點 CSS,嗯,金黃酥脆,美味可口。這時候再撒上幾把 JavaScript,簡直讓人慾罷不能。 隨著需求的增長,HTML 的結構越來越複雜,

vue2.0 文本渲染-v-html、v-text

mic fun .cn data itl con body meta doctype vue2.0 之文本渲染-v-html、v-text 1、index.html代碼 <!DOCTYPE html> <html> <head>

jQuery的DOM操作設置和獲取HTML、文本和值 html()text()val()

java fontsize doc .text cti checkbox .net mar jsb 1. html()方法: 此方法類似於JavaScript中的innerHTML屬性,可以用來讀取或者設置某個元素中的html內容。 <html> <h