• 日常搜索
  • 百度一下
  • Google
  • 在线工具
  • 搜转载

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

如果您是 php 开发人员,那么创建表单、验证表单提交和管理 PHP 会话可能是您工作的一部分。所有这些任务虽然相当重复,但需要大量时间和精力,特别是如果您关心与设计和安全相关的最佳实践。

通过使用经过良好测试的表单构建器库,您不仅可以显着提高自己的效率,还可以显着提高 PHP 应用程序的健壮性。PHP Form Builder 支持现代css框架,例如 Materialize、Foundation 和 Bootstrap 4,以及客户端和服务器表单验证。它还包括几个预先构建的表单模板、jquery插件和数据库实用程序。

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

先决条件

要充分利用本教程,您需要:

  • PHP 7.0 或更高版本, 启用curl扩展

  • Envato帐户_

1.安装库

PHP Form Builder是高级 PHP 库。因此,请登录您的 Envato 帐户并为其购买许可证。

使用PHP Form Builder创建漂亮的注册表单  第1张您现在可以下载名为codecanyon-8790160-php-form-builder.zip的文件。确保此文件在您的开发服务器上可用。

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

mkdir my_forms

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

通常,您只需要phpformbuilder 子目录。所以把它移到项目目录。

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

2.注册Library

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

首先启动一个 PHP 开发服务器。以下是如何启动一个监听端口的方法8000:

php -S localhost:8000

或者,您可以随意使用 Apache Web 服务器。

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

在显示的表格中,输入您的购买代码,您可以在Code Canyon 发送的购买确认电子邮件中找到该代码,然后按注册 按钮。

使用PHP Form Builder创建漂亮的注册表单  第2张注册成功后,就可以开始使用库了。

请务必注意,如果您想在生产中使用此库,您也必须从生产服务器完成此注册过程。

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>

此时,通过调用 文档 里面的对象的render() 方法, 就可以渲染你的表单了。但是,它看起来会非常简单。Form<body>

使用PHP Form Builder创建漂亮的注册表单  第3张因此,在调用该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 4 的JavaScript文件。

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  ,您将能够看到表单如下所示:

使用PHP Form Builder创建漂亮的注册表单  第4张如果您想知道,以下是使用 Materialize 作为 CSS 框架的表单:

使用PHP Form Builder创建漂亮的注册表单  第5张

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() andendFieldSet() 方法允许您对输入进行分组并向它们添加标题。

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

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // 这里有更多代码    }

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

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

该Validator 对象有几个直观命名的方法来验证输入字段。例如,您可以使用该minLength() 方法检查name 字段的值是否至少有八个字符长。同样,您可以使用integer() andmax() 方法检查 是否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();}

如果您现在尝试使用无效值提交表单,您将能够看到验证器正在运行。

使用PHP Form Builder创建漂亮的注册表单  第6张

6.添加样式

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

以下代码向您展示了如何将btn和 btn-primary CSS 类添加到提交按钮:

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

通过上述更改,按钮将如下所示:

使用PHP Form Builder创建漂亮的注册表单  第7张使用 PHP Form Builder 的最大好处之一是它支持大多数 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创建漂亮的注册表单  第8张

结论

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


文章目录
  • 先决条件
  • 1.安装库
  • 2.注册Library
  • 3.创建一个简单的表单
  • 4.渲染表单
  • 5.验证输入
  • 6.添加样式
  • 结论