yii2的ActiveForm表单使用的方法介绍

夜芳君_8672

夜芳君_8672

2019-04-12

4337人浏览

转载

本篇文章给大家带来的内容是关于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',]); ?>

公文宝
公文宝

一款AI工具,主要用于AI公文写作神器,一键生成合规材料,适合需要提升相关任务效率的用户。

下载

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> 
        //    => 转为 <h3>
        // <div>
        //     <label>Username</label>
        //     <input>
        //     <div>
        //         <div><label><input> a</label></div>
        //         <div><label><input> b</label></div>
        //         <div><label><input> c</label></div>
        //     </div>

        //     <p></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有规定属性之外还可自定义任意属性  且上述属性均不是必填
    ])?></h3>
<p></p>
<p>2.3 checkbox多选框系列</p>
<pre class="brush:php;toolbar:false"><?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> 
        //    => 转为 <h3>
        // <div>
        //     <label>Username</label>
        //     <input>
        //     <div>
        //         <div><label><input> a</label></div>
        //         <div><label><input> b</label></div>
        //         <div><label><input> c</label></div>
        //     </div>

        //     <p></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();?>
</h3>
<p></p>
<p>2.4 select下拉列表系列</p>
<pre class="brush:php;toolbar:false"><?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();?>

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

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

yii2

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

2023.06.20

4756

8

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

2023.07.28

1415

5

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.03

1858

5

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

2023.08.17

10303

11

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

2023.09.01

1020

4

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.04

2984

5

Js中concat和push的区别
Js中concat和push的区别

Js中concat和push的区别:1、concat用于将两个或多个数组合并成一个新数组,并返回这个新数组,而push用于向数组的末尾添加一个或多个元素,并返回修改后的数组的新长度;2、concat不会修改原始数组,是创建新的数组,而push会修改原数组,将新元素添加到原数组的末尾等等。本专题为大家提供concat和push相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.14

1629

5

js截取字符串的方法介绍
js截取字符串的方法介绍

JavaScript字符串截取方法,包括substring、slice、substr、charAt和split方法。这些方法可以根据具体需求,灵活地截取字符串的不同部分。在实际开发中,根据具体情况选择合适的方法进行字符串截取,能够提高代码的效率和可读性 。

2023.09.21

5149

3

js生成随机数方法
js生成随机数方法

JavaScript生成随机数的方法,包括使用Math.random()方法生成指定范围内的随机整数、生成随机字符串和生成随机颜色。根据具体需求,可以选择适合的方法来生成随机数,以实现各种功能 。

2023.09.25

2995

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Yii2中文手册
Yii2中文手册

共0课时 | 0.6万人学习

thinkphp基础介绍和yii2基础介绍
thinkphp基础介绍和yii2基础介绍

共10课时 | 2.6万人学习

Yii2框架基础视频教程
Yii2框架基础视频教程

共22课时 | 2.9万人学习