Download presentation
Presentation is loading. Please wait.
1
表格(HTML – FORM)
2
靜態網頁 vs 動態網頁 靜態網頁 動態網頁 互動 沒有輸入 背後有程序 背後沒有程序 沒有表格(FORM) 有表格(FORM)
3
表格 - FORM <FORM> 表格的開始 <INPUT> 提供輸入的方式給使用者
4
文字方塊 Syntax: <FORM> Name:<INPUT TYPE="TEXT" NAME="NAME" SIZE="20"> </FORM> 顯示:
5
密碼 顯示: Syntax: <FORM>
Password:<INPUT TYPE="PASSWORD" NAME="INPUT"> </FORM> 顯示:
6
單選按鈕 Syntax: 顯示: <FORM> Class:
<INPUT TYPE="RADIO" NAME="cls" VALUE="6A">6A <INPUT TYPE="RADIO" NAME="cls" VALUE="6S">6S </FORM> 顯示:
7
多選按鈕 Syntax: 顯示: <FORM> Hobbies:
<INPUT TYPE="CHECKBOX" NAME="FISH">FISHING <INPUT TYPE="CHECKBOX" NAME="BOOK">READING </FORM> 顯示:
8
下拉選單 Syntax: 顯示: <FORM> Your favorite color:
<SELECT NAME="LIKE"> <OPTION VALUE="red">RED <OPTION VALUE="green">GREEN <OPTION VALUE="blue">BLUE </SELECT> </FORM> 顯示:
9
按鈕 Syntax: 顯示: <FORM>
<INPUT TYPE="BUTTON" NAME="OK" VALUE="Agree"> <INPUT TYPE="BUTTON" NAME="OK" VALUE="Disagree"> </FORM> 顯示:
10
提交 / 重設按鈕 Syntax: 顯示: <FORM>
<INPUT TYPE="SUBMIT" VALUE="submit"> <INPUT TYPE="RESET" VALUE="reset"> </FORM> 顯示:
11
動作(ACTION) 表格若沒有動作是沒有意義的,因為處理輸入數據是由“ACTION”指定的程序執行。
<FORM name="test" action="javascript:cal()" method="post"> <FORM name="test" action="guess.php" method="post">
12
用戶端執行(Client Side Script)
. 提交要求 . 處理要求 . 顯示答案
13
伺服器端執行(Server Side Script)
14
用戶端執行(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>
15
伺服器端執行(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; ?>
16
用戶端執行的優點 減少伺服器的負擔 減少網絡的負擔 結構較簡單
17
伺服器端執行的優點 隱藏程序 可存取伺服器的數據庫
Similar presentations
