Download
1 / 20
200 likes | 319 Vues
HTML 103 互動式網頁. 1. 表單的建立 -1. 啟動 Microsoft Frontpage ，插入 【 表單 】. 1. 表單的建立 -2. 一直按 【Enter】 ，將 『 提交 』 與 『 重新設定 』 往下推。 將游標移至表單最上方， key in 《 姓名： 》 ，執行右圖的指令. 1. 表單的建立 -3. 上述步驟後的結果會如下圖所示。. 1. 表單的建立 -4. 點選方才建立的單行方字方塊，按滑鼠右鍵 點選 【 表單欄位內容 】. 1. 表單的建立 -5. 將預設的“ T1” 改為“ name” ，以方便與其他欄位的區別
E N D
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="B1"><input 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> <p>email:<input type="text" name="email" size="20"></p> <p></p> <p></p> <p><input type="submit" value="送出" name="B1"><input 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=\"Content-Type\" CONTENT=\"text/html; charset=big5\"> \n"; echo "</HEAD> \n\n"; echo "<BODY> \n"; echo " $name 謝謝您！    我們已經接到您的留言。 <BR> <BR> \n"; echo " 您所留的資料是：<BR> \n"; echo " 姓名： $name <BR> \n"; echo " 電子信箱： $email <BR> \n"; echo "</BODY> </HTML> \n"; ?>
2. PHP -5 • 將資料email給自己：接續剛才的php語言 echo "</BODY> </HTML> \n"; $mailto = “kuo@bm.nsysu.edu.tw”; （商店主的e-mail） $subject = “網路商店 顧客的留言”; （e-mail的主旨） $message = "姓名： $name \n"; $message .= "電子信箱： $email \n"; （注意 這裡的運算子是 .= (dot equal)） $sender = "From: \"$name\" $email "; mail($mailto, $subject, $message, $sender); ?>
完整範例 <?php $name=$_POST['name']; $email=$_POST['email']; 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 謝謝您！     我們已經接到您的留言。 <BR> <BR> \n"; echo " 您所留的資料是：<BR> \n"; echo " 姓名： $name <BR> \n"; echo " 電子信箱： $email <BR> \n"; echo "</BODY> </HTML> \n"; $mailto = "ashaly222@gmail.com,venter222@gmail.com"; $subject = "網路商店 顧客的留言"; $message = "姓名：$name \n"; $message .= "電子信箱：$email \n"; $message .= "謝謝！\n"; $sender = "From: \"$name\" $email "; mail($mailto, $subject, $message, $sender); ?>
2. PHP -3 • 開啟記事本，將上述文字複製貼上，並另存新檔為“xxx.php”（注意，此處要更改檔案類型）， xxx 的意思是它必需和你前面做的“xxx. html”檔名是相同的
