閱讀(46.1k) 書簽贊(0) 我要糾錯

創(chuàng)建表單（Creating Forms）

2018-02-24 15:40 更新

創(chuàng)建表單

在 Yii 中使用表單的主要方式是通過 yii\widgets\ActiveForm。如果是基于模型的表單應(yīng)首選這種方式。此外，在 yii\helpers\Html 中也有一些實用的方法用于添加按鈕和幫助文本。

在客戶端上顯示的表單，大多數(shù)情況下有一個相應(yīng)的模型，用來驗證其輸入的服務(wù)器數(shù)據(jù) (可在?輸入驗證?一節(jié)獲取關(guān)于驗證的細(xì)節(jié))。當(dāng)創(chuàng)建基于模型的表單時，第一步是定義模型本身。該模式可以是一個基于活動記錄的類，表示數(shù)據(jù)庫中的數(shù)據(jù)，也可以是一個基于通用模型的類（繼承自 yii\base\Model ），來獲取任意的輸入數(shù)據(jù)，如登錄表單。在下面的例子中，我們展示了一個用來做登錄表單的通用模型：

<?php

class LoginForm extends \yii\base\Model
{
    public $username;
    public $password;

    public function rules()
    {
        return [
            // 在這里定義驗證規(guī)則
        ];
    }
}

在控制器中，我們將傳遞一個模型的實例到視圖，其中 yii\widgets\ActiveForm 小部件用來顯示表單：

<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;

$form = ActiveForm::begin([
    'id' => 'login-form',
    'options' => ['class' => 'form-horizontal'],
]) ?>
    <?= $form->field($model, 'username') ?>
    <?= $form->field($model, 'password')->passwordInput() ?>

    <div class="form-group">
        <div class="col-lg-offset-1 col-lg-11">
            <?= Html::submitButton('Login', ['class' => 'btn btn-primary']) ?>
        </div>
    </div>
<?php ActiveForm::end() ?>

在上面的代碼中，yii\widgets\ActiveForm::begin() 不僅創(chuàng)建了一個表單實例，同時也標(biāo)志著表單的開始。放在 yii\widgets\ActiveForm::begin() 與 yii\widgets\ActiveForm::end() 之間的所有內(nèi)容都被包裹在 HTML 的?<form>?標(biāo)簽中。與任何小部件一樣，你可以指定一些選項，通過傳遞數(shù)組到?begin?方法中來配置該小部件。在這種情況下，一個額外的 CSS 類和 ID 會在<form>?標(biāo)簽中使用。要查看所有可用的選項，請參閱 API 文檔的 yii\widgets\ActiveForm。

為了在表單中創(chuàng)建表單元素與元素的標(biāo)簽，以及任何適用的 JavaScript 驗證，yii\widgets\ActiveForm::field() 方法在調(diào)用時，會返回一個 yii\widgets\ActiveField 的實例。直接輸出該方法時，結(jié)果是一個普通的（文本）輸入。要自定義輸出，可以附加上 yii\widgets\ActiveField 的其它方法來一起調(diào)用：

// 一個密碼輸入框
<?= $form->field($model, 'password')->passwordInput() ?>
// 增加一個提示標(biāo)簽
<?= $form->field($model, 'username')->textInput()->hint('Please enter your name')->label('Name') ?>
// 創(chuàng)建一個 HTML5 郵箱輸入框
<?= $form->field($model, 'email')->input('email') ?>

它會通過在 yii\widgets\ActiveField::$template 中定義的表單字段來創(chuàng)建?<label>，<input>?以及其它的標(biāo)簽。 input 輸入框的 name 屬性會自動地根據(jù) yii\base\Model::formName() 以及屬性名來創(chuàng)建。例如，對于在上面的例子中?username?輸入字段的 name 屬性將是?LoginForm[username]。這種命名規(guī)則使所有屬性的數(shù)組的登錄表單在服務(wù)器端的?$_POST['LoginForm']?數(shù)組中是可用的。

指定模型的屬性可以以更復(fù)雜的方式來完成。例如，當(dāng)上傳時，多個文件或選擇多個項目的屬性，可能需要一個數(shù)組值，你可以通過附加?[]?來指定它的屬性名稱：

// 允許多個文件被上傳：
echo $form->field($model, 'uploadFile[]')->fileInput(['multiple'=>'multiple']);

// 允許進(jìn)行選擇多個項目：
echo $form->field($model, 'items[]')->checkboxList(['a' => 'Item A', 'b' => 'Item B', 'c' => 'Item C']);

命名表單元素，如提交按鈕時要小心。在?jQuery 文檔?中有一些保留的名稱，可能會導(dǎo)致沖突：

表單和它們的子元素不應(yīng)該使用與表單的屬性沖突的 input name 或 id，例如?submit，length，或者?method。要檢查你的標(biāo)簽是否存在這些問題，一個完整的規(guī)則列表詳見?DOMLint。

額外的 HTML 標(biāo)簽可以使用純 HTML 或者 yii\helpers\Html-輔助類中的方法來添加到表單中，就如上面例子中的 yii\helpers\Html::submitButton()。

提示: 如果你正在你的應(yīng)用程序中使用 Twitter Bootstrap CSS 你可以使用yii\bootstrap\ActiveForm 來代替 yii\widgets\ActiveForm。前者繼承自后者并在生成表單字段時使用 Bootstrap 特有的樣式。

提示：為了設(shè)計帶星號的表單字段，你可以使用下面的 CSS：
div.required label:after {
    content: " *";
    color: red;
}

創(chuàng)建下拉列表

可以使用 ActiveForm 的?[dropDownList()](http://www.yiiframework.com/doc-2.0/yii-widgets-activefield.html#dropDownList()-detail)?方法來創(chuàng)建一個下拉列表：

use app\models\ProductCategory;
use yii\helpers\ArrayHelper;

/* @var $this yii\web\View */
/* @var $form yii\widgets\ActiveForm */
/* @var $model app\models\Product */

echo $form->field($model, 'product_category')->dropdownList(
    ProductCategory::find()->select(['category_name', 'id'])->indexBy('id')->column(),
    ['prompt'=>'Select Category']
);

模型字段的值將被自動預(yù)先選定。

創(chuàng)建表單（Creating Forms）

創(chuàng)建表單

創(chuàng)建下拉列表

延伸閱讀