• 主页
  • 文章
  • 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 Form 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 专家交谈！