Yii2.0-ActiveForm 表单组件

最新推荐文章于 2023-07-03 09:23:36 发布

u012600104

最新推荐文章于 2023-07-03 09:23:36 发布

阅读量748

点赞数

分类专栏： Yii2.0

本文链接：https://blog.csdn.net/u012600104/article/details/80500368

版权

Yii2.0 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

视图(view)

首先在模板头部引入ActiveForm和Html这里两个是很重要的

<?php
use yii\bootstrap\ActiveForm;
use yii\helpers\Html;
?>

文本框: textInput();
密码框: passwordInput();
单选框: radio() , radioList();
复选框: checkbox() , checkboxList();
下拉框: dropDownList();
隐藏域: hiddenInput();
文本域: textarea(['rows'=>3]);
文件上传:fileInput();
提交按钮:submitButton();
重置按钮:resetButtun();

form 头部设置

<?php $form = ActiveForm::begin([
        // 传值类型
        'method' => 'post', 
        // 默认不写,提交到当前控制器方法,但也可以这么设置
        'action' => \yii\helpers\Url::to(['user/index']), 
        // 设置form的样式
        'options' => [  
            // 上传文件设置 注意:与post方法配套使用
            'enctype' => 'multipart/form-data',  
            // 设置form的class
            'class' => 'form-horizontal',    
        ],
        // 为每一个input 设置
        'fieldConfig' => [  
            // template是布局标签  是对input标签的重新部署
            'template' => "{label}\n<div class=\"col-lg-5\">{input}</div>\n<div class=\"col-lg-5\">{error}</div>", 
            // 设置label 的属性 添加class
            'labelOptions' => ['class' => 'col-lg-2 control-label'],    
        ],
    ]); ?>

text 标签

    <?= $form->field($model, 'username')->textInput([
        'maxlength' => 20,  // 最多输入20个字符
        'minlength' => 6,   // 最少输入6个字符
        'placeholder' => '输入框描述信息',
    ]) ?>

在模板中解析后会附带一些布局样式变成

<div class="form-group field-admin-adminemail">
<p class="help-block help-block-error"></p>
<input maxlength =20 minlength=6 class="span12" name="Admin[username]" placeholder="输入框描述信息" type="text">
</div>

密码输入框

    <?= $form->field($model, 'password')->passwordInput(['maxlength' => 20]) ?>

在模板中解析后的input变成

<input type="password" name="password" maxlength =20 />

单选框

<?= $form->field($model, 'sex')->radioList(['1' => '男', '0' => '女']) ?>

会根据sex的默认值来选择默认选项变成

<div id="admin-sex">
<div class="radio"><label><input name="Admin[sex]" value="1" checked="" type="radio"> 男</label</div>
<div class="radio"><label><input name="Admin[sex]" value="0" type="radio"> 女</label></div></div>

下拉列表

   <?php echo  $form->field($model, 'edu')->dropDownList(['1' => '大学', '2' => '高中', '3' => '初中'], ['prompt' => '请选择', 'style' => 'width:120px']) ?>

在模板中解析后变成

<div class="form-group field-admin-edu">
<p class="help-block help-block-error"></p>
<select id="admin-edu" class="form-control" name="Admin[edu]" style="width:120px">
<option value="">请选择</option>
<option value="1" selected="">大学</option>
<option value="2">高中</option>
<option value="3">初中</option>
</select>
</div>

文件上传

 <?php echo $form->field($model, 'file')->fileInput() ?>

在模板解析后变成

<div class="form-group field-admin-sex">
<p class="help-block help-block-error"></p>
<input name="Admin[file]" value="" type="hidden">
<input id="admin-file" name="Admin[file]" value="1" type="file">
</div>

复选框

<?php echo  $form->field($model, 'hobby')->checkboxList(['0' => '篮球', '1' => '足球', '2' => '羽毛球', '3' => '乒乓球']) ?>

在模板中解析后变成

<div class="form-group field-admin-sex">
<p class="help-block help-block-error"></p>
<input name="Admin[hobby]" value="" type="hidden">
<div id="admin-hobby">
<div class="checkbox"><label><input name="Admin[hobby][]" value="0" type="checkbox"> 篮球</label></div>
<div class="checkbox"><label><input name="Admin[hobby][]" value="1" checked="" type="checkbox"> 足球</label></div>
<div class="checkbox"><label><input name="Admin[hobby][]" value="2" type="checkbox"> 羽毛球</label></div>
<div class="checkbox"><label><input name="Admin[hobby][]" value="3" type="checkbox"> 乒乓球</label></div>
</div>
</div>

复选框2
有点想单选因为只有0和1两个值，但是可以手动添加多个重复选择

    <?php echo  $form->field($model, 'basketball')->checkbox(); ?>
    <?php echo  $form->field($model, 'football')->checkbox(); ?>

在模板中解析后变成

<div class="checkbox">
<label for="admin-basketball">
<input name="Admin[basketball]" value="0" type="hidden"><input id="admin-basketball" name="Admin[hobby]" value="1" checked="" type="checkbox">
basketball
</label>
<p class="help-block help-block-error"></p>
</div>

<div class="checkbox">
<label for="admin-football">
<input name="Admin[football]" value="0" type="hidden"><input id="admin-football" name="Admin[football]" value="1" checked="" type="checkbox">
football
</label>
<p class="help-block help-block-error"></p>
</div>

文本域

<?php
 echo  $form->field($model, 'sex', [
       // 可以自定义,并会覆盖掉form中设置的属性
       'template' => '<div class="form-group">{label}<div class="col-lg-6">{input}</div>{error}</div>',
        'labelOptions' => ['class' => 'col-lg-2 control-label'],
        ])->textarea([
               'rows' => 4,    // 可输入多少行
               'placeholder' => '输入框描述内容'
 ]) ?>

在模板中解析后变成

<div class="form-group field-admin-info">
<div class="form-group">
<label class="col-lg-2 control-label" for="admin-info">info</label>
<div class="col-lg-6">
<textarea id="admin-info" class="form-control" name="Admin[info]" rows="4" placeholder="输入框描述内容">1</textarea>
</div>
<p class="help-block help-block-error"></p>
</div>
</div>

隐藏输入域

<?php echo   $form->field($model, 'text')->hiddenInput(['value' => 1]) ?>

在模板中解析后 input 变成

<input id="admin-text" class="form-control" name="Admin[text]" value="1" type="hidden" />

表单提交按钮
提示：标签中可以使用三木运算符来改变文字样式
如：$model->isadd ? ‘添加’ : ‘修改’

?php echo  Html::submitButton($model->isadd ? '添加' : '修改', ['class' => $model->isadd  ? 'btn btn-primary' : '  btn-glow primary login']); ?>

在模板中解析后变成

<button type="submit" class="btn btn-primary">添加</button>
或
<button type="submit" class="btn-glow primary login">修改</button>

表单重置按钮

<?php echo  Html::resetButton('重置', ['class' => 'btn btn-info']) ?>

在模板中解析后变成

<button type="reset" class="btn btn-info">重置</button>

dropDownList 与 checkboxList遍历

// 控制器引入ArrayHelper

  use yii\helpers\ArrayHelper;

方法中

    //从数据库取出数据
    $Admin= Admin::find()->all(); 

    $dataList = ArrayHelper::map($Admin, 'id', 'name');
   //$dataList 就变成 Array ( [0] => 张三 [1] => 李四 [2] => 王五 )

模板中

    <?php echo  $form->field($model, 'sex')->radioList($dataList) ?>
    <?php echo  $form->field($model, 'edu')->dropDownList($dataList, ['prompt' => '请选择', 'style' => 'width:120px']) ?>

checkBoxList 自定义样式

方法一

<?php $model->test=($model->test)?:[1,2,3]?>


<?= $form->field($model, 'test',
[
    'options'=>['class' => 'form-group form-md-checkboxes'],
    'template' => '{label}<div class="col-md-9 md-checkbox-inline">{input}</div>{hint}{error}', 
]
)->checkBoxList($model->test(),
[
    'item' => function($index, $label, $name, $checked, $value) {
       //$index    数组键名
       //$label    标签名
       //$name     设置checkbox的name
       //$checked  默认选择
       //$value    值
        $checked=$checked?"checked":"";
        $return = '<div class="md-checkbox">';
        $return .= '<input type="checkbox" id="' . $name . $value . '" name="' . $name . '" value="' . $value . '" class="md-checkbox" '.$checked.'>';
        $return .= '<label for="' . $name . $value . '"><span></span><span class="check"></span><span class="box"></span>' . ucwords($label) . '</label>';
        $return .= '</div>';
        return $return;
    }
]) ?>

方法二
item : 在生成每个checkbox表单的时候,都会回调这个函数,如果设置了则使用返回值作为checkbox的表单，否则使用static::checkbox函数来生成每个checkbox表单，函数格式为： function ($index,$label, $name, $checked, $value)

<?php $model->test=($model->test)?:[1,2,3]?>

<?= Html::checkboxList('children', [], $model->test, ['class' => 'col-lg-5', 
                            'item' => function ($index, $label, $name, $checked, $value) {
                             //$index    数组键名
                             //$label    标签名
                             //$name     设置checkbox的name
                             //$checked  默认选择
                             //$value    值
                            $checkStr = $checked ? "checked" : "";
                            return '<label><input type="checkbox" style="margin:10px" name="' . $name . '" value="' . $value . '" ' . $checkStr . ' class="class' . $index . '" data-uid="user' . $index . '">' . $label . '</label>';
                        }]); ?>

方法三
最简单

<?php $model->sex=($model->test)?:[1,2,3]?>


<?= Html::checkboxList('children', [], $model->test, ['class' => 'col-lg-5','itemOptions'=>array('style'=>'margin:10px')]); ?>

u012600104

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Yii2.0-ActiveForm 表单组件

视图(view)首先在模板头部引入ActiveForm和Html这里两个是很重要的&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;?phpuse yii\bootstrap\ActiveForm;use yii\helpers\Html;?&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;文本框: textInput(); 密码框: passwordInput(); 单选框: radio() , radi
复制链接

扫一扫

专栏目录