本篇文章给大家带来的内容是关于yii2的ActiveForm表单使用的方法介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

因目前项目并非前后端分离模式，且用到PHP的yii2框架（所有html代码，js较多内嵌在.php文件内多少采用同步提交【喷墨中...】），遂对于前端面上需要用到的yii2小组件一些整理（因是前端若涉及到php写法错误或者风格问题，敬请指点）

使用场景尽量为表单

基础注册调用小组件

1. <?php 
2.  
3. 　　use yii\helpers\Html; 
4.  
5. 　　use yii\widgets\ActiveForm; 
6.  
7. ？> 
8.  
9.  
10.  
11. 　　//首先注册activeForm小部件，并赋值给$form(php中的声明变量方法用$ 等价于js中的var let) 
12.  
13. 　　//begin 标志小部件开始 
14.  
15. 　　<?php $form = ActiveForm::begin([ 
16.  
17.     　　'id' => 'login-form', //声明小部件的id 即form的id 
18.  
19. 　　　　 //声明需要添加的属性 ，例如class ， data-x等 
20.  
21.     　　'options' => ['class' => 'form-horizontal'], 
22.  
23. 　　]) ?> 
24.  
25.  
26.  
27. 　　　　//注册完小部件后可以在 activeForm小部件声明块中调用小部件的方法 
28.  
29. 　　    <?= $form->field($model, 'password')->passwordInput() ?> 
30.  
31.  
32.  
33. //：：end标识小部件结束 
34.  
35. <?php ActiveForm::end() ?> 

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

自定义input框：input();

文本框:textInput();

密码框:passwordInput();

单选框:radio(),radioList();

复选框:checkbox(),checkboxList();

下拉框:dropDownList();

多选列表:listBox();

隐藏域:hiddenInput();

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

文件上传:fileInput();

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

2、下面我就逐一描述下各个方法的基本调用以及如何自定义所需(上述各方法中input之前均是描述的是input标签的类型)

2.1 input 文本框/密码框以及各指定类型框

1. <?php $form=ActiveForm::begin(['id'=>'login','class'=>'login'])?> 
2.  
3.     <!-- 简易用法 使用activeForm 的 fiedld方法  --> 
4.  
5.     <!-- 其中 该方法下有  
6.  
7.         textInout/passwordInput 等一些常用input类型方法 
8.  
9.         hint 输入前的提示内容 
10.  
11.         error 错误内容 //一般由后台生成 
12.  
13.         label 可以更改label内的内容 
14.  
15.         在hint,error,label设置class后将会重置了 这些方法内原来属于容器上的class若需要可以原样赋回去 
16.  
17.     --> 
18.  
19.     <!-- 这里的 
20.  
21.         $mode为跟字段有关的数据模型 ， 
22.  
23.         第二个参数为关系模型中的字段不存在将报错， 
24.  
25.         第三个参数为模板内的一些内容的进行自定义 
26.  
27.     --> 
28.  
29.     <?= $form->field($model, 'username',[ 
30.  
31.         'options'=>[],//数组里面可以设置自需属性 
32.  
33.         // template 为字符串模板可自定义模板 ， 
34.  
35.         // 其中 {label} {input} {hint} {error} 存在是会调用对应封装好的html模板 当然你也可以不写这样就不会生成yii2内置小部件模板 
36.  
37.         'template' => '{label} {input} {hint} {error}', 
38.  
39.         // 以下三个分别可以设置label ，input ，hint，error的属性（都是选填项） 
40.  
41.         // 其中如果后面有使用->input...,label(...)等将会将这些里面的配置合并值对应的xxxOptions 内 
42.  
43.         'labelOptions' => [ 
44.  
45.             'class'=>'需要在label上添加的类名' 
46.  
47.             //....其他属性集 
48.  
49.         ], 
50.  
51.         'inputOptions' => [], 
52.  
53.         'hintOptions' => [], 
54.  
55.         'errorOptions' => [], 
56.  
57.     ])->textInput([ 
58.  
59.         // 在options数组内可以设置任意属性 
60.  
61.         'class'=>'testClass', 
62.  
63.         'value'=>'测试' 
64.  
65.     ])->hint( 
66.  
67.         // 设置提示内容，当只有一个参数切为false（boolean）用于显示提示的标签 
68.  
69.         'Please enter your name', 
70.  
71.         [ 
72.  
73.             // 设置任意属性 
74.  
75.             'class' => 'testHint' 
76.  
77.     ])->label( 
78.  
79.         // 设置label显示内容，当只有一个参数切为false（boolean）label标签将不会被渲染 
80.  
81.         'Name', 
82.  
83.         [ 
84.  
85.             // 设置任意属性 
86.  
87.             'class' =>'testLabel' 
88.  
89.     ])->error([ 
90.  
91.         // 任意属性，当只有一个参数切为false（boolean）用于显示错误的标签 
92.  
93.         'class'=>'errors' 
94.  
95.     ]) ?> 
96.  
97.  
98.  
99.     <!-- 可自定义类型input 这里只描述了input的参数  其余参数参考上个示例 --> 
100.  
101.     <?= $form->field($model, 'username')->input( 
102.  
103.         // input内只允许放置两个参数即[type ,options] 
104.  
105.         'email',//该处为指定type="xxxx"的input类型 
106.  
107.         ['class'=>'tests','value'=>'值']//可在内部定义任何属性 
108.  
109.     ) ?> 
110.  
111. <?php ActiveForm::end();?> 

2.2 radio 单选框系列

1. <?php $form=ActiveForm::begin(['id'=>'login','class'=>'login'])?> 
2.  
3.  
4.  
5.     <!--  
6.  
7.         老实说对这个radio方法相当迷惑  一个单选按钮选择而且一旦选择无法取消，无法一次柑橘属性放置多个值 在有radioList方法的前提下觉得相当鸡肋 
8.  
9.         第二个参数中false为是否开启label标签若没开启 labelOption 将无效  ，label设置的值直接显示在容器内 
10.  
11.      --> 
12.  
13.     <?= $form->field($model, 'username')->radio([ 
14.  
15.         // 隐藏域中的值 
16.  
17.         'uncheck' =>'test1', 
18.  
19.         // 定义lebal的内容 
20.  
21.         'label' =>'test', 
22.  
23.         // label上的任意属性 
24.  
25.         'labelOptions'=>[ 
26.  
27.             'gs'=>'test' 
28.  
29.         ] 
30.  
31.     ],false)?> 
32.  
33.  
34.  
35.     <!--  
36.  
37.         单选框组  
38.  
39.  
40.  
41.         若要设置默认值，则在对应控制器中将指定字段设置为 需要选择的值 
42.  
43.         $model->username = 1; 
44.  
45.     --> 
46.  
47.  
48.  
49.     <?= $form->field($model, 'username')->radioList([ 
50.  
51.         '0'=>'a', 
52.  
53.         '1'=>'b', 
54.  
55.         '2'=>'c' 
56.  
57.     ],[ 
58.  
59.         // tag声改变 class="radio"的父级标签 若tag设置为h3  
60.  
61.         //    则 <div id="loginform-username" key="testKey" role="radiogroup" aria-required="true">  
62.  
63.         //    => 转为 <h3 id="loginform-username" key="testKey" role="radiogroup" aria-required="true"> 
64.  
65.         // <div class="form-group field-loginform-username required"> 
66.  
67.         //     <label class="control-label">Username</label> 
68.  
69.         //     <input type="hidden" name="LoginForm[username]" value=""> 
70.  
71.         //     <div id="loginform-username" key="testKey" role="radiogroup" aria-required="true"> 
72.  
73.         //         <div class="radio"><label><input type="radio" name="LoginForm[username]" value="0"> a</label></div> 
74.  
75.         //         <div class="radio"><label><input type="radio" name="LoginForm[username]" value="1"> b</label></div> 
76.  
77.         //         <div class="radio"><label><input type="radio" name="LoginForm[username]" value="2"> c</label></div> 
78.  
79.         //     </div> 
80.  
81.  
82.  
83.         //     <p class="help-block help-block-error"></p> 
84.  
85.         // </div> 
86.  
87.         'tag'=>'h3', 
88.  
89.         // 未选择是默认提交的值 
90.  
91.         'unselect'=>'1', 
92.  
93.         // 如果设置了item选项，则忽略此选项 
94.  
95.         'encode'=>false, 
96.  
97.         // 每个单选块之间的内容 写的是什么字符串输出就什么字符串 
98.  
99.         'separator'=>'', 
100.  
101.         // 定义在每个input单选按钮上的属性 
102.  
103.         'itemOptions'=>[ 
104.  
105.             'tess'=>'jzq' 
106.  
107.         ], 
108.  
109. 　　　　　　//可调用的回调，可用于自定义与$Item中单个项对应的HTML代码的生成。此回调的签名必须是：函数($index、$Label、$name、$check、$value)， 
110.  
111. 　　　　　　//其中$index是整个列表中单选按钮的基于零的索引；$Label是单选按钮的标签；$name、$value和$check表示单选按钮输入的名称、值和选中状态。 
112.  
113.         'item'=>function($index, $label, $name, $checked, $value){ 
114.  
115.             // 这块跟encode是在下才疏学浅暂时还未明白啥子用处，待弄明白后在补上，若有码友知晓这块具体作用用法，希望不吝赐教，感激 
116.  
117.             // echo $index, $label, $name, $checked, $value; 
118.  
119.         }, 
120.  
121.         // 除此yii2有规定属性之外还可自定义任意属性  且上述属性均不是必填 
122.  
123.     ])?> 

2.3 checkbox多选框系列

1. <?php $form=ActiveForm::begin(['id'=>'login','class'=>'login'])?> 
2.  
3.     <!--  
4.  
5.         checbox方法 
6.  
7.         该方法与radio 方法近似就不多说了 直接撸代码 具体可参考 radio 
8.  
9.      --> 
10.  
11.     <?= $form->field($model, 'username')->checkbox([ 
12.  
13.         // 隐藏域中的值 
14.  
15.         'uncheck' =>'test1', 
16.  
17.         // 定义lebal的内容 
18.  
19.         'label' =>'test', 
20.  
21.         // label上的任意属性 
22.  
23.         'labelOptions'=>[ 
24.  
25.             'gs'=>'test' 
26.  
27.         ] 
28.  
29.     ],true)?> 
30.  
31.  
32.  
33.     <!--  
34.  
35.         checkboxList方法 
36.  
37.         多选框 
38.  
39.      --> 
40.  
41.      <?= $form->field($model, 'username')->checkboxList([ 
42.  
43.         '1'=>'篮球', 
44.  
45.         '2'=>'足球', 
46.  
47.         '3'=>'游戏', 
48.  
49.         '4'=>'读书' 
50.  
51.     ],[ 
52.  
53.          // tag声改变 class="radio"的父级标签 若tag设置为h3  
54.  
55.         //    则 <div id="loginform-username" key="testKey" role="radiogroup" aria-required="true">  
56.  
57.         //    => 转为 <h3 id="loginform-username" key="testKey" role="radiogroup" aria-required="true"> 
58.  
59.         // <div class="form-group field-loginform-username required"> 
60.  
61.         //     <label class="control-label">Username</label> 
62.  
63.         //     <input type="hidden" name="LoginForm[username]" value=""> 
64.  
65.         //     <div id="loginform-username" key="testKey" role="radiogroup" aria-required="true"> 
66.  
67.         //         <div class="radio"><label><input type="radio" name="LoginForm[username]" value="0"> a</label></div> 
68.  
69.         //         <div class="radio"><label><input type="radio" name="LoginForm[username]" value="1"> b</label></div> 
70.  
71.         //         <div class="radio"><label><input type="radio" name="LoginForm[username]" value="2"> c</label></div> 
72.  
73.         //     </div> 
74.  
75.  
76.  
77.         //     <p class="help-block help-block-error"></p> 
78.  
79.         // </div> 
80.  
81.         'tag'=>'h3', 
82.  
83.         // 未选择是默认提交的值 
84.  
85.         'unselect'=>'1', 
86.  
87.         // 如果设置了item选项，则忽略此选项 
88.  
89.         'encode'=>false, 
90.  
91.         // 每个单选块之间的内容 写的是什么字符串输出就什么字符串,建议如无特殊情况 请忽视该字段 
92.  
93.         // 'separator'=>',', 
94.  
95.         // 定义在每个input单选按钮上的属性 
96.  
97.         'itemOptions'=>[ 
98.  
99.             'tess'=>'jzq' 
100.  
101.         ], 
102.  
103.         // 用于替换html指向函数后若不做操作将会输出空 
104.  
105.         // 'item'=>function($index, $label, $name, $checked, $value){ 
106.  
107.             // 这块跟encode是在下才疏学浅暂时还未明白啥子用处，待弄明白后在补上，若有码友知晓这块具体作用用法，希望不吝赐教，感激 
108.  
109.             // echo $index, $label, $name, $checked, $value; 
110.  
111.         // }, 
112.  
113.         // 除此yii2有规定属性之外还可自定义任意属性  且上述属性均不是必填 
114.  
115.     ])?> 
116.          
117.  
118. <?php ActiveForm::end();?> 

2.4 select下拉列表系列

1. <?php $form=ActiveForm::begin(['id'=>'login','class'=>'login'])?> 
2.  
3.     <!--  
4.  
5.         dropDownList方法 
6.  
7.         下拉列表 
8.  
9.      --> 
10.  
11.      <?= $form->field($model, 'username')->dropDownList([ 
12.  
13.         //  二维数组直接回报上组标签 
14.  
15.         'test'=>[ 
16.  
17.             '1'=>'篮球', 
18.  
19.             '2'=>'足球', 
20.  
21.         ], 
22.  
23.         '3'=>'游戏', 
24.  
25.         '4'=>'读书' 
26.  
27.     ],[ 
28.  
29.         // 设置下拉列表的默认请选择选项 
30.  
31.         'prompt'=>[ 
32.  
33.             'text' => '请选择',  
34.  
35.             'options' => ['value' => 'none', 'class' => 'prompt', 'label' => 'Select'] 
36.  
37.         ], 
38.  
39.         'encode'=>false, 
40.  
41.         // 对select option的设置条件以及更改内容 
42.  
43.         'options'=>[ 
44.  
45.             // 设置禁止选择项 
46.  
47.             '2' => ['disabled' => true], 
48.  
49.             //替换或者追加指定key的内容,实际上原内容还在只是假设了 label 属性 和显示了 label的属性值 
50.  
51.             '4' => ['label' => 'value 2'], 
52.  
53.         ], 
54.  
55.         'encodeSpaces'=>true 
56.  
57.         // 除此yii2有规定属性之外还可自定义任意属性  且上述属性均不是必填 
58.  
59.     ])?> 
60.                
61.  
62. <?php ActiveForm::end();?> 

2.5 widget 小部件

1. <?php $form=ActiveForm::begin(['id'=>'login','class'=>'login'])?> 
2.  
3.  
4.  
5.     <!--  
6.  
7.         小部件 
8.  
9.         用于强制输入正确内容的input部件 
10.  
11.      --> 
12.  
13.     <?= $form->field($model, 'username',[ 
14.  
15.         'template'=>'<h2>test</h2> {label} {input} {error}' 
16.  
17.     ])->widget(\yii\widgets\MaskedInput::className(), [ 
18.  
19.         // 指定input类型 
20.  
21.         // 'type'=>'time', 
22.  
23.         // 指定必须输入的类型 
24.  
25.         'mask' => '999-9999-9999', 
26.  
27.         'options'=>['class' => 'form-control test'] 
28.  
29.     ]); ?> 
30.  
31.  
32.  
33.     <!--  
34.  
35.         用于生成带图片验证的input小部件 
36.  
37.         --> 
38.  
39.     <?= $form->field($model, 'verifyCode')->widget(Captcha::className(), [ 
40.  
41.         'captchaAction' => 'login/captcha', 
42.  
43.         'options' => [ 
44.  
45.             'class' => 'two', 
46.  
47.             'id'=>'two', 
48.  
49.             'placeholder' => '请输入验证码', 
50.  
51.         ], 
52.  
53.         'template' => '{input}{image}', 
54.  
55.         'imageOptions' => [ 
56.  
57.             'alt' => 'images', 
58.  
59.         ] 
60.  
61.     ])?> 
62.  
63.  
64.  
65. 　　--------------------- 最后一个并未实测   ------------------------------- 
66.  
67. <!-- 自定义小部件 需在widget文件定义源文件 --> <?= $form->field($model, 'username')->widget('WidgetClassName', [ // configure additional widget properties here ]) ?> <?php ActiveForm::end();?> 

以上是这段时间使用的一篇小总结 如有用法错误敬请指点。

Tags: yii2 ActiveForm

分享到：