Yii2 ActiveForm使用方法及样式修改

Petrochor

发布于 2022-06-07 15:25:21

8320

发布于 2022-06-07 15:25:21

文章被收录于专栏：StephenStephen

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017-09-28 ，如有侵权请联系 cloudcommunity@tencent.com 删除

bootstrap