Yii2 ActiveForm使用方法及样式修改

发布日期: 2017-09-28 21:26:57 作者: Stephen 评论: 0

\yii\widgets\ActiveForm类提供了Bootstrap3的表单域,但在Yii2默认表单控件中,它的样式就没有那么美观了,那我们怎么在不修改其表单方法下,修改表单的样式呢?我们可以在ActiveForm::begin中给他一个模板参数“template”,就可以直接修改了表单样式。

<?php
$form = ActiveForm::begin([
    'id' => 'msg-form',
    'options' => ['class'=>'form-horizontal'],
    'fieldConfig' => [
        'template' => "{label}\n<div class=\"col-lg-3\">{input}</div>\n<div class=\"col-lg-8\">{error}</div>",
        'labelOptions' => ['class' => 'col-lg-1 control-label'],
    ]
]);

这是基于Bootstrap3的网格系统设置的表单样式,具体样式请参考Bootstrap3手册,或者可以自己设置样式哦~~~

{label}:label标签

{input}:表单域,可能是文本域、下拉框

{error}:错误提示信息


表单使用方法:

//文本域
<?= $form->field($model, 'username')->textInput(['maxlength' => 20]) ?>

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

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

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

//文件上传
<?= $form->field($model, 'file')->fileInput() ?>

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

//多行文本域
<?= $form->field($model, 'info')->textarea(['rows'=>3]) ?>

//隐藏域
<?= $form->field($model, 'userid')->hiddenInput(['value'=>3]) ?>

快来抢沙发