表格(HTML – FORM)
靜態網頁 vs 動態網頁 靜態網頁 動態網頁 互動 沒有輸入 背後有程序 背後沒有程序 沒有表格(FORM) 有表格(FORM)
表格 - FORM <FORM> 表格的開始 <INPUT> 提供輸入的方式給使用者
文字方塊 Syntax: <FORM> Name:<INPUT TYPE="TEXT" NAME="NAME" SIZE="20"> </FORM> 顯示:
密碼 顯示: Syntax: <FORM> Password:<INPUT TYPE="PASSWORD" NAME="INPUT"> </FORM> 顯示:
單選按鈕 Syntax: 顯示: <FORM> Class: <INPUT TYPE="RADIO" NAME="cls" VALUE="6A">6A <INPUT TYPE="RADIO" NAME="cls" VALUE="6S">6S </FORM> 顯示:
多選按鈕 Syntax: 顯示: <FORM> Hobbies: <INPUT TYPE="CHECKBOX" NAME="FISH">FISHING <INPUT TYPE="CHECKBOX" NAME="BOOK">READING </FORM> 顯示:
下拉選單 Syntax: 顯示: <FORM> Your favorite color: <SELECT NAME="LIKE"> <OPTION VALUE="red">RED <OPTION VALUE="green">GREEN <OPTION VALUE="blue">BLUE </SELECT> </FORM> 顯示:
按鈕 Syntax: 顯示: <FORM> <INPUT TYPE="BUTTON" NAME="OK" VALUE="Agree"> <INPUT TYPE="BUTTON" NAME="OK" VALUE="Disagree"> </FORM> 顯示:
提交 / 重設按鈕 Syntax: 顯示: <FORM> <INPUT TYPE="SUBMIT" VALUE="submit"> <INPUT TYPE="RESET" VALUE="reset"> </FORM> 顯示:
動作(ACTION) 表格若沒有動作是沒有意義的,因為處理輸入數據是由“ACTION”指定的程序執行。 <FORM name="test" action="javascript:cal()" method="post"> <FORM name="test" action="guess.php" method="post">
用戶端執行(Client Side Script) . 提交要求 . 處理要求 . 顯示答案
伺服器端執行(Server Side Script) 1. 提交要求 2. 處理要求 3. 回應答案
用戶端執行(Client Side Script) <HTML> Currency Exchange:<br> <FORM name="test" action="javascript:cal()" method="post"> Money in US$:<input type = "text" name="us"> <input type = "Submit" value="Submit"><br> Money in HK$:<input type = "text" name="hk"> </FORM> <script> function cal() { document.test.hk.value=document.test.us.value*7.8; } </script> </HTML>
伺服器端執行(Server Side Script) <HTML> Currency Exchange:<br> <FORM name="test" action="cal.php" method="post"> Money in US$:<input type = "text" name="us"> <input type = "Submit" value="Submit"><br> </FORM> </HTML> cal.php <? echo "Money in HK$:" ,$us*7.8; ?>
用戶端執行的優點 減少伺服器的負擔 減少網絡的負擔
伺服器端執行的優點 隱藏程序 可存取伺服器的數據庫
METHOD屬性 有POST和 GET 兩種。 以POST方法送交，是先傳送網址，然後才傳送數據。數據以一組形式傳送，不會在網址欄位內顯示。