HTML103互动式网页教学课件.pptVIP

* * * * * * * * * HTML 103 互動式網頁 1. 表單的建立-1 啟動 Microsoft Frontpage，插入【表單】 1. 表單的建立-2 一直按【Enter】，將 『提交』與『重新設定』往下推。 將游標移至表單最上方，key in 《姓名：》，執行右圖的指令 1. 表單的建立-3 上述步驟後的結果會如下圖所示。 1. 表單的建立-4 點選方才建立的單行方字方塊，按滑鼠右鍵 點選【表單欄位內容】 1. 表單的建立-5 將預設的“T1”改為“name”，以方便與其他欄位的區別 【字元寬度】之調整，可以變更欄位顯示寬度的大小 1. 表單的建立-6 將FrontPage的呈現方式由【一般】切換成【HTML】 1. 表單的建立-6 HTML語言如下： p姓名：input type=text name=name size=20/p p電子信箱：input type=text name=email size=20/p 規則為： INPUT TYPE=text NAME=欄位名稱 SIZE=欄位顯示寬度 1. 表單的建立-7 整個文字方塊的建立如下： HTML HEAD TITLE 互動式網頁 - 範例一 /TITLE /HEAD ? BODY FORM 姓名：INPUT TYPE=text NAME=name BR 電子信箱：INPUT TYPE=text NAME=email BR /FORM /BODY /HTML 1. 表單的建立-8 上述的說明乃是“表單的欄位”，是要讓人填資料用的。 另外還有兩種“決策型欄位”， INPUT TYPE=submit VALUE=按鈕的顯示文字 INPUT TYPE=reset VALUE=按鈕的顯示文字 例如： p input type=submit value=提交 name=B1input type=reset value=重新設定 name=B2/p 2. PHP -4 關於字串的處理：回到FrontPage下的xxx. html FORM METHOD=post ACTION=xxx.php 姓名：INPUT TYPE=text NAME=name BR 電子信箱：INPUT TYPE=text NAME=email BR INPUT TYPE=“submit” VALUE=留言 INPUT TYPE=“reset” VALUE=清除 /FORM 將xxx.html與 xxx.php一起上傳至server 1. 表單的建立-9 做完後，存成“xxx. html”，並將該檔案放入你的web資料夾中 html head meta http-equiv=Content-Language content=zh-tw meta http-equiv=Content-Type content=text/html; charset=big5 title姓名/title /head body form method=POST action=xxx.php !--webbot bot=SaveResults U-File=_private/form_results.csv S-Format=TEXT/CSV S-Label-Fields=TRUE startspan --input TYPE=hidden NAME=VTI-GROUP VALUE=0!--webbot bot=SaveResults i-checksum=43374 endspan -- p姓名:input type=text name=name size=20/p p　/p pemail:input type=text name=email size=20/p p　/p p　/p pinput type=submit value=送出 name=B1input type=reset value=重新設定 name=B2/p /form /body /html 完整範例 2. PHP (Personal Home Page) PHP 開發之時，即是以處理網頁之表單為目標，是一種伺服器端的 Script 語言。 2. PHP -2 用 PHP 進行表單資料處理 ?php $name=$_POST[name]; $email=$_POST[email]; echo HTML \n; echo HEAD \n; echo TITLE 中山企管 管理資訊系統 網路商店 $name 的留言/TITLE \n; echo META HTTP-EQUIV=\Conte