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

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

2018-02-24 15:40 更新

創(chuàng)建表單

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

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

<?php

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

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

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

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

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

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

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

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

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

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

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

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

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

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

提示：為了設(shè)計(jì)帶星號(hào)的表單字段，你可以使用下面的 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)?方法來(lái)創(chuàng)建一個(gè)下拉列表：

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']
);

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

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

創(chuàng)建表單

創(chuàng)建下拉列表

延伸閱讀