使用 PHP 接收表單資料
一般的網頁設計書籍,在教製作表單的時候,只會教妳如何製作精美的表單出來,但很少會教怎麼接收表單的資料,不過取而代之的是,有些書會教妳其他的替代方案,例如使用 Google 表單,並將表單遷入至網頁內,當然網路上還能找到很多的表單服務;相反的,網頁程式設計的書,會教你怎麼接收表單資料,可是做出來的表單卻很醜!
今天要來教妳,如何使用 PHP 來接收表單的資料!而如果想要學會製作精美的表單,可以買網頁設計的書籍來學,以下兩本是我非常推薦的,精美、簡單、易學!!!
書名:HTML5‧CSS3 最強圖解實戰講座 【第二版】
書名: 網頁美編的救星!零基礎也能看得懂的 HTML & CSS 網頁設計
那麼接著,請跟著以下的教學開始實作。
1. 開啟記事本,並輸入以下 HTML 標籤:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>聯絡我們 - GET 方式傳送範例</title>
</head>
<body>
</body>
</html>
輸入完後請先存檔,檔名為:contact_GET.html
P.S. 表單的傳送方式有兩種,分別為 GET 和 POST:
使用 GET 方式傳送資料,資料會顯示在網址列,不同欄位的資料會用 & 符號隔開,像之前教過的,使用 App Inventor 將資料寫入 Google 試算表那樣。
使用 POST 方式傳送資料,資料會以放置在 HTML 標頭的方式傳送,在網址列我們就看不到資料內容。
在接收資料時,如果是 GET 方法傳送的,就要用 $_GET[“欄位名稱”] 來接收資料。如果是 POST 方法,就要用 $_POST[“欄位名稱”] 接收。
這兩個也都能用 $_REQUEST[” 欄位名稱 “] 來接收資料
接著將以下 form 表單標籤 填入至 body 標籤裡
<form method="GET" action="contact_GET.php">
您好!請問您是 <input type="text" name="name" required> 先生/小姐?
<br><br>
請選擇您要詢問的商品項目 (可複選)<br>
<select name="product[]" size="3" multiple="multiple">
<option value="茉香綠茶">茉香綠茶</option>
<option value="古早味紅茶">古早味紅茶</option>
<option value="阿薩姆紅茶">阿薩姆紅茶</option>
</select>
<br><br>
<input type="submit" value="傳送">
</form>
form 標籤裡的 method 參數,填入要以什麼方法傳送,現在這個範例是用 GET 方式、action 參數為,當表單按傳送後,要跑到什麼網頁,這裡請填 contact_GET.php,這是等等要接收表單資料的檔案。
P.S. 雖然 HTML 檔案,用滑鼠點兩下就可以執行,但是現在按傳送資料會失敗!
其中一個原因是,因為現在接收的檔案還沒寫,而且 XAMPP 也還沒開;
第二個主要的原因是,用滑鼠點兩下開啟網頁後,會發現網址列為「file:///C:/htdocs/contact_GET.html」,如果直接按傳送資料,接著開啟的 PHP 檔案,網址列就會是「file:///C:/htdocs/contact_GET.php?name=JB&……」。
有沒有發現,前面一樣會是 file:///C:/htdocs/ 妳的檔案路徑,但 PHP 檔案是無法這樣執行的,所以等等要開啟網頁時,請先將 XAMPP 開啟,執行 Apache 服務後,在網址列輸入「http://localhost/contact_GET.html」來開啟檔案。
input 標籤裡的 type 設為 text,就是文字框型態,name 為欄位名稱,等等傳到 PHP 時,就是要透過這個欄位名稱來接收資料!
required 為一定要填入內容,否則表單無法送出。
<br> 標籤為換行
select 標籤為下拉式選單,不過因為有設定 multiple 跟 size,所以執行後看起來跟下拉式選單不太一樣,因為是設定可以複選的,所以欄位名稱的後面要多加 [],表示為陣列,沒有加的話,它只會傳送妳選擇的最後一筆資料而已喔。
接下來要來撰寫接收表單資料的 PHP 檔案!
2. 新增一個檔案,並輸入以下程式碼:
<?php
$name = $_GET["name"];
$product = $_GET["product"];
echo "您好! " . $name . " 先生/小姐<br><br>";
echo "以下是您選擇的商品:<br>";
foreach($product as $p) {
echo $p . "<br>";
}
?>
PHP 程式要寫在 <?php 和 ?> 裡面
PHP 的變數,前面會加上 $ 符號。
程式一開始先用 $_GET 去抓取表單資料,並分別給變數 name 和 product。
接著再把它們 echo 到網頁上顯示
程式碼到這就撰寫完成了!存檔時副檔名為 .php,存好後就可以執行了。
以 GET 方式傳送,資料會顯示在網址列。
要改成 POST 很簡單,只要把表單的 method 參數改成 POST ,然後在接資料時,也改成 $_POST 即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>聯絡我們 - POST 方式傳送範例</title>
</head>
<body>
<form method="POST" action="contact_POST.php">
您好!請問您是 <input type="text" name="name" required> 先生/小姐?
<br><br>
請選擇您要詢問的商品項目 (可複選)<br>
<select name="product[]" size="3" multiple="multiple">
<option value="茉香綠茶">茉香綠茶</option>
<option value="古早味紅茶">古早味紅茶</option>
<option value="阿薩姆紅茶">阿薩姆紅茶</option>
</select>
<br><br>
<input type="submit" value="傳送">
</form>
</body>
</html>
<?php
$name = $_POST["name"];
$product = $_POST["product"];
echo "您好! " . $name . " 先生/小姐<br><br>";
echo "以下是您選擇的商品:<br>";
foreach($product as $p) {
echo $p . "<br>";
}
?>