# 創建表單 在 Yii 中使用表單的主要方式是通過 yii\widgets\ActiveForm。如果是基于模型的表單應首選這種方式。此外，在 yii\helpers\Html 中也有一些實用的方法用于添加按鈕和幫助文本。 在客戶端上顯示的表單，大多數情況下有一個相應的[模型](http://www.yiichina.com/doc/guide/2.0/structure-models)，用來驗證其輸入的服務器數據 (可在?[輸入驗證](http://www.yiichina.com/doc/guide/2.0/input-validation)?一節獲取關于驗證的細節)。 當創建基于模型的表單時，第一步是定義模型本身。該模式可以是一個基于[活動記錄](http://www.yiichina.com/doc/guide/2.0/db-active-record)的類，表示數據庫中的數據， 也可以是一個基于通用模型的類（繼承自 yii\base\Model ），來獲取任意的輸入數據，如登錄表單。 在下面的例子中，我們展示了一個用來做登錄表單的通用模型： ~~~ <?php class LoginForm extends \yii\base\Model { public $username; public $password; public function rules() { return [ // 在這里定義驗證規則 ]; } } ~~~ 在控制器中，我們將傳遞一個模型的實例到視圖，其中 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() 不僅創建了一個表單實例，同時也標志著表單的開始。 放在 yii\widgets\ActiveForm::begin() 與 yii\widgets\ActiveForm::end() 之間的所有內容都被包裹在 HTML 的?`<form>`?標簽中。 與任何小部件一樣，你可以指定一些選項，通過傳遞數組到?`begin`?方法中來配置該小部件。在這種情況下， 一個額外的 CSS 類和 ID 會在`<form>`?標簽中使用。要查看所有可用的選項，請參閱 API 文檔的 yii\widgets\ActiveForm。 為了在表單中創建表單元素與元素的標簽，以及任何適用的 JavaScript 驗證，yii\widgets\ActiveForm::field() 方法在調用時，會返回一個 yii\widgets\ActiveField 的實例。 直接輸出該方法時，結果是一個普通的（文本）輸入。要自定義輸出，可以附加上 yii\widgets\ActiveField 的其它方法來一起調用： ~~~ // 一個密碼輸入框 <?= $form->field($model, 'password')->passwordInput() ?> // 增加一個提示標簽 <?= $form->field($model, 'username')->textInput()->hint('Please enter your name')->label('Name') ?> // 創建一個 HTML5 郵箱輸入框 <?= $form->field($model, 'email')->input('email') ?> ~~~ 它會通過在 yii\widgets\ActiveField::$template 中定義的表單字段來創建?`<label>`，`<input>`?以及其它的標簽。 input 輸入框的 name 屬性會自動地根據 yii\base\Model::formName() 以及屬性名來創建。 例如，對于在上面的例子中?`username`?輸入字段的 name 屬性將是?`LoginForm[username]`。 這種命名規則使所有屬性的數組的登錄表單在服務器端的?`$_POST['LoginForm']`?數組中是可用的。 指定模型的屬性可以以更復雜的方式來完成。例如，當上傳時，多個文件或選擇多個項目的屬性，可能需要一個數組值， 你可以通過附加?`[]`?來指定它的屬性名稱： ~~~ // 允許多個文件被上傳： echo $form->field($model, 'uploadFile[]')->fileInput(['multiple'=>'multiple']); // 允許進行選擇多個項目： echo $form->field($model, 'items[]')->checkboxList(['a' => 'Item A', 'b' => 'Item B', 'c' => 'Item C']); ~~~ 命名表單元素，如提交按鈕時要小心。在?[jQuery 文檔](https://api.jquery.com/submit/)?中有一些保留的名稱，可能會導致沖突： > 表單和它們的子元素不應該使用與表單的屬性沖突的 input name 或 id，例如?`submit`，`length`，或者?`method`。 要檢查你的標簽是否存在這些問題，一個完整的規則列表詳見?[DOMLint](http://kangax.github.io/domlint/)。 額外的 HTML 標簽可以使用純 HTML 或者 yii\helpers\Html-輔助類中的方法來添加到表單中，就如上面例子中的 yii\helpers\Html::submitButton()。 > 提示: 如果你正在你的應用程序中使用 Twitter Bootstrap CSS 你可以使用yii\bootstrap\ActiveForm 來代替 yii\widgets\ActiveForm。 前者繼承自后者并在生成表單字段時使用 Bootstrap 特有的樣式。 > 提示：為了設計帶星號的表單字段，你可以使用下面的 CSS： > > ~~~ > div.required label:after { > content: " *"; > color: red; > } > ~~~ ## 創建下拉列表 可以使用 ActiveForm 的?[dropDownList()](http://www.yiiframework.com/doc-2.0/yii-widgets-activefield.html#dropDownList()-detail)?方法來創建一個下拉列表： ~~~ 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'] ); ~~~ 模型字段的值將被自動預先選定。 ## 延伸閱讀 下一節?[輸入驗證](http://www.yiichina.com/doc/guide/2.0/input-validation)?處理提交的表單數據的服務器端驗證，以及 ajax- 和客戶端驗證。 要學會有關表格的更復雜的用法，你可以查看以下幾節： * [收集列表輸入](http://www.yiichina.com/doc/guide/2.0/input-tabular-input)?同一種類型的多個模型的采集數據。 * [多模型同時輸入](http://www.yiichina.com/doc/guide/2.0/input-multiple-models)?在同一窗口中處理多個不同的模型。 * [文件上傳](http://www.yiichina.com/doc/guide/2.0/input-file-upload)?如何使用表格來上傳文件。