標籤：包含 gen targe html 表單 request 計算 提示 onsubmit red
前面的話在以前，網站的使用者與後端互動的主要方式是通過HTML表單的使用。表單的引入在1993年，由於其簡單性和易用性，直到電子商務出現之前一直保持著重要位置。理解表單提交，對於更深入地理解ajax是有好處的。下面將詳細介紹表單形式的互動
建立表單
表單處理是一個多線程。首先建立一個表單，以供使用者輸入詳細的請求資訊。接著，輸入的資料被發送到網頁伺服器，在伺服器裡這些資料得到編譯和錯誤偵測。如果PHP代碼標識出一個或多個需要重要輸入的欄位，則帶有相關錯誤資訊的表單會重新顯示。當精確的輸入資訊滿足代碼的需要時，代碼會採取一些調用資料庫的行為，如輸入購物的細節
[注意]關於HTML表單元素的詳細資料移步至此
要建立一個表單，至少需要以下幾個元素：一個form元素、一個指定GET或POST方法的提交類型、一個或多個輸入欄位，以及表單資料提交的目的地址URL
<form action="http://www.w3school.com.cn/demo/welcome.php"> <span>Name:</span> <input name="name"><br> <span>Email:</span> <input name="email"><br> <input type="submit"></form>
表單處理
PHP 超全域變數 $_GET 和 $_POST 用於收集表單資料(form-data)
GET 和 POST 都建立數組(例如，array( key => value, key2 => value2, key3 => value3, ...))。此數組包含鍵/值對，其中的鍵是表單控制項的名稱，而值是來自使用者的輸入資料。
GET 和 POST 被視作 $_GET 和 $_POST。它們是超全域變數，這意味著對它們的訪問無需考慮範圍，即無需任何特殊代碼，能夠從任何函數、類或檔案訪問它們
$_GET 是通過 URL 參數傳遞到當前指令碼的變數數組
$_POST 是通過 HTTP POST 傳遞到當前指令碼的變數數組
通過 GET 方法從表單發送的資訊對任何人都是可見的(所有變數名和值都顯示在 URL 中)。GET對所發送資訊的數量也有限制。限制在大於2000個字元。不過，由於變數顯示在 URL 中，把頁面添加到書籤中也更為方便
通過 POST 方法從表單發送的資訊對其他人是不可見的(所有名稱/值會被嵌入 HTTP 要求的主體中)，並且對所發送資訊的數量也無限制。此外 POST 支援高階功能，比如在向伺服器上傳檔案時進行 multi-part 二進位輸入。不過，由於變數未顯示在 URL 中，也就無法將頁面添加到書籤。一般地，使用 POST 來發送表單資料
【post】
<!-- 提交頁 --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><form method="post" action="http://www.w3school.com.cn/demo/welcome.php"> <span>Name:</span> <input name="name"><br> <span>Email:</span> <input name="email"><br> <input type="submit"></form></body></html>
<!-- 響應頁 --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> Welcome <?php echo $_POST["name"]; ?><br> Your email address is: <?php echo $_POST["email"]; ?></body></html>
【get】
如果不設定form元素的method屬性，則預設為get方法
<!-- 提交頁 --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><form action="http://www.w3school.com.cn/demo/welcome_get.php"> <span>Name:</span> <input name="name"><br> <span>Email:</span> <input name="email"><br> <input type="submit"></form></body></html>
<!-- 響應頁 --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> Welcome <?php echo $_GET["name"]; ?><br> Your email address is: <?php echo $_GET["email"]; ?></body></html>
表單安全
上面的代碼很簡單。不過，最重要的內容被漏掉了。需要對錶單資料進行驗證，以防止指令碼出現漏洞
對 HTML 表單資料進行適當的驗證對於防範駭客和垃圾郵件很重要
欄位 驗證規則Name 必需。必須包含字母和空格。E-mail 必需。必須包含有效電子郵件地址(包含 @ 和 .)Website 可選。如果選填，則必須包含有效 URL。Comment 可選。多行輸入欄位(文字框)Gender 必需。必須選擇一項。
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">姓名：<input type="text" name="name" value=""><span class="error">* </span><br><br>電郵：<input type="text" name="email" value=""><span class="error">* </span><br><br>網址：<input type="text" name="website" value=""><span class="error"></span><br><br><label>評論：<textarea name="comment" rows="5" cols="40"></textarea><br><br>性別：<input type="radio" name="gender" value="female">女性<input type="radio" name="gender" value="male">男性<span class="error">* </span><br><br><input type="submit" name="submit" value="提交"> </form>
【$_SERVER["PHP_SELF"]】
$_SERVER["PHP_SELF"] 是一種超全域變數，它返回當前執行指令碼的檔案名稱。因此，$_SERVER["PHP_SELF"] 將表單資料發送到頁面本身，而不是跳轉到另一張頁面。這樣，使用者就能夠在表單頁面獲得錯誤提示資訊
【XSS】
$_SERVER["PHP_SELF"] 變數能夠被駭客利用。如果頁面使用了PHP_SELF，使用者能夠輸入底線然後執行跨網站指令碼(XSS)
跨網站指令碼(Cross-site scripting，XSS)是一種電腦安全性漏洞類型，常見於Web應用程式。XSS能夠使攻擊者向其他使用者瀏覽的網頁中輸入用戶端指令碼
假設"test_form.php" 的頁面中有如下表單
<form method="post" action="<?php echo $_SERVER["PHP_SELF"];?>">
現在，如果使用者進入的是地址欄中正常的URL："http://www.example.com/test_form.php"，上面的代碼會轉換為：
<form method="post" action="test_form.php">
不過，如果使用者在地址欄中鍵入了如下 URL：
http://www.example.com/test_form.php/%22%3E%3Cscript%3Ealert(‘hacked‘)%3C/script%3E
在這種情況下，上面的代碼會轉換為：
<form method="post" action="test_form.php"/><script>alert(‘hacked‘)</script>
這段代碼加入了一段指令碼和一個提示命令。並且當此頁面載入後，就會執行JavaScript代碼(使用者會看到一個提示框)。這僅僅是一個關於 PHP_SELF 變數如何被利用的簡單無害案例
<script>標籤內能夠添加任何JavaScript代碼，駭客能夠把使用者重新導向到另一台伺服器上的某個檔案，該檔案中的惡意代碼能夠更改全域變數或將表單提交到其他地址以儲存使用者資料等
【htmlspecialchars()】
如果避免$_SERVER["PHP_SELF"]被利用？通過使用 htmlspecialchars() 函數能夠避免$_SERVER["PHP_SELF"]被利用
htmlspecialchars()函數把特殊字元轉換為 HTML 實體。這意味著 < 和 > 之類的HTML字元會被替換為 < 和 >。這樣可防止攻擊者通過在表單中注入HTML或JavaScript代碼(跨網站指令碼攻擊)對代碼進行利用
表單代碼是這樣的：
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
htmlspecialchars()把特殊字元轉換為HTML實體。現在，如果使用者試圖利用PHP_SELF變數，會導致如下輸出
<form method="post" action="test_form.php/"><script>alert(‘hacked‘)</script>">
所以，驗證表單要做的第一件事是通過PHP的htmlspecialchars()函數傳遞所有變數。在使用htmlspecialchars()函數後，如果使用者試圖在文字欄位中提交以下內容：
<script>location.href(‘http://www.hacked.com‘)</script>
代碼不會執行，因為會被儲存為轉義代碼，就像這樣：
<script>location.href(‘http://www.hacked.com‘)</script>
現在這條代碼顯示在頁面上或e-mail中是安全的
在使用者提交該表單時，我們還要做兩件事：1、通過PHP的trim()函數去除使用者輸入資料中不必要的字元(多餘的空格、定位字元、換行)；2、通過PHP的stripslashes()函數刪除使用者輸入資料中的反斜線(\)
接下來我建立一個檢查函數，命名為 test_input()，通過test_input()函數檢查每個$_POST變數
<?php// 定義變數並設定為空白值$name = $email = $gender = $comment = $website = "";if ($_SERVER["REQUEST_METHOD"] == "POST") {$name = test_input($_POST["name"]);$email = test_input($_POST["email"]);$website = test_input($_POST["website"]);$comment = test_input($_POST["comment"]);$gender = test_input($_POST["gender"]);}function test_input($data) {$data = trim($data);$data = stripslashes($data);$data = htmlspecialchars($data);return $data;}?>
錯誤資訊
在下面的代碼中增加了一些新變數：$nameErr、$emailErr、$genderErr以及$websiteErr。這些錯誤變數會儲存被請求欄位的錯誤訊息。還為每個$_POST變數添加了一個if else語句。這條語句通過PHP的empty()函數檢查$_POST變數是否為空白。如果為空白，則錯誤訊息會儲存於不同的錯誤變數中。如果不為空白，則通過test_input()函數發送使用者輸入資料
<?php// 定義變數並設定為空白值$nameErr = $emailErr = $genderErr = $websiteErr = "";$name = $email = $gender = $comment = $website = "";if ($_SERVER["REQUEST_METHOD"] == "POST") { if (empty($_POST["name"])) { $nameErr = "Name is required"; } else { $name = test_input($_POST["name"]); } if (empty($_POST["email"])) { $emailErr = "Email is required"; } else { $email = test_input($_POST["email"]); } if (empty($_POST["website"])) { $website = ""; } else { $website = test_input($_POST["website"]); } if (empty($_POST["comment"])) { $comment = ""; } else { $comment = test_input($_POST["comment"]); } if (empty($_POST["gender"])) { $genderErr = "Gender is required"; } else { $gender = test_input($_POST["gender"]); }}?>
在 HTML 表單中，在每個被請求欄位後面增加了一點指令碼。如果需要，會產生恰當的錯誤訊息(如果使用者未填寫必要欄位就試圖提交表單)
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">Name: <input type="text" name="name"><span class="error">* <?php echo $nameErr;?></span><br><br>E-mail:<input type="text" name="email"><span class="error">* <?php echo $emailErr;?></span><br><br>Website:<input type="text" name="website"><span class="error"><?php echo $websiteErr;?></span><br><br><label>Comment: <textarea name="comment" rows="5" cols="40"></textarea><br><br>Gender:<input type="radio" name="gender" value="female">Female<input type="radio" name="gender" value="male">Male<span class="error">* <?php echo $genderErr;?></span><br><br><input type="submit" name="submit" value="Submit"> </form>
表單驗證
驗證規則中，"Name", "E-mail" 以及 "Gender" 欄位是必需的。這些欄位不可為空且必須在 HTML 表單中填寫
【驗證名字】
以下代碼檢查name欄位是否包含字母和空格。如果name欄位無效，則儲存一條錯誤訊息
$name = test_input($_POST["name"]);if (!preg_match("/^[a-zA-Z ]*$/",$name)) { $nameErr = "只允許字母和空格！"; }
【驗證 E-mail】
以下代碼展檢查e-mail地址文法是否有效。如果無效則儲存一條錯誤訊息
$email = test_input($_POST["email"]);if (!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/",$email)) { $emailErr = "無效的 email 格式！"; }
【驗證 URL】
以下代碼檢查URL地址文法是否有效。如果 URL 地址文法無效，則儲存一條錯誤訊息
$website = test_input($_POST["website"]);if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) { $websiteErr = "無效的 URL"; }
保留值
如果需要在使用者點擊提交按鈕後在輸入欄位中顯示值，我們在以下輸入欄位的value屬性中增加了一小段 PHP 指令碼：name、email 以及 website。在 comment 文字框欄位中，把指令碼放到了 <textarea> 與 </textarea> 之間。這些指令碼輸出$name、$email、$website 和 $comment 變數的值
然後，還需要顯示選中了哪個選項按鈕。對此，必須操作 checked 屬性(而非選項按鈕的 value 屬性)
Name: <input type="text" name="name" value="<?php echo $name;?>">E-mail: <input type="text" name="email" value="<?php echo $email;?>">Website: <input type="text" name="website" value="<?php echo $website;?>">Comment: <textarea name="comment" rows="5" cols="40"><?php echo $comment;?></textarea>Gender:<input type="radio" name="gender"<?php if (isset($gender) && $gender=="female") echo "checked";?>value="female">Female<input type="radio" name="gender"<?php if (isset($gender) && $gender=="male") echo "checked";?>value="male">Male
表單發送
HTML網頁的<form>元素能夠以四種格式，向伺服器發送資料
使用POST方法，將enctype屬性設為application/x-www-form-urlencoded，這是預設方法
<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"></form>
使用POST方法，將enctype屬性設為text/plain
<form action="register.php" method="post" enctype="text/plain" onsubmit="AJAXSubmit(this); return false;"></form>
使用POST方法，將enctype屬性設為multipart/form-data
<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;"></form>
使用GET方法，enctype屬性將被忽略
<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"></form>
某個表單有兩個欄位，分別是foo和baz，其中foo欄位的值等於bar，baz欄位的值是一個分為兩行的字串。上面四種方法，都可以將這個表單發送到伺服器
第一種方法是預設方法，POST發送，Encoding type為application/x-www-form-urlencoded
Content-Type: application/x-www-form-urlencodedfoo=bar&baz=The+first+line.%0D%0AThe+second+line.%0D%0A
第二種方法是POST發送，Encoding type為text/plain
Content-Type: text/plainfoo=barbaz=The first line.The second line.
第三種方法是POST發送，Encoding type為multipart/form-data
Content-Type: multipart/form-data; boundary=---------------------------314911788813839-----------------------------314911788813839Content-Disposition: form-data; name="foo"bar-----------------------------314911788813839Content-Disposition: form-data; name="baz"The first line.The second line.-----------------------------314911788813839--
第四種方法是GET請求
?foo=bar&baz=The%20first%20line.%0AThe%20second%20line
完整代碼
<!DOCTYPE HTML> <html><head><style>.error {color: #FF0000;}</style></head><body> <?php// 定義變數並設定為空白值$nameErr = $emailErr = $genderErr = $websiteErr = "";$name = $email = $gender = $comment = $website = "";if ($_SERVER["REQUEST_METHOD"] == "POST") { if (empty($_POST["name"])) { $nameErr = "姓名是必填的"; } else { $name = test_input($_POST["name"]); // 檢查名稱是否包含字母和空白字元 if (!preg_match("/^[a-zA-Z ]*$/",$name)) { $nameErr = "只允許字母和空格"; } } if (empty($_POST["email"])) { $emailErr = "電郵是必填的"; } else { $email = test_input($_POST["email"]); // 檢查電子郵件地址文法是否有效 if (!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/",$email)) { $emailErr = "無效的 email 格式"; } } if (empty($_POST["website"])) { $website = ""; } else { $website = test_input($_POST["website"]); // 檢查 URL 地址文法是否有效（Regex也允許 URL 中的斜杠） if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) { $websiteErr = "無效的 URL"; } } if (empty($_POST["comment"])) { $comment = ""; } else { $comment = test_input($_POST["comment"]); } if (empty($_POST["gender"])) { $genderErr = "性別是必選的"; } else { $gender = test_input($_POST["gender"]); }}function test_input($data) { $data = trim($data); $data = stripslashes($data); $data = htmlspecialchars($data); return $data;}?><p><span class="error">* 必需的欄位</span></p><form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"> 姓名：<input type="text" name="name" value="<?php echo $name;?>"> <span class="error">* <?php echo $nameErr;?></span> <br><br> 電郵：<input type="text" name="email" value="<?php echo $email;?>"> <span class="error">* <?php echo $emailErr;?></span> <br><br> 網址：<input type="text" name="website" value="<?php echo $website;?>"> <span class="error"><?php echo $websiteErr;?></span> <br><br> 評論：<textarea name="comment" rows="5" cols="40"><?php echo $comment;?></textarea> <br><br> 性別： <input type="radio" name="gender" <?php if (isset($gender) && $gender=="female") echo "checked";?> value="female">女性 <input type="radio" name="gender" <?php if (isset($gender) && $gender=="male") echo "checked";?> value="male">男性 <span class="error">* <?php echo $genderErr;?></span> <br><br> <input type="submit" name="submit" value="提交"> </form></body></html>
深入理解ajax系列第八篇
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
