使用ActiveForm小部件來定義表單代碼簡潔易讀,但是需要調(diào)整表單樣式的時候就沒有使用div布局那么直接明了,下面記錄一部分針對ActiveForm表單樣式調(diào)整的過程,方便以后使用. 后續(xù)會繼續(xù)補充.

1.在表單元素form中設(shè)置

<?php $form = ActiveForm::begin(['id' => 'login-form','options' => ['class'=>'form-horizontal'],'fieldConfig' => ['template' => "<div'>{label}</div><div>{input}</div><div class='col-lg-10 col-lg-offset-2'>{error}</div>",],'labelOptions' => ['class'=>'control-label col-lg-2' ],'inputOptions' => ['class'=>'col-lg-8'],]); ?><?php $form = ActiveForm::end() ?>

上面代碼ActiveForm::begin()中的配置信息:

• 'id'表示表單的id屬性;
• ?'options'為表單form元素的樣式,如果需要上傳文件的時候,還可以設(shè)置'encytype'=>'multipart/formdata';
• 'fieldConfig'統(tǒng)一修改字段模板, 'template'指定表單每個form-group中顯示的內(nèi)容.也可以在這里指定class或者設(shè)置行內(nèi)css樣式;
• 'labelOptions'添加label標(biāo)簽樣式
• 'inputOptions'添加輸入框input樣式

2.修改某個字段的樣式

設(shè)置checkbox樣式

<?= $form->field($model, 'rememberMe')->label('記住帳號')->checkbox(['template'=>"<div class='col-lg-4 col-lg-offset-2'>{input}{label}</div>",'lay-skin' => 'primary','title' => '記住密碼' ]) ?>

設(shè)置按鈕樣式

<div class="form-group"><?= Html::submitButton('登錄', ['class' => 'col-lg-10 btn btn-primary col-lg-offset-1', 'name' => 'login-button'])?> </div>

待續(xù)...

總結(jié)

以上是生活随笔為你收集整理的Yii2 ActiveForm修改表单样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。