就如同我們要搜尋某些資料的時候，會前往 google 網站，或者是其他相關搜尋引擎一樣，我們必須要拿出『關鍵字』， 然後輸入到搜尋引擎網站提供的條列式框框內，按下 [enter] 或搜尋之後，我們所填寫的關鍵字就會被攜帶到搜尋引擎的伺服器， 透過伺服器端自己進行搜尋任務後，將搜尋到的結果以 HTML, CSS 或其他多媒體 (如 youtube) 的方式回傳到瀏覽器上， 這就是一個可以互動的網站流程。

要達到這個流程，有幾個基本步驟得要進行:

• Server 要提供某種功能，讓使用者可以在瀏覽器上面輸入關鍵字，或者是『選擇』或者是『勾選』關鍵資料
• Server 在使用者按下送出後，會將使用者在上一步驟進行的資料，以變數或某種方式取得這些關鍵資料
• Server 在透過這些關鍵資料的判定後，進行某些預設的動作 (程式碼階段)，然後將輸出的結果以 HTML 或某種多媒體方式，回傳給使用者的瀏覽器。 回傳的資料可能是同一個網頁，也可能是另一個新的網頁。

你會發現，幾乎都是 Server 要進行的任務，因此，這些動作我們也經常稱為伺服器端的程式語言 (Server Side Language)，在台灣最常用的可能就是 PHP 以及 .NET 了。

若你需要透過瀏覽器上傳資料到伺服器上，那麼網頁就得要有名為 form 的表單標籤。另外，上傳的資料主要有兩種方法，分別是：

• get：利用字串方式傳送，資料量較小，沒有加密，字串長度被限制在 512bytes 內。
• post：利用封包傳送模式，將資料打包成為封包狀態再傳送出去，除具有保密性之外，還可突破 512bytes 的限制。

此外，如同上面的說明，你上傳的資料是要給哪個檔案來處理？所以，一般來說，form 的常見的屬性有這些：

<form  name="表單名(可忽略)"  action="要將資料上傳到server端的哪個檔案處理"  method="get或post">
....
</form>

大部分傳輸的資訊，主要是透過變數格式將資料上傳的。亦即你在網頁上面設計好變數名稱，讓使用者填寫後勾選變數內容，再將資料送上去。 因此，每個設計的按鈕或填寫的資訊中，都需要有個變數名字 (variable name) 來代表用戶所勾選的資訊。

用來提供使用者輸入參數的標籤中，最常用的就是 input 這個標籤。這個標籤可用的類型非常多！在這個小節我們先拿 type="text" 來做說明。 當你使用了上述的類型，還必須要指定這個輸入資料的『變數名稱』才行。一般常見的屬性有：

• input 屬性為 type="text" 時，常見的屬性設定：
  • name="var" ：就是輸入變數名稱
  • value="content" ：你可以提供一個『預設值』喔！就是打開瀏覽器預設幫你輸入好的一些資料
  • placeholder="顯示提示資訊" ：跟 value 不一樣，這個值會顯示在框框內，但是當使用者輸入任何資料後，這些資訊就會消失。

如果你的 name 設定為 var，而使用者在框框內輸入 abc 時，那麼在 server 上就會有『 $var = "abc" 』的資料可用喔！

但是，資料總是需要送出吧！這時就需要 type="submit" 的使用了！

• input 屬性為 type="submit" 時，常見的屬性設定：
  • value="按鈕上面顯示的文字"

例題:11.1-1:建立一個簡單的方塊式表單，提供使用者單純輸入姓氏與名字方塊，並提供上傳按鈕

• 建立名為 unit11-1-1.php的檔案
• 建立一個表單，且表單使用的上傳方式為get，表單上傳的檔名為unit11-1-1-get.php，表單的名稱為 myform
• 表單裡面建立一個名為 myname1 的 text 類型輸入框，且顯示『你的姓氏』資料，使用 placeholder 功能，在輸入框內預顯示『王』
• 表單裡面建立一個名為 myname2 的 text 類型輸入框，且顯示『你的名字』資料，使用 placeholder 功能，在輸入框內預顯示『小明』
• 表單裡面建立一個 submit 按鈕，文字顯示『開始上傳資料』
• 做完在index首頁新增連結

完成結果會有點像這樣:

注意看，檔名會變成unit11-1-1-get.php，而且後面會加上變數的設定在網址列上面，這就是GET的傳輸方式。通常沒有重要資料的畫面才能使用GET方式，否則許多資料會出現在網址列上面，這是不安全的

讓我們開始來處理 unit11-1-1-get.php 的檔案內容吧！

例題:11.2-1：取得GET表單的內容，並且顯示到網頁上

• 建立一個新檔案名叫 unit11-1-1-get.php，將程式碼寫入body內
• 因為是GET的方法，所以直接透過 $_GET['var']來處理

  // 一般用來讀取前一個檔案傳來的表單資料，大多使用底下的方式來擷取的喔！
  $var = $_GET['var'];
  								

• 在 body 內容中，透過嵌入式語法，以 echo 的方式，將抓到的資料顯示出來。

完成結果會像這樣:

你可以從網址列將變數資料抓下來，不過，事實上還是不要將資料貼到網址列應該是比較好的。那如何處理？ 事實上，直接將 form 的 method 改成 post 即可喔！相當簡單！

同樣的，我們使用例題 11.1-1 的方案來處理，直接設計一下題目即可：

例題11.2-3:改用 post 方法，同時增加確認輸入的 required 功能

• 將unit11-1-1.php另存成 unit11-2-3.php
，然後進行修改
• 將表單的方法從 get 改成 post 狀態
• 將表單的上傳接收檔名改成unit11-2-3-get.php
• 將姓氏的 input 標籤內容中，增加一個『required="required"』的內容，增加判斷
• 做完在index首頁新增連結

完成有點像這樣:

POST 表單資料的取得就不是 $_GET 來處理，而是 $_POST 來處理。如果不想要知道是哪一種表單資料，直接以 $_REQUEST 來處理也行！

例題11.2-4.php:取得 POST表單資料

• 將 unit11-1-1-get.php 另存新檔為unit11-2-3-get.php，然後進行修改
• 將最上方的 GET 取得方法中，第一個以 POST 取代，另一個以 REQUEST 取代

回到網頁，將unit11-2-3.php 的資料填寫完畢後，直接按下上傳，看看處理的結果如何:

如果你需要使用者輸入密碼欄位，倘若還使用 type="text" 時，密碼會被看光光。那怎辦？很簡單！ 我們就將密碼變成特殊符號，如小數點或者是星號之類的，那就搞定了！這就得要用到 type="password" 的功能囉！

例題11.3-1:製作密碼輸入欄位

• 將unit11-2-3.php 另存新檔為 unit11-3-1.php，然後進行修改
• 表單上傳的檔名改為 unit11-3-1-get.php
• 加入兩個變數，分別是 mypass1 以及 mypass2，使用的 type類型就是 "password"
• input標記內部需要有 required="required" 的設計
• 修改 submit類型，將顯示的資料改為『上傳我的密碼』
• 做完在index首頁新增連結

完成結果會像這樣:

例題11.3-2:製作密碼輸入欄位

• 將 /www/php/unit11-2-3-get.php 另存新檔為 unit11-3-1-get.php，然後進行修改
• 將最上方修改成以 mypass1 等由上個例題傳來的兩個密碼
• 將密碼顯示到螢幕上

回到網頁，將 unit11-3-1.php 的資料填寫完畢後，直接按下上傳，看看處理的結果如何：

做完後會發現密碼是出現明碼，這樣是不太好的，通常密碼不應該讓自己以外的人知道，就算是網頁管理員也是。所以我們應該要將密碼加密後再上傳到資料庫會比較好。

那麼如何針對密碼明文加密呢？透過 PHP 的運算函式庫即可。基本上建議直接使用 sha256 這個密碼加密機制，然後透過 hash() 函式即可。 更多加密的演算法不在本文的介紹範圍內，而且，除非是惡意網站，否則，使用 sha256 應該稍微可以滿足大家對於密碼紀錄的需求了！

$pw1 = hash('sha256', "$_POST['pw1']");

這樣就可以推算出你的密碼，此時這串加密過的資料就可以放在資料庫，或者是暫時記憶到程式碼當中。由於資料庫要後續才會提到， 因此，在底下的練習當中，我們將密碼藏在程式碼當中，當然，這個密碼是加密過的！然後，透過讓使用者輸入帳號與密碼， 來判斷使用者輸入的資訊是否為正確。

例題11.3-3:取得密碼資料-加密過

• 新增一個檔案名為 unit11-3-3.php
• 跟上面的例題一樣新增密碼輸入框，然後上傳到名為 unit11-3-3-get.php的檔案
• 將密碼顯示在螢幕上
• 再下面增加兩行顯示密碼的加密結果，並將結果與明碼資料一起顯示到螢幕上

到 unit11-3-3.php 的資料填寫完後，按下上傳，看看處理結果。

如果你要讓人家寫一些文件類型的資料，那就不能單純使用 input 標記的 text 類型啊～因為只能一行，太少了！ 那怎辦？這時就得要使用 textarea 的類型才行！一般來說， textarea 標記的資料，大致上是這樣的：

<textarea name="mytxt" style="width: 95%; height: 10em ">
寫些資料
<textarea>

例題 11.4-1:測試大量留言的文件資料

• 建立一個名為 unit11-4-1.php
• 使用 post 表單，同時上傳檔名改為 unit11-4-1-get.php
• 使用一個 input 的 type="text" 類型方框，變數名稱 mytitle，且長度為 95% 的長度樣式
• 使用一個 textarea 的大量留言，變數名稱為 mytxt，樣式長度 95% 且高為 10em (行)
• 使用一個 sumbit ，內容為『傳送留言』
• 做完在index首頁新增連結

例題 11.4-2:將大量的資料顯示到螢幕上

• 建立一個名為 unit11-4-1-get.php
• 利用 $_REQUEST 的方式，將主旨與內容通通抓下來
• 透過 div 等方式，將資料格式化輸出到螢幕上。

到 unit11-4-1.php 的資料填寫完後，按下上傳，看看處理結果。

有的時候，我們會需要使用者填寫單選項的資料，例如性別的選擇等等。但是因為就只有幾個選項而已，因此不太想讓使用者輸入， 而是希望類似選擇題，讓使用者直接點選即可。這時就用到單選功能的項目了：

<label><input type="radio" name="gender" value="male" /> 男生</label>
<label><input type="radio" name="gender" value="female" /> 女生</label>
<label><input type="radio" name="gender" value="unknown" /> 不便告知</label>

例題11.5-1:設計單選項目

• 建立一個新檔案名為 unit11-5-1.php
• 建立使用 post 為主的表單，上傳的檔案位置到 unit11-5-1-get.php,表單名為 myform
• 建立一個名為 gender 變數名稱的單選，內容分別為 male(男生)、female(女生)、nuknown(不方便告知) 三個項目
• 建立一個名為 『上傳』的 submit按鈕
• 做完記得在首頁建立連結

完成後會像這樣:

有個問題，這個選擇一定要勾選到小圓圈才會有效果！能不能點選到『男生』的文字上面就可以了？使用 <label> </label> 將需要處理的項目整個圈選起來，就可以組合成為一個集合的效果！

完成的結果跟之前一樣，只是點選時可以點選文字即可單選

例題 11.5-3:將單選項目抓下來

• 將unit11-4-1-get.php轉存為unit11-5-1-get.php
• 利用$_REQUEST的方式，將gender變數抓下來
• 將選擇的性別輸出到螢幕上

回到網頁，將unit11-5-2.php 的資料填寫完畢後，直接按下上傳。

有時候，我們需要的資料會是『複選』的模樣！就是多選題啦！不是單選而已。這時候就需要 checkbox 來處理了。那麼 checkbox 的語法如何呢？ 也不難，這樣做看看：

<input type='checkbox' name='myfood[]' value='麥當當' />麥當當

一般來說，複選會使用到『陣列』的機制，陣列在 HTML 裡面必需要加上中括號[]才行！不過 PHP 裡面倒是不需要加上中括號。 現在，讓我們來選擇一下，你可能會有興趣的餐點項目：

例題11.6-1:選擇複選的功能

• 建立一個新檔名為 unit11-6-1.php
• 使用post為主的表單，上傳檔案使用unit11-6-1-get.php，表單名稱 myform
• 以上面的語法，建立名為 myfood[]的變數名稱，用在單選上面。value與顯示名稱的對應，請寫下至少5個以上的餐點，同時使用 label 放大選擇範圍
• 建立一個名為『上傳』的 submit按鈕
• 做完在首頁建立一個連結

完成後會像這樣:

複選的 HTML 原始碼如上，還算簡單啊！但是怎麼抓出來資料呢？這就是個大問題！基本上，抓取下來的變數資料， 其實是『陣列』。 因為我們需要用迴圈列出我們所選的東西，假設說我們選擇3樣東西，那就讓迴圈跑3次列出內容。 那要怎麼知道我們總共有選幾樣東西呢? 就必須要用到 count() 這個函數。

count($arrayname);

那就直接來測試一下，將資料抓下來吧！

例題11.6-2:將複選項目抓下來

• 將unit11-5-1-get.php轉存為 unit11-6-1-get.php
• 利用 $_REQUEST 的方式，將 myfood 變數抓下來，特別記得，在 html 裡面變數名稱有 myfood[]，但是在 php 裡面，必需要取消中括號才對喔！
• 在變數取得後，使用『 $nu = count($myfood) 』計算出圈選的個數
• 利用迴圈列出所選的內容

回到網頁將unit11-6-1.php的資料填寫完畢後，直接按下上傳看看結果:

有時候，某些『單選』的資料量太龐大，如果將所有的單選資料全部列出在同一個畫面上，似乎很混亂！而且，版面的排版也容易跑掉，醜醜的。 這個時候，使用下拉式選單來替換單選的項目，應該是還不錯的選擇。我們可以透過 select 搭配 option 來處理這樣的事情即可！ 他的基本語法是這樣的：

<select name="myselect">
	<option value="value1">value1</option>
	<option value="value2">value2</option>
	<option value="value3">value3</option>
</select>

例題 11.7-1:使用下拉式選單的單選功能

• 建立一個名為 unit11-7-1.php的檔案
• 使用post為主的表單，上傳檔案使用 unit11-7-1-get.php，表單名稱為 myform
• 建立名為 mylang 的變數名稱的 select 標記資料
• 建立三種以上的常用語言與數值，包括中文、英文、日文、韓文等
• 建立一個『上傳』的 submit 按鈕。
• 做完在首頁建立一個連結

完成後會像這樣:

將資料抓下來

例題 11.7-2:將單選項目抓下來

• 將 /www/php/unit11-6-1-get.php 轉存成為 unit11-7-1-get.php
• 利用 $_REQUEST 的方式，將 mylang 變數抓下來
• 螢幕上顯示出你選擇的語言

回到網頁，將 unit11-7-1.php 的資料填寫完畢後，直接按下上傳看看結果