Presentation is loading. Please wait.

Presentation is loading. Please wait.

表格(HTML – FORM).

Similar presentations


Presentation on theme: "表格(HTML – FORM)."— Presentation transcript:

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)
1. 提交要求 2. 處理要求 3. 回應答案

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 伺服器端執行的優點 隱藏程序 可存取伺服器的數據庫

18 METHOD屬性 有POST和 GET 兩種。 以POST方法送交,是先傳送網址,然後才傳送數據。數據以一組形式傳送,不會在網址欄位內顯示。


Download ppt "表格(HTML – FORM)."

Similar presentations


Ads by Google