如何創(chuàng)建簡單的HTML和PHP表單
最直接的方法就是問他們一些問題。而且,在 HTML 世界中,記錄這些問題答案的最佳工具是簡單的 HTML 表單。
在本指南中,我將向您展示如何使用基本 HTML 和少量 PHP 來完成此操作。
您很快就會看到,呈現(xiàn)表單所需的 HTML 實際上非常簡單。但這只能解決你問題的一半。
表單將提示用戶輸入您要求的任何信息。但是,如果我們將其留在那里,那么當他們點擊“提交”按鈕時實際上不會發(fā)生任何事情。那是因為我們的服務器上沒有運行任何東西來收集和處理這些信息。
構建將表單與數(shù)據(jù)庫引擎或關聯(lián)應用程序集成的后端可能會變得非常復雜,并且遠遠超出了我們在此的范圍。但是,一旦我們理解了這里的 HTML 表單,我將向您展示如何添加一些 PHP 代碼來以基本方式處理代碼。
(更|多優(yōu)質內|容:java567 點 c0m)
如何準備 Linux 服務器環(huán)境
我正在運行一個安裝了 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 時創(chuàng)建的默認占位符。如果這個網站是一個真實的項目,我會用我自己的主頁文件替換它。
如何創(chuàng)建 HTML 表單
不過現(xiàn)在,我會讓您看看該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. “發(fā)布”意味著表單提交后,輸入到表單中的任何文本都將發(fā)布(或發(fā)送)到文件中submit.php。
<input>在我們關閉之前,代碼底部的標簽使用<form>類型submit來發(fā)送數(shù)據(jù)。
?<input type="submit" value="Submit">
valueSubmit屬性用于在我們將在表單上看到的按鈕上打印“提交”一詞。這將使用戶更容易了解如何使用表單。
現(xiàn)在表單本身使用的代碼分為三對行:
?<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字段。這意味著除非該字段有值,否則表單提交不會成功。
下一對對電子郵件地址執(zhí)行相同的操作。但正如我們從type屬性中看到的,該字段期望輸入符合有效電子郵件地址的屬性。此場也required。
最后一對“消息”帶有一個<textarea>標簽并指定了最大行數(shù)和列數(shù)。正如您可能期望的那樣,該字段允許自由格式的文本,但最多只能包含最大字符數(shù)。
這就是我們的代碼。讓我們看看它在瀏覽器中是什么樣子。不過,首先您需要獲取容器的公共 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,因此在我的家庭網絡之外無法訪問它。
您可以隨意在“名稱”、“電子郵件”和“消息”字段中輸入一些內容,但現(xiàn)在還沒有必要點擊“提交”按鈕。那是因為,如果沒有一些 PHP 魔法,什么都不會發(fā)生。我還沒有向您展示 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方法如何將表單數(shù)據(jù)發(fā)送到該文件嗎?這就是 PHP 將用它做的事情。該if塊查找已發(fā)布的數(shù)據(jù),然后按字段對其進行組織:名稱、電子郵件和消息。通常,您可能會將該數(shù)據(jù)發(fā)送到數(shù)據(jù)庫,但為了簡單起見,此代碼只會將其打印回頁面以證明我們確實擁有它。
讓我們看看它會是什么樣子。我單擊“提交”按鈕,表單將被我輸入的文本替換。沒什么了不起的,但它很好地說明了表單如何與 PHP 配合使用。
通過這個簡單的代碼,您現(xiàn)在可以創(chuàng)建自己的 HTML 表單來收集和處理用戶輸入。
您的下一步將是連接后端數(shù)據(jù)庫,以便您可以保存和操作該數(shù)據(jù)。現(xiàn)在,請享受這個成就吧!