• 主頁
  • 文章
  • SEO
  • 振興您的表單：使用 Drupal 的表單 API 增強用戶體驗

振興您的表單：使用 Drupal 的表單 API 增強用戶體驗

已發表: 2023-04-11

你知道“形式疲勞”是一回事嗎？！ 當您必須填寫太多表格時，會感到筋疲力盡。 但是表單是網站不可或缺的一部分，任何網站所有者都不能（或應該）沒有它們。 那麼如何確保您的網站有助於減少表單疲勞呢？ 簡單的！ 保持簡單和簡短，提供清晰簡潔的說明，分解長表格並使用自動填充。 最重要的是，確保您提供輕鬆的用戶體驗來填寫它們。

Drupal 的表單 API 提供了一種方法來創建易於定制和主題化的表單，以便與任何網站很好地融合。 它為開發人員提供了一組函數和 API，用於在 Drupal 中創建、驗證和處理表單。 深入了解令人驚嘆的 Drupal Form API，並了解如何在下一個項目中實施它。

Drupal 表單 API

為什麼使用表單 API

如您所知，表單是每個網站的重要組成部分，因為它們允許用戶通過提交數據與它們進行交互。 使用 Drupal 的表單 API，開發人員可以為各種目的創建獨特的表單，包括聯繫人、登錄和註冊。 您應該考慮使用 Form API 的幾個原因：

  1. 它易於使用，不需要太多編碼經驗。 您可以使用一組簡單直觀的函數來創建表單。
  2. 它提供了內置的驗證功能，使您可以輕鬆地驗證表單數據。
  3. 帶有內置安全功能，有助於防止跨站點腳本 (XSS) 和跨站點請求偽造 (CSRF) 等攻擊。
  4. 它是高度可定制的，可用於創建具有多個字段、按鈕和操作的複雜表單。
  5. 表單 API 是可主題化的，因此開發人員可以更改 CSS 和 HTML 以使他們的表單看起來像他們想要的那樣。
  6. 它可以輕鬆地與其他 Drupal API 集成。

構建表單之前需要了解的事項

Drupal 中經常使用各種表單。 每個都包含一個基類，您可以在自己設計的獨特模塊中對其進行擴展。

首先，確定您需要構建的表單類型：

  • 一種通用形式。 擴展 FormBase。
  • 使管理員能夠更新模塊設置的配置表單。 擴展 ConfigFormBase。

任何在其層次結構中具有 FormBase 的表單都必須實現以下方法，因為 FormBase 實現了 FormInterface。

  • 取得表格編號()
  • 構建表單()
  • 提交表格（）

要使用表單 API 創建通用自定義表單，您需要定義一個函數，該函數返回buildForm()中的表單元素數組。 每個元素的鍵是表單元素的名稱，值是定義元素的屬性數組。 例如，要創建一個文本字段，您可以像這樣定義一個元素：

 $form['emp_name'] = [ '#type' => 'textfield', '#title' => $this->t('Enter Name'), '#required' => TRUE, ];

添加驗證

表單 API 還提供了一種驗證用戶輸入的方法。 您可以將驗證函數添加到您的表單定義中，該函數將在提交表單時調用。 如果驗證函數返回錯誤消息，將阻止表單提交並將錯誤消息顯示給用戶。

要添加驗證功能，您需要實現validateForm() 。

處理表單提交

提交表單時，Drupal 會調用您定義的提交函數。 提交功能可以對錶單數據進行任何必要的處理，比如保存到數據庫

要定義提交功能，您需要實現一個submitForm()

將表單集成到請求中

要將此表單集成到 Drupal 站點的 URI 結構中，請使用如下路由：

 example.form: path: '/example-form' defaults: _title: 'Example form' _form: '\Drupal\example\Form\ExampleForm' requirements: _permission: 'access content'

_form鍵告訴路由系統所提供的類名是一個表單類，要作為表單實例化和處理。

使用 Drupal 表單 API 創建自定義表單

按照這些簡單的步驟開始使用 Drupal 的表單 API 創建自定義表單的過程：

  1. 在自定義模塊中創建一個.info.yml 。 （因為我們正在為自定義表單創建一個單獨的模塊，所以在現有模塊中添加表單不需要此步驟）。
  2. 創建一個用於返回表單數組的表單類。 (custom_module/src/Form/Registration.php )
  3. 創建一個.routing.yml文件
  4. 創建一個.module和 hook_form_alter() 和/或 hook_form_FORM_ID_alter() 來更改表單（如果需要）。

以下是員工登記表的完整示例：

文件夾結構：

員工註冊

1.員工註冊信息.yml

 name: Employee Registration Form type: module description: Custom module for implementing custom employee registration form. core_version_requirement: ^9 || ^10 package: Custom

2. src/表單/Registration.php

 <?php namespace Drupal\employee_registration\Form; use Drupal\Core\Form\FormBase; use Drupal\Core\Form\FormStateInterface; /** * Implements a custom form. */ class Registration extends FormBase { /** * {@inheritdoc} */ public function getFormId() { return 'employee_registration_form'; } /** * {@inheritdoc} */ public function buildForm(array $form, FormStateInterface $form_state) { $form['emp_name'] = [ '#type' => 'textfield', '#title' => $this->t('Enter Name'), '#required' => TRUE, ]; $form['emp_no'] = [ '#type' => 'textfield', '#title' => $this->t('Enter Employee Number'), '#required' => TRUE, ]; $form['emp_mail'] = [ '#type' => 'email', '#title' => $this->t('Enter Email ID'), '#required' => TRUE, ]; $form['emp_phone'] = [ '#type' => 'tel', '#title' => $this->t('Enter Contact Number'), ]; $form['emp_dob'] = [ '#type' => 'date', '#title' => $this->t('Enter DOB'), '#required' => TRUE, ]; $form['emp_gender'] = [ '#type' => 'select', '#title' => $this->t('Select Gender'), '#options' => [ 'Male' => $this->t('Male'), 'Female' => $this->t('Female'), 'Other' => $this->t('Other'), ], ]; $form['submit'] = [ '#type' => 'submit', '#value' => $this->t('Save'), '#button_type' => 'primary', ]; return $form; } /** * {@inheritdoc} */ public function validateForm(array &$form, FormStateInterface $form_state) { if (strlen($form_state->getValue('emp_phone')) < 10) { $form_state->setErrorByName('emp_phone', $this->t('The phone number is too short. Please enter a full phone number.')); } } /** * {@inheritdoc} */ public function submitForm(array &$form, FormStateInterface $form_state) { // Processing form data. $this->messenger()->addMessage($this->t("Employee Registration Done!!")); foreach ($form_state->getValues() as $key => $value) { $this->messenger()->addMessage($key . ': ' . $value); } } }

3.員工註冊.routing.yml

 employee_registration.form: path: '/registration-form' defaults: _title: 'Employee Registration' _form: '\Drupal\employee_registration\Form\Registration' requirements: _permission: 'access content'

結果：

員工登記表

emp reg 結果頁面

最後的想法

表單 API 允許您在 Drupal 中創建具有驗證和處理功能的複雜和自定義表單。 當您使用表單 API 時，您可以確保您的表單是一致的並且易於用戶使用。 正在尋找 Drupal 機構來幫助您為您的受眾打造用戶友好的體驗？ 立即與我們的 Drupal 專家交談！