HTML頁面 · October Cms 筆記

# HTML頁面 ### 介紹 October在`Html`外觀上提供了各種有用的功能，可用于處理HTML和表單。盡管大多數示例將使用PHP語言，但所有這些功能都可以通過簡單的轉換直接轉換為[Twig標記](https://octobercms.com/docs/markup)。 ~~~ // PHP <?= Form::open(..) ?> // Twig {{ form_open(...) }} ~~~ 如上所示，在Twig中，所有帶前綴的函數`form_`都將直接綁定到`Form`Facade，并使用*snake\_case*提供對方法的訪問。有關在前端使用表單助手的[更多信息](https://octobercms.com/docs/markup/function-form)，請參見[標記指南](https://octobercms.com/docs/markup/function-form)。 ### [](https://octobercms.com/docs/services/html#opening-a-form)開啟表格可以使用`Form::open`傳遞屬性數組作為第一個參數的方法打開表單： ~~~ <?= Form::open(['url' => 'foo/bar']) ?> // <?= Form::close() ?> ~~~ 默認情況下，`POST`將假定一個方法，但是，您可以自由指定另一個方法： ~~~ Form::open(['url' => 'foo/bar', 'method' => 'put']) ~~~ > **注意：**由于HTML表單僅支持`POST`和`GET`，`PUT`因此`DELETE`會通過自動向`_method`表單添加隱藏字段來欺騙方法。您也可以傳遞常規的HTML屬性： ~~~ Form::open(['url' => 'foo/bar', 'class' => 'pretty-form']) ~~~ 如果您的表單要接受文件上傳，`files`請在數組中添加一個選項： ~~~ Form::open(['url' => 'foo/bar', 'files' => true]) ~~~ 您還可以打開指向頁面或組件中的處理程序方法的表單： ~~~ Form::open(['request' => 'onSave']) ~~~ #### 啟用AJAX的表單同樣，可以使用以下`Form::ajax`方法打開啟用AJAX的表單，其中第一個參數是處理程序方法名稱： ~~~ Form::ajax('onSave') ~~~ 的第二個參數`Form::ajax`應包含以下屬性： ~~~ Form::ajax('onSave', ['confirm' => 'Are you sure?']) ~~~ 您還可以傳遞局部變量以將其更新為另一個數組： ~~~ Form::ajax('onSave', ['update' => [ 'control-panel' => '#controlPanel', 'layout/sidebar' => '#layoutSidebar' ] ]) ~~~ > **注意**：[AJAX框架](https://octobercms.com/docs/ajax/attributes-api)中的大多數[數據屬性](https://octobercms.com/docs/ajax/attributes-api)都可以通過刪除`data-request-`前綴來獲得。 ### [](https://octobercms.com/docs/services/html#form-tokens)表單令牌 #### CSRF保護如果[啟用了保護](https://octobercms.com/docs/setup/configuration#csrf-protection)，請將該`Form::open`方法與結合使用`POST`，`PUT`或`DELETE`將CSRF令牌作為隱藏字段自動添加到表單中。另外，如果您希望為隱藏的CSRF字段生成HTML，則可以使用以下`token`方法： ~~~ <?= Form::token() ?> ~~~ #### 延遲綁定會話密鑰用于[延遲綁定的](https://octobercms.com/docs/database/relations#deferred-binding)會話密鑰將作為隱藏字段添加到每種表單中。如果要手動生成此字段，可以使用以下`sessionKey`方法： ~~~ <?= Form::sessionKey() ?> ~~~ ### [](https://octobercms.com/docs/services/html#form-model-binding)表單模型綁定 #### 打開模型表格您可能要根據模型的內容填充表單。為此，請使用以下`Form::model`方法： ~~~ <?= Form::model($user, ['id' => 'userForm']) ?> ~~~ 現在，當您生成表單元素（如文本輸入）時，與字段名稱匹配的模型值將自動設置為字段值。因此，例如，對于名為的文本輸入`email`，將用戶模型的`email`屬性設置為值。如果會話閃存數據中有一項與輸入名稱匹配的項目，則該項目將優先于模型的值。優先級如下所示： 1. 會話閃存數據（舊輸入） 2. 顯式傳遞的值 3. 模型屬性數據 4. 現有回發值這使您可以快速構建不僅綁定到模型值的表單，而且如果服務器上存在驗證錯誤，還可以輕松地重新填充表單。您可以使用以下命令手動訪問這些值`Form::value`： ~~~ <input type="text" name="name" value="<?= Form::value('name') ?>" /> ~~~ 您可以將默認值作為第二個參數傳遞： ~~~ <?= Form::value('name', 'John Travolta') ?> ~~~ > **注意：**使用時`Form::model`，請務必使用來關閉表格`Form::close`！ ### [](https://octobercms.com/docs/services/html#labels)標簽 #### 生成標簽元素 ~~~ <?= Form::label('email', 'E-Mail Address') ?> ~~~ #### 指定額外的HTML屬性 ~~~ <?= Form::label('email', 'E-Mail Address', ['class' => 'awesome']) ?> ~~~ > **注意：**創建標簽后，您創建的任何名稱與標簽名稱匹配的表單元素也將自動收到與標簽名稱匹配的ID。 ### [](https://octobercms.com/docs/services/html#text)文字欄位 #### 產生文字輸入 ~~~ <?= Form::text('username') ?> ~~~ #### 指定默認值 ~~~ <?= Form::text('email', 'emailaddress@example.com') ?> ~~~ > **注：**該*隱藏*和*textarea的*方法具有相同的簽名*文本*方法。 #### 生成密碼輸入 ~~~ <?= Form::password('password') ?> ~~~ #### 產生其他輸入 ~~~ <?= Form::email($name, $value = null, $attributes = []) ?> <?= Form::file($name, $attributes = []) ?> ~~~ ### [](https://octobercms.com/docs/services/html#checkboxes-and-radio-buttons)復選框和單選按鈕 #### 生成復選框或單選輸入 ~~~ <?= Form::checkbox('name', 'value') ?> <?= Form::radio('name', 'value') ?> ~~~ #### 生成已選中的復選框或單選輸入 ~~~ <?= Form::checkbox('name', 'value', true) ?> <?= Form::radio('name', 'value', true) ?> ~~~ ### [](https://octobercms.com/docs/services/html#number)數 #### 產生數字輸入 ~~~ <?= Form::number('name', 'value') ?> ~~~ ### [](https://octobercms.com/docs/services/html#file-input)檔案輸入 #### 生成文件輸入 ~~~ <?= Form::file('image') ?> ~~~ > **注意：**表單必須已打開，并且`files`選項設置為`true`。 ### [](https://octobercms.com/docs/services/html#drop-down-lists)下拉式清單 #### 生成一個下拉列表 ~~~ <?= Form::select('size', ['L' => 'Large', 'S' => 'Small']) ?> ~~~ #### 生成具有選定默認值的下拉列表 ~~~ <?= Form::select('size', ['L' => 'Large', 'S' => 'Small'], 'S') ?> ~~~ #### 生成分組列表 ~~~ <?= Form::select('animal', [ 'Cats' => ['leopard' => 'Leopard'], 'Dogs' => ['spaniel' => 'Spaniel'], ]) ?> ~~~ #### 生成具有范圍的下拉列表 ~~~ <?= Form::selectRange('number', 10, 20) ?> ~~~ #### 生成具有范圍，選定值和空白選項的下拉列表 ~~~ <?= Form::selectRange('number', 10, 20, 2, ['emptyOption' => 'Choose...']) ?> ~~~ #### 生成帶有月份名稱的列表 ~~~ <?= Form::selectMonth('month') ?> ~~~ #### 生成帶有月份名稱，選定值和空白選項的列表 ~~~ <?= Form::selectMonth('month', 2, ['emptyOption' => 'Choose month...']) ?> ~~~ ### [](https://octobercms.com/docs/services/html#buttons)紐扣 #### 生成一個提交按鈕 ~~~ <?= Form::submit('Click Me!') ?> ~~~ > **注意：是否**需要創建一個按鈕元素？嘗試*按鈕*方法。它具有相同的簽名*提交*。 ### [](https://octobercms.com/docs/services/html#custom-macros)自定義宏 #### 注冊表格宏定義您自己的自定義Form類幫助器（稱為“宏”）很容易。運作方式如下。首先，只需使用給定名稱和閉包注冊宏： ~~~ Form::macro('myField', function() { return '<input type="awesome">'; }) ~~~ 現在，您可以使用其名稱來調用宏： #### 調用自定義表格宏 ~~~ <?= Form::myField() ?> ~~~