yii2的ActiveForm表單怎么用

小編給大家分享一下yii2的ActiveForm表單怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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

使用場景盡量為表單

基礎注冊調用小組件

<?php
　　use yii\helpers\Html;
　　use yii\widgets\ActiveForm;
？>

　　//首先注冊activeForm小部件，并賦值給$form(php中的聲明變量方法用$ 等價于js中的var let)
　　//begin 標志小部件開始
　　<?php $form = ActiveForm::begin([
    　　'id' => 'login-form', //聲明小部件的id 即form的id
　　　　 //聲明需要添加的屬性 ，例如class ， data-x等
    　　'options' => ['class' => 'form-horizontal'],
　　]) ?>

　　　　//注冊完小部件后可以在 activeForm小部件聲明塊中調用小部件的方法
　　    <?= $form->field($model, 'password')->passwordInput() ?>

//：：end標識小部件結束
<?php ActiveForm::end() ?>

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

　　自定義input框：input();

　　文本框:textInput();

　　密碼框:passwordInput();

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

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

　　下拉框:dropDownList();

　　多選列表:listBox();

　　隱藏域:hiddenInput();

　　文本域:textarea(['rows'=>3]);

　　文件上傳:fileInput();

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

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

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

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

    <!-- 可自定義類型input 這里只描述了input的參數  其余參數參考上個示例 -->
    <?= $form->field($model, 'username')->input(
        // input內只允許放置兩個參數即[type ,options]
        'email',//該處為指定type="xxxx"的input類型
        ['class'=>'tests','value'=>'值']//可在內部定義任何屬性
    ) ?>
                       
<?php ActiveForm::end();?>

2.2 radio 單選框系列

<?php $form=ActiveForm::begin(['id'=>'login','class'=>'login'])?>

    <!-- 
        老實說對這個radio方法相當迷惑  一個單選按鈕選擇而且一旦選擇無法取消，無法一次柑橘屬性放置多個值 在有radioList方法的前提下覺得相當雞肋
        第二個參數中false為是否開啟label標簽若沒開啟 labelOption 將無效  ，label設置的值直接顯示在容器內
     -->
    <?= $form->field($model, 'username')->radio([
        // 隱藏域中的值
        'uncheck' =>'test1',
        // 定義lebal的內容
        'label' =>'test',
        // label上的任意屬性
        'labelOptions'=>[
            'gs'=>'test'
        ]
    ],false)?>

    <!-- 
        單選框組 

        若要設置默認值，則在對應控制器中將指定字段設置為 需要選擇的值
        $model->username = 1;
    -->

    <?= $form->field($model, 'username')->radioList([
        '0'=>'a',
        '1'=>'b',
        '2'=>'c'
    ],[
        // tag聲改變 class="radio"的父級標簽 若tag設置為h4 
        //    則 <div id="loginform-username" key="testKey" role="radiogroup" aria-required="true"> 
        //    => 轉為 <h4 id="loginform-username" key="testKey" role="radiogroup" aria-required="true">
        // <div class="form-group field-loginform-username required">
        //     <label class="control-label">Username</label>
        //     <input type="hidden" name="LoginForm[username]" value="">
        //     <div id="loginform-username" key="testKey" role="radiogroup" aria-required="true">
        //         <div class="radio"><label><input type="radio" name="LoginForm[username]" value="0"> a</label></div>
        //         <div class="radio"><label><input type="radio" name="LoginForm[username]" value="1"> b</label></div>
        //         <div class="radio"><label><input type="radio" name="LoginForm[username]" value="2"> c</label></div>
        //     </div>

        //     <p class="help-block help-block-error"></p>
        // </div>
        'tag'=>'h4',
        // 未選擇是默認提交的值
        'unselect'=>'1',
        // 如果設置了item選項，則忽略此選項
        'encode'=>false,
        // 每個單選塊之間的內容 寫的是什么字符串輸出就什么字符串
        'separator'=>'',
        // 定義在每個input單選按鈕上的屬性
        'itemOptions'=>[
            'tess'=>'jzq'
        ],
　　　　　　//可調用的回調，可用于自定義與$Item中單個項對應的HTML代碼的生成。此回調的簽名必須是：函數($index、$Label、$name、$check、$value)，
　　　　　　//其中$index是整個列表中單選按鈕的基于零的索引；$Label是單選按鈕的標簽；$name、$value和$check表示單選按鈕輸入的名稱、值和選中狀態。
        'item'=>function($index, $label, $name, $checked, $value){
            // 這塊跟encode是在下才疏學淺暫時還未明白啥子用處，待弄明白后在補上，若有碼友知曉這塊具體作用用法，希望不吝賜教，感激
            // echo $index, $label, $name, $checked, $value;
        },
        // 除此yii2有規定屬性之外還可自定義任意屬性  且上述屬性均不是必填
    ])?>

2.3 checkbox多選框系列

<?php $form=ActiveForm::begin(['id'=>'login','class'=>'login'])?>

    <!-- 
        checbox方法
        該方法與radio 方法近似就不多說了 直接擼代碼 具體可參考 radio
     -->
    <?= $form->field($model, 'username')->checkbox([
        // 隱藏域中的值
        'uncheck' =>'test1',
        // 定義lebal的內容
        'label' =>'test',
        // label上的任意屬性
        'labelOptions'=>[
            'gs'=>'test'
        ]
    ],true)?>

    <!-- 
        checkboxList方法
        多選框
     -->
     <?= $form->field($model, 'username')->checkboxList([
        '1'=>'籃球',
        '2'=>'足球',
        '3'=>'游戲',
        '4'=>'讀書'
    ],[
         // tag聲改變 class="radio"的父級標簽 若tag設置為h4 
        //    則 <div id="loginform-username" key="testKey" role="radiogroup" aria-required="true"> 
        //    => 轉為 <h4 id="loginform-username" key="testKey" role="radiogroup" aria-required="true">
        // <div class="form-group field-loginform-username required">
        //     <label class="control-label">Username</label>
        //     <input type="hidden" name="LoginForm[username]" value="">
        //     <div id="loginform-username" key="testKey" role="radiogroup" aria-required="true">
        //         <div class="radio"><label><input type="radio" name="LoginForm[username]" value="0"> a</label></div>
        //         <div class="radio"><label><input type="radio" name="LoginForm[username]" value="1"> b</label></div>
        //         <div class="radio"><label><input type="radio" name="LoginForm[username]" value="2"> c</label></div>
        //     </div>

        //     <p class="help-block help-block-error"></p>
        // </div>
        'tag'=>'h4',
        // 未選擇是默認提交的值
        'unselect'=>'1',
        // 如果設置了item選項，則忽略此選項
        'encode'=>false,
        // 每個單選塊之間的內容 寫的是什么字符串輸出就什么字符串,建議如無特殊情況 請忽視該字段
        // 'separator'=>',',
        // 定義在每個input單選按鈕上的屬性
        'itemOptions'=>[
            'tess'=>'jzq'
        ],
        // 用于替換html指向函數后若不做操作將會輸出空
        // 'item'=>function($index, $label, $name, $checked, $value){
            // 這塊跟encode是在下才疏學淺暫時還未明白啥子用處，待弄明白后在補上，若有碼友知曉這塊具體作用用法，希望不吝賜教，感激
            // echo $index, $label, $name, $checked, $value;
        // },
        // 除此yii2有規定屬性之外還可自定義任意屬性  且上述屬性均不是必填
    ])?>

                       
<?php ActiveForm::end();?>

2.4 select下拉列表系列

<?php $form=ActiveForm::begin(['id'=>'login','class'=>'login'])?>

    <!-- 
        dropDownList方法
        下拉列表
     -->
     <?= $form->field($model, 'username')->dropDownList([
        //  二維數組直接回報上組標簽
        'test'=>[
            '1'=>'籃球',
            '2'=>'足球',
        ],
        '3'=>'游戲',
        '4'=>'讀書'
    ],[
        // 設置下拉列表的默認請選擇選項
        'prompt'=>[
            'text' => '請選擇', 
            'options' => ['value' => 'none', 'class' => 'prompt', 'label' => 'Select']
        ],
        'encode'=>false,
        // 對select option的設置條件以及更改內容
        'options'=>[
            // 設置禁止選擇項
            '2' => ['disabled' => true],
            //替換或者追加指定key的內容,實際上原內容還在只是假設了 label 屬性 和顯示了 label的屬性值
            '4' => ['label' => 'value 2'],
        ],
        'encodeSpaces'=>true
        // 除此yii2有規定屬性之外還可自定義任意屬性  且上述屬性均不是必填
    ])?>

    

        
                       
<?php ActiveForm::end();?>

2.5 widget 小部件

<?php $form=ActiveForm::begin(['id'=>'login','class'=>'login'])?>

    <!-- 
        小部件
        用于強制輸入正確內容的input部件
     -->
    <?= $form->field($model, 'username',[
        'template'=>'<h3>test</h3> {label} {input} {error}'
    ])->widget(\yii\widgets\MaskedInput::className(), [
        // 指定input類型
        // 'type'=>'time',
        // 指定必須輸入的類型
        'mask' => '999-9999-9999',
        'options'=>['class' => 'form-control test']
    ]); ?>

    <!-- 
        用于生成帶圖片驗證的input小部件
        -->
    <?= $form->field($model, 'verifyCode')->widget(Captcha::className(), [
        'captchaAction' => 'login/captcha',
        'options' => [
            'class' => 'two',
            'id'=>'two',
            'placeholder' => '請輸入驗證碼',
        ],
        'template' => '{input}{image}',
        'imageOptions' => [
            'alt' => 'images',
        ]
    ])?>

　　--------------------- 最后一個并未實測   -------------------------------
<!-- 自定義小部件 需在widget文件定義源文件 --> <?= $form->field($model, 'username')->widget('WidgetClassName', [ // configure additional widget properties here ]) ?> <?php ActiveForm::end();?>

以上是yii2的ActiveForm表單怎么用的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！