\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]) ?>