Yii2 ActiveForm使用方法及样式修改

2022-06-07 15:25:21 浏览数 (3)

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

代码语言:javascript复制
<?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}:错误提示信息

表单使用方法:

代码语言:javascript复制
//文本域
<?= $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]) ?>

0 人点赞