html 103 互動式網頁
DESCRIPTION
HTML 103 互動式網頁. 1. 表單的建立 -1. 啟動 Microsoft Frontpage ，插入 【 表單 】. 1. 表單的建立 -2. 一直按 【Enter】 ，將 『 提交 』 與 『 重新設定 』 往下推。 將游標移至表單最上方， key in 《 姓名： 》 ，執行右圖的指令. 1. 表單的建立 -3. 上述步驟後的結果會如下圖所示。. 1. 表單的建立 -4. 點選方才建立的單行方字方塊，按滑鼠右鍵 點選 【 表單欄位內容 】. 1. 表單的建立 -5. 將預設的“ T1” 改為“ name” ，以方便與其他欄位的區別 - PowerPoint PPT PresentationTRANSCRIPT
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="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"; ?>
完整範例 (1)
完整範例 (2) －系統回應
2. PHP -5
• 將資料 email 給自己：接續剛才的 php 語言 echo "</BODY> </HTML> \n"; $mailto = “[email protected]”; （商店主的 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 = "[email protected],[email protected]";
$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” 檔名是相同的