Microsoft PowerPoint - ch07_1.ppt

Size: px

Start display at page:

Download "Microsoft PowerPoint - ch07_1.ppt"

原榆夫
5 years ago
Views:

1 表單

2 7-1 認識表單表單的建立可以分成三個階段 : 一決定要蒐集的資料二建立表單三設計表單處理程式

3 單行文字方塊多行文字方塊核取方塊

4 選擇鈕下拉式功能表按鈕密碼欄位

5 7-2 將電腦架設為 Web 伺服器 1.

6 2. 3.

7 7-3 建立表單的輸入介面

8 <FORM>...</FORM> 標籤屬性解說 : ACCEPT-CHARSET="..." ACCEPT="... ACTION="URL ENCTYPE="... METHOD="{GET,POST} NAME="..." TARGET="..." onsubmit="... onreset="..." <FORM>...</FORM> 標籤亦接受 CLASS ID STYLE TITLE LANG DIR onclick ondblclick onmousedown onmouseup onmouseover onmousemove onmouseout onkeypress onkeydown onkeyup 等屬性

9 <INPUT> 標籤屬性解說 : ALIGN="{LEFT,CENTER,RIGHT}" ACCEPT="..." CHECKED DISABLED MAXLENGTH= n NAME="..." NOTAB READONLY SIZE="n" SRC="URL"

10 TABINDEX TYPE="{TEXT,PASSWORD,RADIO,CHECKBOX,SU BMIT,RESET,FILE,IMAGE, HIDDEN,BUTTON}" USEMAP VALUE="..." onfocus="..." onblur="..." onchange="..." onselect="... <INPUT> 標籤亦接受 CLASS ID STYLE TITLE LANG DIR onclick ondblclick onmousedown onmouseup onmouseover onmousemove onmouseout onkeypress onkeydown onkeyup 等屬性

11 7-3-1 插入表單與按鈕 <FORM> <INPUT TYPE="SUBMIT" VALUE=" 提交 "> <INPUT TYPE="RESET" VALUE=" 重新輸入 "> </FORM>

12 <BUTTON>...</BUTTON> 標籤屬性解說 : ACCESSKEY="..." DISABLED NAME="..." TYPE="{SUBMIT,RESET,BUTTON}" VALUE="..." <BUTTON> 標籤亦接受 CLASS ID STYLE TITLE LANG DIR onfocus onblur onclick ondblclick onmousedown onmouseup onmouseover onmousemove onmouseout onkeypress onkeydown onkeyup 等屬性

13 <button type="submit" name="submit"><img src="b1.jpg"></button> <button type="reset" name="reset"><img src="b2.jpg"></button> <button type="button" name="query"><img src="b3.jpg"></button> <button type="submit" name="submit"> 提交 </button> <button type="reset" name="reset"> 重新輸入 </button> <button type="button" name="query"> 查詢 </button>

14 7-3-2 插入單行文字方塊 <FORM> 姓名 :<INPUT TYPE="TEXT" NAME="UserName" SIZE="40"><BR> <INPUT TYPE="TEXT" NAME="UserMail" SIZE="40" </FORM>

15 7-3-3 插入選擇鈕年齡 : <INPUT TYPE="RADIO" NAME="UserAge" VALUE="Age1"> 未滿 20 歲 <INPUT TYPE="RADIO" NAME="UserAge" VALUE="Age2" CHECKED>20~29 此為預設的選項 <INPUT TYPE="RADIO" NAME="UserAge" VALUE="Age3">30~39 <INPUT TYPE="RADIO" NAME="UserAge" VALUE="Age4">40~49 <INPUT TYPE="RADIO" NAME="UserAge" VALUE="Age5">50 歲以上 <BR>

16 7-3-4 插入核取方塊您曾經使用過哪些廠牌的手機? <input type="checkbox" name="userphone" value=" 諾基亞 " checked> 諾基亞 <input type="checkbox" name="userphone" value=" 摩扥羅拉 "> 摩扥羅拉 <input type="checkbox" name="userphone" value=" 易利信 "> 易利信 <input type="checkbox" name="userphone" value=" 華碩 "> 華碩 <br>

17 7-3-5 插入多行文字方塊 <TEXTAREA>...</TEXTAREA> 標籤屬性解說 : ACCESSKEY="..." COLS="n" DISABLED NAME="..." READONLY ROWS="n" TABINDEX onfocus="..." onblur="..." onchange="..." onselect="..." <TEXTAREA> 標籤亦接受 CLASS ID STYLE TITLE LANG DIR onclick ondblclick onmousedown onmouseup onmouseover onmousemove onmouseout onkeypress onkeydown onkeyup 等屬性

18 <TEXTAREA NAME="UserTrouble" COLS="45" ROWS="4"> 線路太忙 </TEXTAREA><BR>

19 7-3-6 插入下拉式功能表 <SELECT>...</SELECT> 標籤屬性解說 : ACCESSKEY="..." MULTIPLE NAME="..." READONLY SIZE="n" TABINDEX onfocus="..." onblur="..." onchange="..." onselect="..."<select> 標籤亦接受 CLASS ID STYLE TITLE LANG DIR onclick ondblclick onmousedown onmouseup onmouseover onmousemove onmouseout onkeypress onkeydown onkeyup 等屬性

20 <OPTION> 標籤屬性解說 : DISABLED SELECTED VALUE="..." <OPTION> 標籤亦接受 CLASS ID STYLE TITLE LANG DIR onfocus onblur onchange onselect onclick ondblclick onmousedown onmouseup onmouseover onmousemove onmouseout onkeypress onkeydown onkeyup 等屬性

21 您使用哪家業者的門號?( 可複選 ) <select name="usernumber" size="4" multiple> <option value=" 中華電信 "> 中華電信 <option value= 台灣大哥大 selected> 台灣大哥大 <option value=" 遠傳 "> 遠傳 <option value=" 威寶 "> 威寶 <option value=" 其它 "> 其它 </select><br>

22 lucky.com.tw&userage=age2&userphone=%bf%d5%b0%f2%a8%c8&userphone=%b5%d8 %BA%D3&UserTrouble=%B9q%A6%C0%AB%DD%BE%F7%AE%C9%B6%A1%A4%A3%B0%F 7%A4%5B&UserNumber=%A5x%C6W%A4j%AD%F4%A4j&UserNumber=%BB%B7%B6%C7

23 7-4 表單的後端處理將表單資料以傳送給指定的收件人如果要將表單資料以傳送給指定的收件人, 可以使用 <form> </form> 標籤的 action 屬性設定收件人的電子郵件地址, 例如 : <FORM METHOD="POST" ACTION="mailto:jeanchen@mail.ht.net.tw">

24 7-4-2 製作確認網頁 <FORM METHOD="POST" ACTION="Confirm.asp">

25 Language=VBScript %> 02:<% Option Explicit %> 03:<% 04: Dim Name, Mail, Age, Phone, Trouble, Number 05: Name=Request("UserName") 06: Mail=Request("UserMail") 07: Select Case Request("UserAge") 08: Case "Age1": 09: Age=" 未滿 20 歲 " 10: Case "Age2": 11: Age="20~29" 12: Case "Age3": 13: Age="30~39" 14: Case "Age4": 15: Age="40~49" 16: Case "Age5": 17: Age="50 歲以上 " 18: End Select

26 19: Phone=Request("UserPhone") 20: Trouble=Request("UserTrouble") 21: Number=Request("UserNumber") 22:%> 23:<HTML> 24: <HEAD> 25: <TITLE> 大哥大使用意見調查表確認網頁 </TITLE> 26: </HEAD> 27: <BODY BACKGROUND="free0.gif"> 28: <P><IMG SRC="free1.jpg"></P> 29: <P><I><%=Name%></I>, 您好! 謝謝您填寫意見調查表, 您輸入的資料如下 :</P> 30: 電子郵件地址 :<%=Mail%><BR> 31: 年齡 :<%=Age%><BR> 32: 曾經使用過的手機廠牌 :<%=Phone%><BR> 33: 使用手機時最常碰到的問題 :<%=Trouble%><BR> 34: 使用哪家業者的門號 :<%=Number%> 35: </BODY> 36:</HTML>

27 7-5 設定密碼欄位 <FORM> 請輸入密碼 :<INPUT TYPE="PASSWORD" NAME="UserPWD" SIZE="10"> <INPUT TYPE="SUBMIT" VALUE=" 提交 "> <INPUT TYPE="RESET" VALUE=" 重新輸入 "> </FORM>

28 7-6 設定隱藏欄位隱藏欄位是在表單上面看不見, 但值 (VALUE) 仍會傳回 Web 伺服器的表單欄位, 例如 : <INPUT TYPE="HIDDEN" NAME="Author" VALUE="JeanChen">

29 7-7 設定檔案上傳 <form> <p> 請上傳您的 gif 圖檔 : <input type="file" name="file" size="20" accept="image/gif,image/jpeg"></p> <input type="submit" value=" 提交 "> <input type="reset" value=" 重新輸入 "> </form>

30 7-8 設定檔案下載 <HTML> <HEAD> <TITLE> 示範檔案下載 </TITLE> </HEAD> <BODY> <A HREF=" 下載 Content.zip</A> </BODY> </HTML>

33 7-9 製作訪客留言簿

34 \Ch7\ 訪客留言簿.htm <HTML> <HEAD> <TITLE> 訪客留言簿 </TITLE> </HEAD> <FRAMESET COLS="*,*"> <FRAME NAME="Left" SRC=" 輸入留言.htm"> <FRAME NAME="Right" SRC=" 顯示留言.asp"> </FRAMESET> </HTML>

35 \Ch7\ 輸入網頁.htm <BODY BACKGROUND="bg1.jpg"> <FORM METHOD="POST" ACTION=" 顯示留言.asp" TARGET="Right"> <P> 您的姓名 :<BR> <INPUT TYPE="TEXT" NAME="UserName" SIZE="35"></P> <P> 您的 <BR> <INPUT TYPE="TEXT" NAME="UserMail" SIZE="35"></P> <P> 您的留言 :<BR> <TEXTAREA NAME="UserMessage" COLS="35" ROWS="7"></TEXTAREA></P> <INPUT TYPE="SUBMIT" VALUE=" 傳送留言 "> <INPUT TYPE="RESET" VALUE=" 清除留言 "> </FORM> </BODY>

36 \Ch7\ 顯示留言.asp Language=VBScript %> 02:<% Option Explicit %> 03:<% 04: Dim Name, Mail, Message 05: Name=Request("UserName") 06: Mail=Request("UserMail") 07: Message=Replace(Request("UserMessage"), vbcrlf, "<BR>") 08:%>

37 09:<HTML> 10: <HEAD> 11: <TITLE> 顯示留言 </TITLE> 12: </HEAD> 13: <BODY> 14: <TABLE WIDTH="100%"> 15: <TR><TD> 姓名 :</TD></TR> 16: <TR><TD BGCOLOR="#FBE0FB"><%=Name%></TD></TR> 17: <TR><TD> </TD></TR> 18: <TR><TD BGCOLOR="#CBFCDA"><%=Mail%></TD></TR> 19: <TR><TD> 留言 :</TD></TR> 20: <TR><TD BGCOLOR="#FFFFC8"><%=Message%></TD></TR> 21: </TABLE> 22: </BODY> 23: </HTML>

38 7-10 將指定的表單欄位框起來 - <FIELDSET> <LEGEND> 標籤

39 <FORM> <FIELDSET> <LEGEND> 個人資料 </LEGEND> 姓名 :<INPUT TYPE="TEXT" NAME="UserName" SIZE="40"><BR> <INPUT TYPE="TEXT" NAME="UserMail" SIZE="40" 年齡 : <INPUT TYPE="RADIO" NAME="UserAge" VALUE="Age2" CHECKED>20~29... </FIELDSET><BR> <FIELDSET> <LEGEND> 手機方面的問題 </LEGEND> 您曾經使用過哪些廠牌的手機?...

40 您使用手機時最常碰到哪些問題?<BR> <TEXTAREA NAME="UserTrouble" COLS="45" ROWS="4"> 線路太忙 </TEXTAREA><BR> 您使用哪家業者的門號?( 可複選 ) <SELECT NAME="UserNumber" SIZE="4" MULTIPLE>... </SELECT><BR> </FIELDSET><BR> <INPUT TYPE="SUBMIT" VALUE=" 提交 "> <INPUT TYPE="RESET" VALUE=" 重新輸入 "> </FORM>

Microsoft PowerPoint - P766Ch09.ppt

Microsoft PowerPoint - P766Ch09.ppt PHP5&MySQL 程式設計第 9 章在網頁之間傳遞資訊 9-1 蒐集網頁上的資訊 9-1-1 建立表單一決定要蒐集的資訊二建立表單三撰寫表單處理程式單行文字方塊多行文字方塊選擇鈕核取方塊下拉式功能表按鈕密碼欄位 ... 標籤 ACCEPT-CHARSET="... CHARSET="... ACCEPT="... ACTION="URL URL"