因目前項(xiàng)目并非前后端分離模式，且用到PHP的yii2框架（所有html代碼，js較多內(nèi)嵌在.php文件內(nèi)多少采用同步提交【噴墨中...】），遂對于前端面上需要用到的yii2小組件一些整理（因是前端若涉及到php寫法錯(cuò)誤或者風(fēng)格問題，敬請指點(diǎn)）

使用場景盡量為表單

基礎(chǔ)注冊調(diào)用小組件

 ?php use yii/helpers/Html; use yii/widgets/ActiveForm; //首先注冊activeForm小部件，并賦值給$form(php中的聲明變量方法用$ 等價(jià)于js中的var let) //begin 標(biāo)志小部件開始 ?php $form = ActiveForm::begin([ id = login-form , //聲明小部件的id 即form的id //聲明需要添加的屬性 ，例如class ， data-x等 options = [ class = form-horizontal ], ]) ?  //注冊完小部件后可以在 activeForm小部件聲明塊中調(diào)用小部件的方法 ?= $form- field($model, password )- passwordInput() ? //：：end標(biāo)識小部件結(jié)束 ?php ActiveForm::end() ? 

1、首先就列出activeForm的一些基本方法：

自定義input框：input();

文本框:textInput();

密碼框:passwordInput();

單選框:radio(),radioList();

復(fù)選框:checkbox(),checkboxList();

下拉框:dropDownList();

多選列表:listBox();

隱藏域:hiddenInput();

文本域:textarea([ rows =

文件上傳:fileInput();

widget擴(kuò)展 ?= $form- field($model, username )- widget(/yii/widgets/MaskedInput::className(), [ mask = 9999/99/99 ,]); ?

2、下面我就逐一描述下各個(gè)方法的基本調(diào)用以及如何自定義所需(上述各方法中input之前均是描述的是input標(biāo)簽的類型)

2.1 input 文本框/密碼框以及各指定類型框

 ?php $form=ActiveForm::begin([ id = login , class = login ])?  !-- 簡易用法 使用activeForm 的 fiedld方法 --  !-- 其中 該方法下有  textInout/passwordInput 等一些常用input類型方法 hint 輸入前的提示內(nèi)容 error 錯(cuò)誤內(nèi)容 //一般由后臺生成 label 可以更改label內(nèi)的內(nèi)容 在hint,error,label設(shè)置class后將會(huì)重置了 這些方法內(nèi)原來屬于容器上的class若需要可以原樣賦回去 !-- 這里的 $mode為跟字段有關(guān)的數(shù)據(jù)模型 ， 第二個(gè)參數(shù)為關(guān)系模型中的字段不存在將報(bào)錯(cuò)， 第三個(gè)參數(shù)為模板內(nèi)的一些內(nèi)容的進(jìn)行自定義 ?= $form- field($model, username ,[ options = [],//數(shù)組里面可以設(shè)置自需屬性 // template 為字符串模板可自定義模板 ， // 其中 {label} {input} {hint} {error} 存在是會(huì)調(diào)用對應(yīng)封裝好的html模板 當(dāng)然你也可以不寫這樣就不會(huì)生成yii2內(nèi)置小部件模板 template = {label} {input} {hint} {error} , // 以下三個(gè)分別可以設(shè)置label ，input ，hint，error的屬性（都是選填項(xiàng)） // 其中如果后面有使用- input...,label(...)等將會(huì)將這些里面的配置合并值對應(yīng)的xxxOptions 內(nèi) labelOptions = [ class = 需要在label上添加的類名  //....其他屬性集 inputOptions = [], hintOptions = [], errorOptions = [], ])- textInput([ // 在options數(shù)組內(nèi)可以設(shè)置任意屬性 class = testClass , value = 測試  ])- hint( // 設(shè)置提示內(nèi)容，當(dāng)只有一個(gè)參數(shù)切為false（boolean）用于顯示提示的標(biāo)簽 Please enter your name , // 設(shè)置任意屬性 class = testHint  ])- label( // 設(shè)置label顯示內(nèi)容，當(dāng)只有一個(gè)參數(shù)切為false（boolean）label標(biāo)簽將不會(huì)被渲染 Name , // 設(shè)置任意屬性 class = testLabel  ])- error([ // 任意屬性，當(dāng)只有一個(gè)參數(shù)切為false（boolean）用于顯示錯(cuò)誤的標(biāo)簽 class = errors  ]) ?  !-- 可自定義類型input 這里只描述了input的參數(shù) 其余參數(shù)參考上個(gè)示例 --  ?= $form- field($model, username )- input( // input內(nèi)只允許放置兩個(gè)參數(shù)即[type ,options] email ,//該處為指定type= xxxx 的input類型 [ class = tests , value = 值 ]//可在內(nèi)部定義任何屬性 ) ?  ?php ActiveForm::end();? 

2.2 radio 單選框系列

 ?php $form=ActiveForm::begin([ id = login , class = login ])?  !--  老實(shí)說對這個(gè)radio方法相當(dāng)迷惑 一個(gè)單選按鈕選擇而且一旦選擇無法取消，無法一次柑橘屬性放置多個(gè)值 在有radioList方法的前提下覺得相當(dāng)雞肋 第二個(gè)參數(shù)中false為是否開啟label標(biāo)簽若沒開啟 labelOption 將無效 ，label設(shè)置的值直接顯示在容器內(nèi) ?= $form- field($model, username )- radio([ // 隱藏域中的值 uncheck = test1 , // 定義lebal的內(nèi)容 label = test , // label上的任意屬性 labelOptions = [ gs = test  ],false)?  !--  單選框組  若要設(shè)置默認(rèn)值，則在對應(yīng)控制器中將指定字段設(shè)置為 需要選擇的值 $model- username = 1; ?= $form- field($model, username )- radioList([ 0 = a , 1 = b , 2 = c  // tag聲改變 >
2.3 checkbox多選框系列
 ?php $form=ActiveForm::begin([ id = login , class = login ])?  !--  checbox方法 該方法與radio 方法近似就不多說了 直接擼代碼 具體可參考 radio ?= $form- field($model, username )- checkbox([ // 隱藏域中的值 uncheck = test1 , // 定義lebal的內(nèi)容 label = test , // label上的任意屬性 labelOptions = [ gs = test  ],true)?  !--  checkboxList方法 ?= $form- field($model, username )- checkboxList([ 1 = 籃球 , 2 = 足球 , 3 = 游戲 , 4 = 讀書  // tag聲改變 >
2.4 select下拉列表系列
 ?php $form=ActiveForm::begin([ id = login , class = login ])?  !--  dropDownList方法 下拉列表 ?= $form- field($model, username )- dropDownList([ // 二維數(shù)組直接回報(bào)上組標(biāo)簽 test = [ 1 = 籃球 , 2 = 足球 , 3 = 游戲 , 4 = 讀書  // 設(shè)置下拉列表的默認(rèn)請選擇選項(xiàng) prompt = [ text = 請選擇 ,  options = [ value = none , class = prompt , label = Select ] encode = false, // 對select option的設(shè)置條件以及更改內(nèi)容 options = [ // 設(shè)置禁止選擇項(xiàng) 2 = [ disabled = true], //替換或者追加指定key的內(nèi)容,實(shí)際上原內(nèi)容還在只是假設(shè)了 label 屬性 和顯示了 label的屬性值 4 = [ label = value 2 ], encodeSpaces = true // 除此yii2有規(guī)定屬性之外還可自定義任意屬性 且上述屬性均不是必填 ])? 
 ?php ActiveForm::end();? 
2.5 widget 小部件
 ?php $form=ActiveForm::begin([ id = login , class = login ])?  !--  用于強(qiáng)制輸入正確內(nèi)容的input部件 ?= $form- field($model, username ,[ template = h2 test /h2 {label} {input} {error}  ])- widget(/yii/widgets/MaskedInput::className(), [ // 指定input類型 // type = time , // 指定必須輸入的類型 mask = 999-9999-9999 , options = [ class = form-control test ] ]); ?  !--  用于生成帶圖片驗(yàn)證的input小部件 ?= $form- field($model, verifyCode )- widget(Captcha::className(), [ captchaAction = login/captcha , options = [ class = two , id = two , placeholder = 請輸入驗(yàn)證碼 , template = {input}{image} , imageOptions = [ alt = images , ])?  --------------------- 最后一個(gè)并未實(shí)測 ------------------------------- !-- 自定義小部件 需在widget文件定義源文件 -- ?= $form- field($model, username )- widget( WidgetClassName , [ // configure additional widget properties here ]) ? ?php ActiveForm::end();? 
 以上是這段時(shí)間使用的一篇小總結(jié) 如有用法錯(cuò)誤敬請指點(diǎn)
以上就是yii2的ActiveForm表單使用的方法介紹的詳細(xì)內(nèi)容，PHP教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。