成都网站建设设计

将想法与焦点和您一起共享

yii2的ActiveForm表单怎么用-创新互联

小编给大家分享一下yii2的ActiveForm表单怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

为贡井等地区用户提供了全套网页设计制作服务,及贡井网站建设行业解决方案。主营业务为网站制作、成都做网站、贡井网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

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

使用场景尽量为表单

基础注册调用小组件



  //首先注册activeForm小部件,并赋值给$form(php中的声明变量方法用$ 等价于js中的var let)
  //begin 标志小部件开始
   'login-form', //声明小部件的id 即form的id
     //声明需要添加的属性 ,例如class , data-x等
      'options' => ['class' => 'form-horizontal'],
  ]) ?>

    //注册完小部件后可以在 activeForm小部件声明块中调用小部件的方法
      field($model, 'password')->passwordInput() ?>

//::end标识小部件结束

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

  自定义input框:input();

  文本框:textInput();

  密码框:passwordInput();

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

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

  下拉框:dropDownList();

  多选列表:listBox();

  隐藏域:hiddenInput();

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

  文件上传:fileInput();

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

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

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

'login','class'=>'login'])?>
    
    
    
    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'
    ]) ?>

    
    field($model, 'username')->input(
        // input内只允许放置两个参数即[type ,options]
        'email',//该处为指定type="xxxx"的input类型
        ['class'=>'tests','value'=>'值']//可在内部定义任何属性
    ) ?>
                       

2.2 radio 单选框系列

'login','class'=>'login'])?>

    
    field($model, 'username')->radio([
        // 隐藏域中的值
        'uncheck' =>'test1',
        // 定义lebal的内容
        'label' =>'test',
        // label上的任意属性
        'labelOptions'=>[
            'gs'=>'test'
        ]
    ],false)?>

    

    field($model, 'username')->radioList([
        '0'=>'a',
        '1'=>'b',
        '2'=>'c'
    ],[
        // tag声改变 class="radio"的父级标签 若tag设置为h4 
        //    则 
// => 转为

//
// // //
//
//
//
//
//

//
'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多选框系列

'login','class'=>'login'])?>

    
    field($model, 'username')->checkbox([
        // 隐藏域中的值
        'uncheck' =>'test1',
        // 定义lebal的内容
        'label' =>'test',
        // label上的任意属性
        'labelOptions'=>[
            'gs'=>'test'
        ]
    ],true)?>

    
     field($model, 'username')->checkboxList([
        '1'=>'篮球',
        '2'=>'足球',
        '3'=>'游戏',
        '4'=>'读书'
    ],[
         // tag声改变 class="radio"的父级标签 若tag设置为h4 
        //    则 
// => 转为

//
// // //
//
//
//
//
//

//
'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有规定属性之外还可自定义任意属性 且上述属性均不是必填 ])?>

2.4 select下拉列表系列

'login','class'=>'login'])?>

    
     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有规定属性之外还可自定义任意属性  且上述属性均不是必填
    ])?>

    

        
                       

2.5 widget 小部件

'login','class'=>'login'])?>

    
    field($model, 'username',[
        'template'=>'

test

{label} {input} {error}' ])->widget(\yii\widgets\MaskedInput::className(), [ // 指定input类型 // 'type'=>'time', // 指定必须输入的类型 'mask' => '999-9999-9999', 'options'=>['class' => 'form-control test'] ]); ?> field($model, 'verifyCode')->widget(Captcha::className(), [ 'captchaAction' => 'login/captcha', 'options' => [ 'class' => 'two', 'id'=>'two', 'placeholder' => '请输入验证码', ], 'template' => '{input}{image}', 'imageOptions' => [ 'alt' => 'images', ] ])?>   --------------------- 最后一个并未实测 ------------------------------- field($model, 'username')->widget('WidgetClassName', [ // configure additional widget properties here ]) ?>

以上是yii2的ActiveForm表单怎么用的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


分享文章:yii2的ActiveForm表单怎么用-创新互联
文章网址:http://chengdu.cdxwcx.cn/article/cogdej.html