Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML 103 互動式網頁 助教:黃毓瑩.

Similar presentations


Presentation on theme: "HTML 103 互動式網頁 助教:黃毓瑩."— Presentation transcript:

1 HTML 103 互動式網頁 助教:黃毓瑩

2 1. 表單的建立-1 啟動 Microsoft Frontpage,插入【表單】

3 1. 表單的建立-2 一直按【Enter】,將 『提交』與『重新設定』往下推。
將游標移至表單最上方,key in 《姓名:》,執行右圖的指令

4 1. 表單的建立-3 上述步驟後的結果會如下圖所示。

5 1. 表單的建立-4 點選方才建立的單行方字方塊,按滑鼠右鍵 點選【表單欄位內容】

6 1. 表單的建立-5 將預設的“T1”改為“name”,以方便與其他欄位的區別 【字元寬度】之調整,可以變更欄位顯示寬度的大小

7 1. 表單的建立-6 將FrontPage的呈現方式由【一般】切換成【HTML】

8 1. 表單的建立-6 HTML語言如下: <p>姓名:<input type="text" name="name" size="20"></p> <p>電子信箱:<input type="text" name=" " size="20"></p> 規則為: <INPUT TYPE=text NAME=欄位名稱 SIZE=欄位顯示寬度>

9 1. 表單的建立-7 整個文字方塊的建立如下: <HTML> <HEAD>
<TITLE> 互動式網頁 - 範例一 </TITLE> </HEAD> <BODY> <FORM> 姓名:<INPUT TYPE=text NAME=name> <BR> 電子信箱:<INPUT TYPE=text NAME= > <BR> </FORM> </BODY> </HTML>

10 1. 表單的建立-8 上述的說明乃是“表單的欄位”,是要讓人填資料用的。 另外還有兩種“決策型欄位”,
<INPUT TYPE=submit VALUE=按鈕的顯示文字> <INPUT TYPE=reset VALUE=按鈕的顯示文字> 例如: <p> <input type="submit" value="提交" name="B1"><input type="reset" value="重新設定" name="B2"></p>

11 1. 表單的建立-9 做完後,存成“xxx. html”,並將該檔案放入你的web資料夾中

12 2. PHP (Personal Home Page)
PHP 開發之時,即是以處理網頁之表單為目標,是一種伺服器端的 Script 語言。

13 2. PHP -2 用 PHP 進行表單資料處理 <?php $name=$_POST['name'];
$ =$_POST[' ']; echo "<HTML> \n"; echo "<HEAD> \n"; echo "<TITLE> 中山企管 管理資訊系統 網路商店 $name 的留言</TITLE> \n"; echo "<META HTTP-EQUIV=\"Content-Type\" CONTENT=\"text/html; charset=big5\"> \n"; echo "</HEAD> \n\n"; echo "<BODY> \n"; echo " $name 謝謝您! &nbsp &nbsp 我們已經接到您的留言。 <BR> <BR> \n"; echo " 您所留的資料是:<BR> \n"; echo " 姓名: $name <BR> \n"; echo " 電子信箱: $ <BR> \n"; echo "</BODY> </HTML> \n";  ?>

14 2. PHP -3 開啟記事本,將上述文字複製貼上,並另存新檔為“xxx.php”(注意,此處要更改檔案類型), xxx 的意思是它必需和你前面做的“xxx. html”檔名是相同的

15 2. PHP -4 關於字串的處理:回到FrontPage下的xxx. html 將xxx.html與 xxx.php一起上傳至server
<FORM METHOD=post ACTION=xxx.php > 姓名:<INPUT TYPE=text NAME=name> <BR> 電子信箱:<INPUT TYPE=text NAME= > <BR> <INPUT TYPE=submit VALUE=留言> <INPUT TYPE=reset VALUE=清除> </FORM> 將xxx.html與 xxx.php一起上傳至server

16 完整範例(1)

17 完整範例(2)-系統回應

18 2. PHP -5 將資料email給自己:接續剛才的php語言
echo "</BODY> </HTML> \n"; $mailto =   $subject = “網路商店 顧客的留言”;  ( 的主旨)   $message = "姓名: $name \n"; $message .= "電子信箱: $ \n"; (注意 這裡的運算子是 .= (dot equal)) $sender = "From: \"$name\" $ "; mail($mailto, $subject, $message, $sender); ?>

19 3. 參考範本-1

20 3. 參考範本-2

21 3. 參考範本-3


Download ppt "HTML 103 互動式網頁 助教:黃毓瑩."

Similar presentations


Ads by Google