yii2之ActiveForm表单使⽤
因⽬前项⽬并⾮前后端分离模式，且⽤到PHP的yii2框架（所有html代码，js较多内嵌在.php⽂件内多少采⽤同步提交【喷墨中...】），遂对于前端⾯上需要⽤到的yii2⼩组件⼀些整理（因是前端若涉及到php写法错误或者风格问题，敬请指点）
使⽤场景尽量为表单
基础注册调⽤⼩组件
<?php
u yii\helpers\Html;
u yii\widgets\ActiveForm;
>
april fool
//⾸先注册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, 'urname')->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, 'urname',[
'options'=>[],//数组⾥⾯可以设置⾃需属性
// template 为字符串模板可⾃定义模板，
// 其中 {label} {input} {hint} {error} 存在是会调⽤对应封装好的html模板当然你也可以不写这样就不会⽣成yii2内置⼩部件模板
'template' => '{label} {input} {hint} {error}',
// 以下三个分别可以设置label ，input ，hint，error的属性（都是选填项）
// 其中如果后⾯有使⽤-&,label(...)等将会将这些⾥⾯的配置合并值对应的xxxOptions 内
'labelOptions' => [
'class'=>'需要在label上添加的类名'
//....其他属性集
],
'inputOptions' => [],
'hintOptions' => [],
'errorOptions' => [],
])->textInput([
// 在options数组内可以设置任意属性
'class'=>'testClass',
'value'=>'测试'
])->hint(
// 设置提⽰内容，当只有⼀个参数切为fal（boolean）⽤于显⽰提⽰的标签
'Plea enter your name',
[
// 设置任意属性
'class' => 'testHint'
])->label(
// 设置label显⽰内容，当只有⼀个参数切为fal（boolean）label标签将不会被渲染
'Name',
[
/
/ 设置任意属性苏州新东方英语学校
'class' =>'testLabel'
])->error([
// 任意属性，当只有⼀个参数切为fal（boolean）⽤于显⽰错误的标签
'class'=>'errors'
]) ?>
<!-- 可⾃定义类型input 这⾥只描述了input的参数其余参数参考上个⽰例 -->
<?= $form->field($model, 'urname')->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⽅法的前提下觉得相当鸡肋第⼆个参数中fal为是否开启label标签若没开启 labelOption 将⽆效，label设置的值直接显⽰在容器内
-->
<?= $form->field($model, 'urname')->radio([
// 隐藏域中的值
'uncheck' =>'test1',
// 定义lebal的内容
'label' =>'test',
// label上的任意属性
'labelOptions'=>[
'gs'=>'test'
]
],fal)?>
<!--
单选框组
若要设置默认值，则在对应控制器中将指定字段设置为需要选择的值
$model->urname = 1;
-
->
<?= $form->field($model, 'urname')->radioList([
'0'=>'a',
'1'=>'b',
'2'=>'c'
],[
// tag声改变 class="radio"的⽗级标签若tag设置为h3
// 则 <div id="loginform-urname" key="testKey" role="radiogroup" aria-required="true">
// => 转为 <h3 id="loginform-urname" key="testKey" role="radiogroup" aria-required="true">
// <div class="form-group field-loginform-urname required">
// <label class="control-label">Urname</label>
oop
/
/ <input type="hidden" name="LoginForm[urname]" value="">
// <div id="loginform-urname" key="testKey" role="radiogroup" aria-required="true">
// <div class="radio"><label><input type="radio" name="LoginForm[urname]" value="0"> a</label></div>
// <div class="radio"><label><input type="radio" name="LoginForm[urname]" value="1"> b</label></div>
// <div class="radio"><label><input type="radio" name="LoginForm[urname]" value="2"> c</label></div>
// </div>
// <p class="help-block help-block-error"></p>
// </div>
'tag'=>'h3',
/
/ 未选择是默认提交的值
'unlect'=>'1',
donate// 如果设置了item选项，则忽略此选项
'encode'=>fal,
// 每个单选块之间的内容写的是什么字符串输出就什么字符串
'parator'=>'',
// 定义在每个input单选按钮上的属性
pro是什么意思
'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, 'urname')->checkbox([
// 隐藏域中的值hasta la vista
'uncheck' =>'test1',
// 定义lebal的内容
'label' =>'test',
// label上的任意属性
'labelOptions'=>[
'gs'=>'test'
]
],true)?>
<!--
checkboxList⽅法
多选框
receivebuffers-->
<?= $form->field($model, 'urname')->checkboxList([
'1'=>'篮球',
'2'=>'⾜球',
'3'=>'游戏',
'4'=>'读书'
],[
网络翻译
// tag声改变 class="radio"的⽗级标签若tag设置为h3
// 则 <div id="loginform-urname" key="testKey" role="radiogroup" aria-required="true">
// => 转为 <h3 id="loginform-urname" key="testKey" role="radiogroup" aria-required="true">
// <div class="form-group field-loginform-urname required">
// <label class="control-label">Urname</label>
// <input type="hidden" name="LoginForm[urname]" value="">
// <div id="loginform-urname" key="testKey" role="radiogroup" aria-required="true">
// <div class="radio"><label><input type="radio" name="LoginForm[urname]" value="0"> a</label></div>
// <div class="radio"><label><input type="radio" name="LoginForm[urname]" value="1"> b</label></div>
// <div class="radio"><label><input type="radio" name="LoginForm[urname]" value="2"> c</la
bel></div>
// </div>
// <p class="help-block help-block-error"></p>
// </div>
'tag'=>'h3',
// 未选择是默认提交的值
'unlect'=>'1',
// 如果设置了item选项，则忽略此选项
'encode'=>fal,
// 每个单选块之间的内容写的是什么字符串输出就什么字符串，建议如⽆特殊情况请忽视该字段
// 'parator'=>',',
popular/
/ 定义在每个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 lect下拉列表系列
<?php $form=ActiveForm::begin(['id'=>'login','class'=>'login'])?>
<!--
dropDownList⽅法
下拉列表
-->
<?= $form->field($model, 'urname')->dropDownList([
// ⼆维数组直接回报上组标签
'test'=>[
'1'=>'篮球',
'2'=>'⾜球',
一致英文
]
,
'3'=>'游戏',
'4'=>'读书'
],[
// 设置下拉列表的默认请选择选项
'prompt'=>[
'text' => '请选择',
'options' => ['value' => 'none', 'class' => 'prompt', 'label' => 'Select']
],
'encode'=>fal,
// 对lect 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, 'urname',[
'template'=>'<h2>test</h2> {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, 'urname')->widget('WidgetClassName', [ // configure additional widget properties here ]) ?> <?php ActiveForm::end();?>以上是这段时间使⽤的⼀篇⼩总结如有⽤法错误敬请指点
