?
This document uses PHP Chinese website manual Release
創(chuàng)建表單
創(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)顯示表單：
<?phpuse 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)志著表單的開(kāi)始。 放在 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ī)則列表詳見(jiàn)?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()?方法來(lái)創(chuàng)建一個(gè)下拉列表：
use app\models\ProductCategory;
use yii\helpers\ArrayHelper;
echo $form->field($model, 'product_category')->dropdownList(
ProductCategory::find()->select(['category_name', 'id'])->indexBy('id')->column(),
['prompt'=>'Select Category']
);
模型字段的值將被自動(dòng)預(yù)先選定。
延伸閱讀
下一節(jié)?輸入驗(yàn)證?處理提交的表單數(shù)據(jù)的服務(wù)器端驗(yàn)證，以及 ajax- 和客戶端驗(yàn)證。
要學(xué)會(huì)有關(guān)表格的更復(fù)雜的用法，你可以查看以下幾節(jié)：
- 收集列表輸入?同一種類型的多個(gè)模型的采集數(shù)據(jù)。
- 多模型同時(shí)輸入?在同一窗口中處理多個(gè)不同的模型。
- 文件上傳?如何使用表格來(lái)上傳文件。