Yii2.0-ActiveForm 表单组件

视图(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>

// 控制器引入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')]); ?>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值