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
這個欄位將會用 使用者
Model
的 email
屬性來填充並且設定. 當然, 還有其他用法. 如果一個欄位在session 快閃記憶體資料中 也存在這個名字, 這個將會覆蓋模型中的這個欄位值. 優先順序是這個樣子的:
- Session Flash Data (Old Input) [session 快閃記憶體 / 老的輸入資料 ]
- Explicitly Passed Value [輸入值]
- 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
Django之Forms元件
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