1.1 表單美化

1.1.1 需求

Yii 2默認的表單樣式如下（以login表單為例）：

美工設計的樣式如下：

1.1.2 Yii 2與Yii 1表單代碼比較

在Yii 2中，對表單的功能進行了增強，在大多數情況下，表單的樣式一般都是如上一節的圖片所示，在Yii 1中，不能夠整體上對表單的樣式進行配置，只能是每一行單獨設置，譬如：

<?php $form = $this->beginWidget('CActiveForm', array('id' => 'user-auth-form','enableAjaxValidation' => false,'htmlOptions' => array('enctype' => "multipart/form-data","class" => "form-horizontal","role" => "form"))); ?> <div class="row"><div class="col-md-2 nowrap">姓名</div><div class="col-md-10"><?php echo $form->textField($model, 'fname',array('maxlength' => 100, 'required' => true,"class" => "form-control")); ?></div> </div> <div class="row"><div class="col-md-2 nowrap">手機號</div><div class="col-md-10"><?php echo $form->textField($model, 'fphone',array('maxlength' => 100, 'required' => true,"class" => "form-control")); ?></div> </div> <?php $this->endWidget(); ?>

可以看出，需要為每一行設置柵格系統的參數，Yii的ActiveField只是負責輸出input控件，并沒有為簡化代碼做出什么貢獻，以至于后來我在用Yii 1做表單的時候，基本上不用ActiveField的方式輸出input，而是直接寫HTML代碼，覺得這樣還更簡單一些。

而到了Yii 2，表單的代碼變成如下：

<?php $form = ActiveForm::begin(['id' => 'login-form','layout' => 'horizontal','options' => ['class' => 'ldo-login-form',],'fieldConfig' => ['horizontalCssClasses' => ['label' => 'col-sm-3 col-md-2','wrapper' => 'col-sm-9 col-md-10','error' => 'text-left','offset' => 'col-sm-offset-3 col-md-offset-2',]], ]); ?> <?= $form->field($model, 'username')->textInput(['autofocus' => true]) ?> <?= $form->field($model, 'password')->passwordInput() ?> <?= $form->field($model, 'rememberMe')->checkbox() ?> <div class="form-group"><div class="col-sm-9 col-md-10 col-sm-offset-3 col-md-offset-2"><?= Html::submitButton('登錄', ['class' => 'btn btn-primary', 'name' => 'login-button']) ?></div> </div> <?php ActiveForm::end(); ?>

忽然發現表單代碼清爽很多，沒有了每一行外面的HTML包裝器，想輸出什么字段就直接放上一個ActiveField就好了。

1.1.3 Yii 2表單思路

用Yii 2實現表單，其基本思路是在ActiveForm::begin()中對整個表單的樣式進行統一的初始化，然后在表單區域使用ActiveField輸出想要的字段，同時可以在這里設置個別字段個性的顯示樣式。

1.1.4 Yii 2表單主要屬性

在上面的Yii 2表單中，最主要的是如下幾個屬性：

l layout

這個是用來設置整個表單的布局的，按照官方文檔的說明，可以取值為“default”、“horizontal”和“inline”，default和inline還沒時間研究，horizontal是水平布局，就是指每一個字段占據一行的方式（效果圖參見3.4.1）。

l fieldConfig

每個表單字段可以有Label、Input、Hint、Error、Offset等幾種控件，在這里為表單內所有字段配置共同的屬性，這樣就省下了Yii 1中每一行還要單獨配置這些控件的代碼。

l horizontalCssClasses

這個是配置水平布局時，每個表單字段各個控件的CSS類參數，只有在layout=horizontal時才會起作用。

l options

這個是為表單配置HTML屬性的。

使用上面的配置為表單字段配置CSS類，不會修改ActiveForm和ActiveField的默認類，譬如表單內的input控件，使用ActiveField創建出來的，都會帶上“control-label”類，而上面配置的Label類，不會覆蓋control-label，而是在原有值的基礎上添加，實際輸出的Label的類為“control-label col-sm-3 col-md-2”。

1.1.5 Yii 2表單字段的幾個概念

看下圖：

說明：

l label

是指input控件前的標簽文字；

l wrapper

Yii在input控件外面會包一個div，這個div就叫做wrapper；

l error

對字段進行校驗，所顯示的錯誤信息

l offset

如果input控件前面沒有label，則為了保持與其它input控件對其，前面的空白區域就叫做offset；

l hint

這個暫時還沒有搞出來；

1.1.6 Yii 2表單按鈕處理

Yii 2對表單字段的處理很好，但是對于表單的按鈕，就沒有這么好了，還是需要按照Yii 1的方式，單獨輸出按鈕，并且在按鈕外面自己包上容器：

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

這樣，最終的效果圖如下：

現在表單樣式基本美化完畢，但是還是可以看到Label和錯誤提示都不是中文，需要進行處理，這個在下一節進行說明。

1.1.7 修改hint位置

默認表單模板的顯示效果如下：

hint的位置在input的后面，看起來視覺效果不好，我們希望做到下面這樣的效果：

即提示信息在輸入框的下面，這樣看起來一目了然，要達到這樣的效果，只需要修改ActiveForm的template參數即可：

<?php $form = ActiveForm::begin(['id' => 'form','layout' => 'horizontal','options' => ['class' => '',],'action' => 'saveDeviceSn.html','fieldConfig' => ['template' => '{label}{beginWrapper}{input}{hint}{error}{endWrapper}','horizontalCssClasses' => ['label' => 'col-sm-2 col-md-1','wrapper' => 'col-sm-6 col-md-5','error' => 'text-left','offset' => 'col-sm-offset-2 col-md-offset-2','hint' => '',]], ]); ?>

主要是使用“{beginWrapper}”和“{endWrapper}”這兩個標簽，將input、hint和error區域包含在一個div里，同時要將hint參數設置為空，避免默認的顯示類影響顯示效果。

轉載于:https://www.cnblogs.com/tywali/p/6545623.html

總結

以上是生活随笔為你收集整理的Yii2 —— 表单美化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。