Html 103
This presentation is the property of its rightful owner.
Sponsored Links
1 / 20

HTML 103 互動式網頁 PowerPoint PPT Presentation


  • 74 Views
  • Uploaded on
  • Presentation posted in: General

HTML 103 互動式網頁. 1. 表單的建立 -1. 啟動 Microsoft Frontpage ,插入 【 表單 】. 1. 表單的建立 -2. 一直按 【Enter】 ,將 『 提交 』 與 『 重新設定 』 往下推。 將游標移至表單最上方, key in 《 姓名: 》 ,執行右圖的指令. 1. 表單的建立 -3. 上述步驟後的結果會如下圖所示。. 1. 表單的建立 -4. 點選方才建立的單行方字方塊,按滑鼠右鍵 點選 【 表單欄位內容 】. 1. 表單的建立 -5. 將預設的“ T1” 改為“ name” ,以方便與其他欄位的區別

Download Presentation

HTML 103 互動式網頁

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Html 103

HTML 103 互動式網頁


Html 103

1. 表單的建立-1

  • 啟動 Microsoft Frontpage,插入【表單】


Html 103

1. 表單的建立-2

  • 一直按【Enter】,將 『提交』與『重新設定』往下推。

  • 將游標移至表單最上方,key in 《姓名:》,執行右圖的指令


Html 103

1. 表單的建立-3

  • 上述步驟後的結果會如下圖所示。


Html 103

1. 表單的建立-4

  • 點選方才建立的單行方字方塊,按滑鼠右鍵

  • 點選【表單欄位內容】


Html 103

1. 表單的建立-5

  • 將預設的“T1”改為“name”,以方便與其他欄位的區別

  • 【字元寬度】之調整,可以變更欄位顯示寬度的大小


Html 103

1. 表單的建立-6

  • 將FrontPage的呈現方式由【一般】切換成【HTML】


Html 103

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=欄位顯示寬度>


Html 103

1. 表單的建立-7

  • 整個文字方塊的建立如下:

    <HTML>

    <HEAD>

    <TITLE>互動式網頁 - 範例一 </TITLE>

    </HEAD>

    <BODY>

    <FORM>

    姓名:<INPUT TYPE=text NAME=name> <BR>

    電子信箱:<INPUT TYPE=text NAME=email> <BR>

    </FORM>

    </BODY>

    </HTML>


Html 103

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

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


Html 103

1. 表單的建立-9

  • 做完後,存成“xxx. html”,並將該檔案放入你的web資料夾中


Html 103

<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

2. PHP (Personal Home Page)

PHP 開發之時,即是以處理網頁之表單為目標,是一種伺服器端的 Script 語言。


2 php 2

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 謝謝您!&nbsp &nbsp 我們已經接到您的留言。 <BR> <BR> \n";

    echo " 您所留的資料是:<BR> \n";

    echo " 姓名: $name <BR> \n";

    echo " 電子信箱: $email <BR> \n";

    echo "</BODY> </HTML> \n";

     ?>


Html 103

完整範例(1)


Html 103

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


2 php 5

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);

    ?>


Html 103

完整範例

<?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 謝謝您! &nbsp &nbsp 我們已經接到您的留言。 <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

2. PHP -3

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


  • Login