使用PHP Form Builder创建漂亮的表单

最新推荐文章于 2024-09-11 08:04:22 发布

cunjie3951

最新推荐文章于 2024-09-11 08:04:22 发布

阅读量2.7k

点赞数

文章标签： python java linux javascript html ViewUI

本文介绍了如何使用PHP Form Builder库创建和验证表单，包括安装、注册、创建表单、呈现、验证输入和添加样式。该库支持CSS框架如Bootstrap，提供了预建的表单模板和验证工具。

摘要由CSDN通过智能技术生成

如果您是PHP开发人员，则创建表单，验证表单提交和管理PHP会话可能是您工作中必不可少的任务。所有这些任务，尽管相当重复，但都需要大量时间和精力，尤其是如果您关心与设计和安全性相关的最佳实践时。

PHP Form Builder支持现代CSS框架（例如Materialize，Foundation和Bootstrap 4）以及客户端和服务器端的表单验证。它还包括几个预构建的表单模板，jQuery插件和数据库实用程序。

在本教程中，我将向您展示如何使用PHP Form Builder执行与表单相关的常见操作。

先决条件

要充分利用本教程，您需要：

PHP 7.0或更高版本，启用了cURL扩展
Envato帐户

1.安装库

PHP Form Builder是CodeCanyon上可用的高级PHP库。因此，登录到您的Envato帐户并购买许可证。

现在，您将能够下载名为codecanyon-8790160-php-form-builder.zip的文件。确保此文件在开发服务器上可用。

我建议您创建一个新的项目目录，以存储您将在本教程中创建和使用的所有文件。

mkdir my_forms

接下来，解压缩您下载的ZIP文件。在父目录phpformbuilder中 ，除了源代码外，您还将找到各种模板，资产和帮助文件。

通常，您只需要phpformbuilder子目录。因此将其移至项目目录。

unzip ~/Downloads/codecanyon-8790160-php-form-builder.zip
mv phpformbuilder/phpformbuilder ~/my_forms
cd my_forms

2.注册图书馆

如果您购买了常规许可证，则可以在开发服务器和生产中的一个域上本地使用该库。现在，让我们仅从开发服务器注册该库。

首先启动一个PHP开发服务器。这是您如何开始监听端口8000 ：

php -S localhost:8000

另外，请随时使用Apache Web服务器。

现在，您必须打开浏览器并访问本地注册URL，如下所示： http：// localhost：8000 / phpformbuilder / register.php 。

在显示的表单中，输入您的购买代码，您将在CodeCanyon发送的购买确认电子邮件中找到该代码，然后按一下Register按钮。

注册成功后，就可以开始使用该库了。

需要特别注意的是，如果要在生产环境中使用此库，则还必须从生产服务器中完成此注册过程。

3.创建一个简单的表单

创建一个名为index.php的新文件，并使用文本编辑器将其打开。我们将在此文件中编写所有代码。

PHP Form Builder的Form类具有创建表单所需的大多数方法。导入方法如下：

<?php
include_once $_SERVER['DOCUMENT_ROOT'] . '/phpformbuilder/Form.php';
use phpformbuilder\Form;

在处理表单数据时使用PHP会话通常是一个好主意。因此，现在是开始新会话的好时机：

session_start();

若要创建新表单，必须创建Form类的实例，该实例的构造函数将表单名称作为参数。现在，让我们创建一个简单的用户注册表单：

$registrationForm = new Form('reg-form');

要将输入字段添加到表单，可以使用addInput()方法，该方法需要字段的类型，名称，默认值和标签。除了名称和类型，其他所有参数都是可选的。

以下代码显示了如何创建几种不同类型的字段：

$registrationForm->addInput('text', 'fname', '', 'Full Name');
$registrationForm->addInput('text', 'uname', '', 'Username');
$registrationForm->addInput('password', 'upasswd', '', 'Password');
$registrationForm->addInput('email', 'email', '', 'Email');

要添加一个提交按钮的形式，可使用addBtn()方法，这是非常相似的addInput()方法。

$registrationForm->addBtn('submit', 'reg-submit', 
                            'submit', 'Register');
?>

4.呈现表格

现在我们的表格已经完成。但是在渲染之前，我们将需要一些HTML样板。因此，在关闭PHP标记后，添加以下代码，这将创建一个空HTML文档：

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    </body>
</html>

此时，通过在文档的<body>中调用Form对象的render()方法，可以呈现表单。但是，它看起来非常朴素。

因此，在调用render()方法之前，必须记住要向文档中添加一些样式表和JavaScript文件。

PHP Form Builder支持许多流行CSS框架。包括要使用的框架的最新CSS和JS文件是您的责任。在本教程中，我们将使用Twitter Bootstrap 4.3框架。

因此，在文档的<head>内，添加一个<link>标记，该标记指向Bootstrap的样式表。如果本地没有，则可以随时使用CDN。这是如何做：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />

PHP Form Builder也具有自己的样式，您必须将其添加到文档中。您可以通过调用printIncludes()实用程序方法来实现。

<?php
  $registrationForm->printIncludes('css');
?>

此外，为了获得最佳效果，我建议您通过将其括在div来向表单添加一些填充和边距。

<div style='padding:16px;margin:8px;'>
    <?php
        $registrationForm->render();
    ?>
</div>

在<body>的末尾，您还必须包括jQuery和Bootstrap 4JavaScript文件。

最后，您必须通过调用printIncludes()和printJsCode()方法来包括PHP Form Builder自己JavaScript文件和代码。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js">
</script>

<?php
    $registrationForm->printIncludes('js');
    $registrationForm->printJsCode();
?>

如果现在在浏览器中打开index.php ，您将能够看到该表单如下所示：

如果您想知道，以下是Materialize作为CSS框架的形式：

5.验证输入

PHP Form Builder具有Validator类，可用于简化服务器端表单验证。导入方法如下：

use phpformbuilder\Validator\Validator;

为了另一个示例，让我们现在创建一个可以验证其输入的简单表单。因为我们将在服务器端验证输入，所以必须将novalidate作为参数传递给Form类的构造函数。这将关闭浏览器的默认客户端验证逻辑，从而使用户无论验证错误如何均可提交表单。

$myForm = new Form('my-form', 'horizontal', 'novalidate');

我们的新表格将接受具有以下条件的姓名，年龄和电子邮件地址：

名称必须至少八个字符。
年龄必须是小于45的整数。
电子邮件地址必须是有效的。

这是如何使用您已经熟悉的addInput()和addBtn()方法创建三个字段和一个提交按钮的方法：

$myForm->startFieldSet('My Little Form')
       ->addInput('text', 'name', '', 'Name')
       ->addInput('text', 'age', '', 'Age')
       ->addInput('text', 'email', '', 'Email')
       ->endFieldSet()
       ->addBtn('submit', 'submit', 1, 'Submit');

如您在上面的代码中所见，PHP Form Builder支持方法链接。您可能已经猜到了startFieldSet()和endFieldSet()方法，可以对输入进行分组并向其添加标题。

表单验证过程应仅在用户提交表单后才运行。要检测此事件，您需要做的只是检查是否使用HTTP POST方法访问了该页面。

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // More code here    
}

在if语句中，您可以继续通过调用validate()方法来创建Validator类的实例，该方法需要您要验证的表单的名称。

$validator = Form::validate('my-form');

Validator对象具有几种直观命名的方法来验证输入字段。例如，您可以使用minLength()方法检查name字段的值是否至少八个字符长。同样，您可以使用integer()和max()方法来检查age是否为小于45的整数。

必要时，所有验证方法都会自动生成有意义的错误消息。但是，如果您对它们不满意，则可以自由提供自己的自定义消息。

$validator->minLength(8)->validate('name');
$validator->integer()->validate('age');
$validator->max(45)->validate('age');
$validator->email('Please provide a valid address')
          ->validate('email');

添加所有检查之后，必须记住要调用hasErrors()方法来检查是否有任何检查失败。

如果检查失败，则getAllErrors()方法将返回所有错误消息。要显示它们，必须更新$_SESSION变量。以下代码向您展示了如何：

if ($validator->hasErrors()) {
    $_SESSION['errors']['my-form'] = $validator->getAllErrors();
}

如果您现在尝试使用无效值提交表单，那么您将可以看到验证程序正在运行。

6.添加样式

PHP Form Builder允许您手动将CSS类分配给表单字段。 addInput()和addBtn()方法都接受第五个参数，您可以使用该参数来自定义关联的字段。

以下代码显示了如何将btn和btn-primary CSS类添加到btn按钮：

$myForm->addBtn('submit', 'submit', 1, 'Submit', 
                'class=btn btn-primary');

进行上述更改后，该按钮将如下所示：

使用PHP Form Builder的最好的事情之一就是它支持大多数Bootstrap主题。这意味着从一个Bootstrap主题切换到另一个Bootstrap主题非常容易。

在所有这些期间，我们一直使用默认的Bootstrap主题。要切换到Bootswatch上可用的免费主题之一，只需更改先前添加的<link>标记。这是使用Slate主题的方法：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.3.1/slate/bootstrap.min.css" />

在下面的屏幕截图中可以看到，有了这个新主题，表单的外观和感觉就大为不同。

结论

现在，您知道如何使用PHP Form Builder创建美观的表单并处理表单提交。在本教程中，您还看到了使用自定义CSS样式和主题美化表单的容易程度。

翻译自: https://code.tutsplus.com/tutorials/create-beautiful-forms-with-php-form-builder--cms-33267

cunjie3951

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫