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设置为h3
// 则 <div id="loginform-username" key="testKey" role="radiogroup" aria-required="true">
// => 转为 <h3 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'=>'h3',
// 未选择是默认提交的值
'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设置为h3
// 则 <div id="loginform-username" key="testKey" role="radiogroup" aria-required="true">
// => 转为 <h3 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'=>'h3',
// 未选择是默认提交的值
'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'=>'<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, 'username')->widget('WidgetClassName', [ // configure additional widget properties here ]) ?> <?php ActiveForm::end();?>
以上是这段时间使用的一篇小总结 如有用法错误敬请指点
yii2之ActiveForm表单使用的更多相关文章
- yii2 创建ActiveForm(表单)
表单的生成表单中的方法 ActiveForm::begin()方法 ActiveForm::end()方法 getClientOptions()方法 其它方法:errorSum ...
- yii2.0 Activeform表单部分组件使用方法
文本框:textInput(); 密码框:passwordInput(); 单选框:radio(),radioList(); 复选框:checkbox(),checkboxList(); 下拉框:dr ...
- yii2.0 Activeform表单部分组件使用方法 [ 2.0 版本 ]
文本框:textInput(); 密码框:passwordInput(); 单选框:radio(),radioList(); 复选框:checkbox(),checkboxList(); 下拉框:dr ...
- yii2接收activeform表单信息
第一种方法: $model->load(Yii::$app->request->post()); 第二种方法: 获取具体的某一项的值 $demo = $_POST['模型名']['字 ...
- yii中调整ActiveForm表单样式
Yii2中对于表单和字段的支持组件为ActiveForm和ActiveField, <?php $form = ActiveForm::begin([ 'id' => 'login-for ...
- YII2.0使用ActiveForm表单(转)
Controller控制器层代码 <?php namespace frontend\controllers; use frontend\models\UserForm; class UserCo ...
- Yii2 如何实现表单事件之 Ajax 提交
前言 Yii2 现在使用 JS 都必须要注册代码了. 要实现 Ajax 提交,有两种方法.一是直接在 ActiveForm 调用 beforeSubmit 参数,但是个人认为这样没有很好的把 JS 和 ...
- Yii2中自定义表单样式
use yii\widgets\ActiveForm; <?php $form = ActiveForm::begin([ 'options' => ['class' => 'for ...
- yii2自动生成表单
视图中: 1.要use的两个文件类 use yii\helpers\Html; use yii\widgets\ActiveForm; 2.生成表单,以添加商品为例说明.注意红线区域:上传文件需要 ...
随机推荐
- C++11新特性——The C++ standard library, 2nd Edition 笔记(一)
前言 这是我阅读<The C++ standard library, 2nd Edition>所做读书笔记的第一篇.这个系列基本上会以一章一篇的节奏来写,少数以C++03为主的章节会和其它 ...
- 100 floors 2 eggs
https://github.com/Premiumlab/Python-for-Algorithms--Data-Structures--and-Interviews/blob/master/Moc ...
- 2018.10.14 loj#516. DP 一般看规律(启发式合并)
传送门 注意到一种颜色改了之后就不能改回去了. 因此可以启发式合并. 每次把小的合并给大的. 这样每个数最多被合并logloglog次. 如果维护一棵比较下标的平衡树的话,对于答案有贡献的就是每个数与 ...
- Fiddler调式使用(一)深入研究[转载]
Fiddler调式使用(一)深入研究 阅读目录 Fiddler的基本概念 如何安装Fiddler 了解下Fiddler用户界面 理解不同图标和颜色的含义 web session的常用的快捷键 了解we ...
- Docker挂载宿主机目录
一.普通方式直接挂载 1.查看已有容器 docker ps 2.进入容器并挂载 docker run -it -v /root/work/docker:/root/hzbtest tomcat:7.0 ...
- Mac pro 安装IntelliJ IDEA 2017版
1.官网下载这个版本https://www.jetbrains.com 2.点击下载即可 3.下载好后放入本地 4.启动mac终端进行破解 输入命令:sudo vim /private/etc/hos ...
- codeforces 261B Maxim and Restaurant(概率DP)
B. Maxim and Restaurant time limit per test 2 seconds memory limit per test 256 megabytes input stan ...
- setTimeout问题
function fn(argu1){ alert(argu1); } setTimeout(fn, 1000, 12); setTimeout从第三个参数开始,之后的参数都是fn的.fn不用加(), ...
- Paul Simon -- Duncan
Paul Simon -- Duncan (London,January 1972) Couple in the next roomBound to win a prizeTheyve been go ...
- matlab toolboxes 大全
MATLAB Toolboxes top (Top) Audio - Astronomy - BiomedicalInformatics - Chemometrics - Chaos - Chemi ...