如何创建简单的HTML和PHP表单
最直接的方法就是问他们一些问题。而且,在 HTML 世界中,记录这些问题答案的最佳工具是简单的 HTML 表单。
在本指南中,我将向您展示如何使用基本 HTML 和少量 PHP 来完成此操作。
您很快就会看到,呈现表单所需的 HTML 实际上非常简单。但这只能解决你问题的一半。
表单将提示用户输入您要求的任何信息。但是,如果我们将其留在那里,那么当他们点击“提交”按钮时实际上不会发生任何事情。那是因为我们的服务器上没有运行任何东西来收集和处理这些信息。
构建将表单与数据库引擎或关联应用程序集成的后端可能会变得非常复杂,并且远远超出了我们在此的范围。但是,一旦我们理解了这里的 HTML 表单,我将向您展示如何添加一些 PHP 代码来以基本方式处理代码。
(更|多优质内|容:java567 点 c0m)
如何准备 Linux 服务器环境
我正在运行一个安装了 PHP 和 Apache HTTPD 服务器的 Linux 虚拟容器。您可以通过以下方式在 Ubuntu 计算机上安装这些软件包:
$ sudo apt install apache2 php
我将首先导航到 Web 根目录,即/var/www/html. 该ls命令将列出目录中的所有文件。
$ pwd
/var/www/html
$ ls
form.html index.html submit.php
该index.html文件是安装 Apache 时创建的默认占位符。如果这个网站是一个真实的项目,我会用我自己的主页文件替换它。
如何创建 HTML 表单
不过现在,我会让您看看该form.html文件中的内容:
<!DOCTYPE html>
<html>
<head>
<title>Example Form</title>
</head>
<body>
<h1>Example Form</h1>
<form action="submit.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" cols="30" required></textarea><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
我们从标准标签开始,然后是一些<h1>标题文本。但随后我们打开一个<form>标记,其中action指向一个名为 的文件submit.php并method指定post. “发布”意味着表单提交后,输入到表单中的任何文本都将发布(或发送)到文件中submit.php。
<input>在我们关闭之前,代码底部的标签使用<form>类型submit来发送数据。
<input type="submit" value="Submit">
valueSubmit属性用于在我们将在表单上看到的按钮上打印“提交”一词。这将使用户更容易了解如何使用表单。
现在表单本身使用的代码分为三对行:
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" cols="30" required></textarea><br><br>
这里的第一行是一个<label>标签,在第一个输入字段上打印单词“Name:”。伴随的<input>标签具有type“文本”属性、id“名称”属性并且是required字段。这意味着除非该字段有值,否则表单提交不会成功。
下一对对电子邮件地址执行相同的操作。但正如我们从type属性中看到的,该字段期望输入符合有效电子邮件地址的属性。此场也required。
最后一对“消息”带有一个<textarea>标签并指定了最大行数和列数。正如您可能期望的那样,该字段允许自由格式的文本,但最多只能包含最大字符数。
这就是我们的代码。让我们看看它在浏览器中是什么样子。不过,首先您需要获取容器的公共 IP 地址。
有几种方法可以做到这一点,但涉及最少击键的方法是ip a在容器内运行。
$ ip a
[...]
12: eth0@if13: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc noqueue state UP group default qlen 1000
link/ether 00:16:3e:81:57:1b brd ff:ff:ff:ff:ff:ff link-netnsid 0
inet 10.0.3.216/24 metric 100 brd 10.0.3.255 scope global dynamic eth0
valid_lft 3154sec preferred_lft 3154sec
inet6 fd42:e265:3791:64f9:216:3eff:fe81:571b/64 scope global mngtmpaddr noprefixroute
[...]
我得到的IP是10.0.3.216. 只需添加form.html您获得的值并将其弹出到浏览器 URL 栏中,网站就会加载。顺便说一下,这是一个本地 NAT IP,因此在我的家庭网络之外无法访问它。
您可以随意在“名称”、“电子邮件”和“消息”字段中输入一些内容,但现在还没有必要点击“提交”按钮。那是因为,如果没有一些 PHP 魔法,什么都不会发生。我还没有向您展示 PHP。
如何编写 PHP 脚本来捕获用户输入
顺便说一下,PHP 是一种网络友好的脚本语言,是向网页添加编程功能的流行选择。事实上,您甚至可以将 PHP 代码直接合并到 HTML 代码中。但它本身在一个名为 的文件中看起来是这样的submit.php:
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Retrieve form data
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];
// Display the submitted data
echo "Name: " . $name . "<br>";
echo "Email: " . $email . "<br>";
echo "Message: " . $message . "<br>";
}
?>
还记得我们的 HTMLpost方法如何将表单数据发送到该文件吗?这就是 PHP 将用它做的事情。该if块查找已发布的数据,然后按字段对其进行组织:名称、电子邮件和消息。通常,您可能会将该数据发送到数据库,但为了简单起见,此代码只会将其打印回页面以证明我们确实拥有它。
让我们看看它会是什么样子。我单击“提交”按钮,表单将被我输入的文本替换。没什么了不起的,但它很好地说明了表单如何与 PHP 配合使用。
通过这个简单的代码,您现在可以创建自己的 HTML 表单来收集和处理用户输入。
您的下一步将是连接后端数据库,以便您可以保存和操作该数据。现在,请享受这个成就吧!