Yii Framework 教程（7）：使用 CHtml 建立表單

在開發 Yii 應用程式的視圖時，我們可以直接撰寫 HTML 來構建頁面，但 Yii 也提供了數個輔助類別來簡化視圖編寫。例如，建立文字輸入欄位可呼叫 CHtml::textField()，建立下拉選單則使用 CHtml::dropDownList()。前面 Hangman 範例中的幾個視圖就是透過 CHtml 來建立的。

為什麼要使用輔助類別？

你可能會想，如果輔助類別所需的代碼量與直接寫 HTML 差不多，有什麼好處？答案是輔助類別能提供 HTML 代碼無法提供的額外功能。例如，下列代碼會產生一個文字輸入欄位，當使用者修改其值時自動觸發表單提交：

CHtml::textField($name, $value, array('submit' => ''));

若不使用輔助類別，你就得寫一大段 JavaScript 才能達成相同效果。

Hangman 範例中的 play 視圖回顧

<p>This is the game of Hangman. You must guess a word, a letter at a time. If you make too many mistakes, you lose the game!</p>
<?php echo CHtml::beginForm(); ?>
<?php echo CHtml::radioButtonList('level', null, $levels); ?>
<br/>
<?php echo CHtml::submitButton('Play!'); ?>
<?php if($error): ?>
<span style="color:red">You must choose a difficulty level!</span>
<?php endif; ?>
<?php echo CHtml::endForm(); ?>

表單的基本結構

使用 CHtml 建構頁面總是以 CHtml::beginForm() 開始，以 CHtml::endForm() 結束。這兩個方法分別產生表單的起始與結束標籤。

常見 UI 元件對應方法

對於 HTML 表單支援的 UI 元件（如 button、radioButton、checkbox 等），CHtml 類別都提供了對應方法，例如上例中的 radioButtonList 和 submitButton。

Active 系列方法

除了 radioButtonList 等方法，CHtml 還提供一組 activeXXX 方法（如 activeRadioButtonList），這些方法需搭配 CFormModel 使用。Hangman 範例未額外使用 Model，故未採用 activeRadioButtonList，將在後續介紹 MVC 中的 Model 時說明。

參考資源

CHtml 支援的所有 UI 元件請參考 Yii 類別參考文件：https://www.yiiframework.com/doc/api/1.1/CHtml

CActiveForm 簡介

自 1.1.1 版起，Yii 提供了新的小物件 CActiveForm（API 文件）以簡化表單建立。它能同時提供客戶端與伺服器端無縫、一致的驗證功能，將在後續介紹 UI 元件時一併說明。