第8章使用表單創(chuàng)交互網(wǎng)張課件_第1頁(yè)
第8章使用表單創(chuàng)交互網(wǎng)張課件_第2頁(yè)
第8章使用表單創(chuàng)交互網(wǎng)張課件_第3頁(yè)
第8章使用表單創(chuàng)交互網(wǎng)張課件_第4頁(yè)
第8章使用表單創(chuàng)交互網(wǎng)張課件_第5頁(yè)
已閱讀5頁(yè)，還剩56頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

主講：梁光華《HTML網(wǎng)頁(yè)制作》第8章使用表單創(chuàng)建交互網(wǎng)頁(yè)8.1使用表單標(biāo)記form<form>稱為表單標(biāo)記，屬于一個(gè)容器標(biāo)記，表示其它表單標(biāo)記需要在它的包圍中才有效，<INPUT>便是其中的一個(gè)，用以設(shè)定各種輸入資料的方法。它是一個(gè)空標(biāo)記。我們上網(wǎng)時(shí)經(jīng)常需要填寫(xiě)一些用戶信息，在HTML中是通過(guò)表單實(shí)現(xiàn)的。表單使網(wǎng)頁(yè)具有交互功能，在Web頁(yè)中提供表單讓訪問(wèn)者填寫(xiě)，從而獲得用戶信息。表單能夠包含input元素，比如文本字段、復(fù)選框、單選框、提交按鈕等等。表單還可以包含menus、textarea、fieldset、legend

和label元素。表單用于向服務(wù)器傳輸數(shù)據(jù)。8.1.1處理動(dòng)作actionAction標(biāo)記的值是URL規(guī)定當(dāng)提交表單時(shí)，向何處發(fā)送表單數(shù)據(jù)。語(yǔ)法:<formaction=“表單的處理程序”>……</form>實(shí)例代碼:<tablewidth=“600"border=“0”align="center"cellspacing=0cellpadding=0><tr><td><formaction=“mailto:yaoye5ido”></form

></td></tr></table>8.1.2表單名稱namename標(biāo)記用來(lái)為當(dāng)前表單定義一個(gè)獨(dú)一無(wú)二的名稱,該名稱可控制表單與后臺(tái)程序之間的關(guān)系.語(yǔ)法:<formname=“表單名稱”>……</form>實(shí)例:<tablewidth=“600"border=“0”align="center"cellspacing=0cellpadding=0><tr><td><formaction=mailto:yaoye5idoname=“form1”></form

></td></tr></table>8.1.3傳送方法methodMethod標(biāo)記的值是get或post用于規(guī)定如何發(fā)送表單數(shù)據(jù)。語(yǔ)法：<formmethod=“傳送方法”>……</form>method標(biāo)記的屬性值: get將表單內(nèi)容附加在URL地址后面,因此對(duì)提交信息的長(zhǎng)度進(jìn)行了限制,最多不超過(guò)8192個(gè)字符.post將用戶在表單中填寫(xiě)的數(shù)據(jù)包含在表單主體中,一起傳送到服務(wù)器處理程序中,該方法沒(méi)有字符的限制.實(shí)例說(shuō)明:<tablewidth=“600"border=“0”align="center"cellspacing=0cellpadding=0><tr><td><formaction=mailto:yaoye5idomethod=“post”name=“form1”></form

></td></tr></table>8.1.4編碼方式enctypeenctype標(biāo)記用來(lái)設(shè)置表單信息提交的編碼方式.語(yǔ)法：<formenctype=“編碼方法”>……</form>Enctype標(biāo)記的屬性值:text/plain以純文本的形式傳送信息Application/x-www-form-urlencoded默認(rèn)的編碼形式Multipart/form-datemime編碼,上傳文件時(shí)必須選擇該項(xiàng)實(shí)例說(shuō)明:<tablewidth=“600"border=“0”align="center"cellspacing=0cellpadding=0><tr><td><formaction=mailto:yaoye5idomethod=“post”enctype=“Application/x-www-form-urlencoded”name=“form1”></form

></td></tr></table>8.1.5目標(biāo)顯示方式targetTarget標(biāo)記規(guī)定在何處打開(kāi)actionURL。語(yǔ)法：<formtarget=“目標(biāo)窗口的打開(kāi)方式”>……</form>target標(biāo)記的屬性值_blank將返回信息顯示在新打開(kāi)的瀏覽器窗口中_parent將返回信息顯示在父級(jí)瀏覽器窗口中_self將返回信息顯示在當(dāng)前瀏覽器窗口中_top將返回信息顯示在頂級(jí)瀏覽器窗口中實(shí)例代碼:<tablewidth=“600"border=“0”align="center"cellspacing=0cellpadding=0><tr><td><formaction=mailto:yaoye5idomethod=“post”enctype=“Application/x-www-form-urlencoded”name=“form1”target=“_blank”></form

></td></tr></table>8.2插入表單對(duì)象<input>標(biāo)簽用于搜集用戶信息。根據(jù)不同的type屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復(fù)選框、掩碼后的文本控件、單選按鈕、按鈕等等。在網(wǎng)頁(yè)中可以插入的表單對(duì)象包括文本字段、復(fù)選框、單選按鈕、提交按鈕、重置按鈕和圖象域等。在HTML表單中，input標(biāo)記是最常用的表單標(biāo)記，常見(jiàn)的文本字段和按鈕都采用這個(gè)標(biāo)記。語(yǔ)法：<form><inputtype=“表單對(duì)象的名稱”></form>Type屬性的值有(輸入字段擁有的形式):button普通按鈕checkbox復(fù)選按鈕file文件域hidden隱藏域image圖象域password密碼radio單選按鈕

reset重置按鈕submit提交按鈕text文本8.2.1文字字段textText標(biāo)記用來(lái)設(shè)置表單中的單行文本框,在其中可輸入任何類型的文本、數(shù)字或字母，輸入的內(nèi)容以單行顯示。語(yǔ)法：<inputname=“文本字段的名稱”type=“text”value=“文字字段的默認(rèn)取值”size=“文本字段的長(zhǎng)度”maxlength=“最多字符數(shù)”>實(shí)例說(shuō)明:<html><body><form>名：<inputtype="text"name="firstname"><br>姓：<inputtype="text"name="lastname"></form></body></html>8.2.2密碼域password在表單中輸入到密碼域中的文字均以星號(hào)”*”或圓點(diǎn)”?”顯示.語(yǔ)法:<inputname=“密碼域的名稱”type=“password”value=“密碼域的默認(rèn)取值”size=“密碼域的長(zhǎng)度”maxlength=“最多字符數(shù)”>實(shí)例:<html><body><form>用戶：<inputtype="text"name="user"><br>密碼：<inputtype="password"name="password"></form><p>請(qǐng)注意，當(dāng)您在密碼域中鍵入字符時(shí)，瀏覽器將使用項(xiàng)目符號(hào)來(lái)代替這些字符。</p></body></html>8.2.3單選按鈕radio語(yǔ)法:<inputname=“單選按鈕名稱”type=“radio”value=“單選按鈕的取值”checked>實(shí)例:<html><body><form>男性：<inputtype="radio"checked="checked"name="Sex"value="male"><br>女性：<inputtype="radio"name="Sex"value="female"></form><p>當(dāng)用戶點(diǎn)擊一個(gè)單選按鈕時(shí)，該按鈕會(huì)變?yōu)檫x中狀態(tài)，其他所有按鈕會(huì)變?yōu)榉沁x中狀態(tài)。</p></body></html>8.2.4復(fù)選框checkbox語(yǔ)法:<inputname=“復(fù)選框名稱”type=“checkbox”value=“復(fù)選框的取值”checked>實(shí)例:<!checkbox復(fù)選按鈕標(biāo)簽，checked表示這一選項(xiàng)按鈕被選中了><br><inputname="checkbox1"type="checkbox"value="1"checked>21*95*4000<!21*95*4000是選項(xiàng)按鈕的標(biāo)題><inputname="checkbox2"type="checkbox"value="2"checked>28*95*4000<inputname="checkbox3"type="checkbox"value="3"checked>38*95*4000<br><td><!submit提交按鈕，value的值是按鈕上的文字><inputname="button1"type="submit"value="提交"><!reset重置按鈕，value的值是按鈕上的文字><inputname="button2"type="reset"value="重置"><br><!imag圖象域指用在提交按鈕上的圖象><inputname=imagetype=imagesrc="p01.gif"></form></td></tr></table><input>標(biāo)簽的accept屬性定義和用法accept屬性只能與<inputtype="file">配合使用。它規(guī)定能夠通過(guò)文件上傳進(jìn)行提交的文件類型。提示：請(qǐng)避免使用該屬性。應(yīng)該在服務(wù)器端驗(yàn)證文件上傳。實(shí)例在文件上傳中使用accept屬性，本例中的輸入字段可以接受GIF和JPEG兩種圖像：<form><inputtype="file"name="pic"id="pic"accept="image/gif,image/jpeg"/></form>如果不限制圖像的格式，可以寫(xiě)為：accept="image/*"。語(yǔ)法<inputaccept="value">8.2.5普通按鈕button語(yǔ)法:<inputname=“按鈕名稱”type=“bottont”value=“按鈕取值”onclick=“處理程序”>實(shí)例:<html><body><form><inputtype="button"value="Helloworld!"><br><inputtype=“submit”name=“botton”value=“關(guān)閉窗口”onclick=“window.close()"><br><!Submit是提交按鈕></form></body></html>說(shuō)明:還有個(gè)標(biāo)簽botton<button>標(biāo)簽定義一個(gè)按鈕。在button元素內(nèi)部，您可以放置內(nèi)容，比如文本或圖像。這是該元素與使用input元素創(chuàng)建的按鈕之間的不同之處。<button>控件與<inputtype=“button”>相比，提供了更為強(qiáng)大的功能和更豐富的內(nèi)容。<button>與</button>標(biāo)簽之間的所有內(nèi)容都是按鈕的內(nèi)容，其中包括任何可接受的正文內(nèi)容，比如文本或多媒體內(nèi)容。例如，我們可以在按鈕中包括一個(gè)圖像和相關(guān)的文本，用它們?cè)诎粹o中創(chuàng)建一個(gè)吸引人的標(biāo)記圖像。格式:<buttontype="button">ClickMe!</button>8.2.6提交按鈕submit語(yǔ)法:<inputname=“按鈕名稱”type=“submit”value=“按鈕取值”onclick=“處理程序”>實(shí)例:<html><body><tablewidth="600"border="0"align="center"cellspacing=0cellpadding=0><tr><td><formaction=mailto:lghlghme126method="post"name="form1"target="_blank"><br><td><!submit提交按鈕，value的值是按鈕上的文字><inputname="button1"type="submit"value="提交"></td></tr></form></body></html>8.2.7重置按鈕reset語(yǔ)法:<inputname=“按鈕名稱”type=“reset”value=“按鈕取值”>實(shí)例:<html><body><tablewidth="600"border="0"align="center"cellspacing=0cellpadding=0><tr><td><formaction=mailto:lghlghme126method="post"name="form1"target="_blank"><br><td><!submit提交按鈕，value的值是按鈕上的文字><!reset重置按鈕，value的值是按鈕上的文字><inputname="button2"type="reset"value="重置"><br></td></tr></form></body></html>8.2.8圖象域imag圖象域是指用在提交按鈕位置的圖象,使得這幅圖象具有按鈕的功能.語(yǔ)法:<inputname=“圖象域名稱”type=“imag”src=“圖象域的地值”>實(shí)例:<html><body><tablewidth="600"border="0"align="center"cellspacing=0cellpadding=0><tr><td><formaction=mailto:lghlghme126method="post"name="form1"target="_blank"><br><td><!imag圖象域指用在提交按鈕上的圖象><inputname=imagetype=imagesrc="p01.gif"></td></tr></form></body></html>8.2.9隱藏域hidden隱藏域在頁(yè)面中對(duì)用戶來(lái)說(shuō)是看不見(jiàn)的。在表單中插入隱藏域的目的是在于收集和發(fā)送信息，以便于處理表單的程序所使用。發(fā)送表單時(shí)，隱藏域的信息也被一起發(fā)送到服務(wù)器。語(yǔ)法:<inputname=“圖象域名稱”type=“imag”src=“圖象域的地值”>實(shí)例<html><body><tablewidth="600"border="0"align="center"cellspacing=0cellpadding=0><tr><td><formaction=mailto:lghlghme126method="post"name="form1"target="_blank"><br><td><!imag圖象域指用在提交按鈕上的圖象><inputname=“image”type=imagesrc="p01.gif"><inputname=“hiddenfield”type=hiddenvalue=“1”></td></tr></form></body></html>8.2.10文件域file用于文件上傳。文件域是由一個(gè)文本框和一個(gè)瀏覽按鈕組成，用戶可以將要上傳的文件的路徑輸入在文本框中，也可以單擊“瀏覽“按鈕進(jìn)行選擇。語(yǔ)法：<inputtype=“file”name=“文件域名稱“size=“文件域的長(zhǎng)”maxlength=“最多字符數(shù)”>實(shí)例：<html><body><form><inputtype="file"name="pic"size=30maxlength=32/></form><p><b>注釋：</b>出于安全方面的考慮，本例不允許用戶上傳文件。</p></body></html>8.3列表/菜單<select>標(biāo)簽定義和用法：select元素可創(chuàng)建單選或多選菜單。當(dāng)提交表單時(shí)，瀏覽器會(huì)提交選定的項(xiàng)目，或者收集用逗號(hào)分隔的多個(gè)選項(xiàng)，將其合成一個(gè)單獨(dú)的參數(shù)列表，并且在將<select>表單數(shù)據(jù)提交給服務(wù)器時(shí)包括name屬性。8.3.1下拉菜單語(yǔ)法：<selectname=“下拉菜單的名稱”><optionvalue=“選項(xiàng)值“selected>選項(xiàng)顯示內(nèi)容…….</select>實(shí)例:<html><body><tablewidth=“600"border=“0”align="center"cellspacing=0cellpadding=0><tr><td><formaction=“mailto:yaoye5ido”></form></td></tr></table><selectname=“select”><optionvalue=“1”>北京</option><optionvalue=“2”>上海</option><optionvalue=“3”>天津</option></select><p><inputname="button1"type="submit"value="提交"><inputname="button2"type="reset"value="重置"><br></td></tr></body></html>8.3.2列表項(xiàng)語(yǔ)法：<selectname=“列表項(xiàng)的名稱”size=“顯示的列表項(xiàng)數(shù)”multiple><optionvalue=“選項(xiàng)值“selected>選項(xiàng)顯示內(nèi)容…….</select>說(shuō)明:multiple表示這一列可以進(jìn)行多項(xiàng)選擇.實(shí)例:<html><body><selectname="carlist“size=2multiple><optionvalue=“1">Volvo</option><optionvalue=“2">Saab</option><optionvalue=“3">Mercedes</option><optionvalue=“4">Audi</option><optionvalue=“5”>北京</option><optionvalue=“6”>上海</option><optionvalue=“7”>天津</option></select></body></html>8.4文本域<textarea>標(biāo)簽定義和用法<textarea>標(biāo)簽定義多行的文本輸入控件。文本區(qū)中可容納無(wú)限數(shù)量的文本，其中的文本的默認(rèn)字體是等寬字體（通常是Courier）。可以通過(guò)cols和rows屬性來(lái)規(guī)定textarea的尺寸，不過(guò)更好的辦法是使用CSS的height和width屬性。注釋：在文本輸入?yún)^(qū)內(nèi)的文本行間，用"%OD%OA"（回車/換行）進(jìn)行分隔。提示：可以通過(guò)<textarea>標(biāo)簽的wrap屬性設(shè)置文本輸入?yún)^(qū)內(nèi)的換行模式。wrap屬性通常情況下，當(dāng)用戶在輸入文本區(qū)域中鍵入文本后，瀏覽器會(huì)將它們按照鍵入時(shí)的狀態(tài)發(fā)送給服務(wù)器。只有用戶按下Enter鍵的地方生成換行。如果您希望啟動(dòng)自動(dòng)換行功能（wordwrapping），請(qǐng)將wrap屬性設(shè)置為virtual或physical。當(dāng)用戶鍵入的一行文本長(zhǎng)于文本區(qū)的寬度時(shí)，瀏覽器會(huì)自動(dòng)將多余的文字挪到下一行，在文字中最近的那一點(diǎn)換行。wrap="virtual"將實(shí)現(xiàn)文本區(qū)內(nèi)的自動(dòng)換行，以改善對(duì)用戶的顯示，但在傳輸給服務(wù)器時(shí)，文本只在用戶按下Enter鍵的地方進(jìn)行換行，其他地方?jīng)]有換行的效果。wrap="physical"將實(shí)現(xiàn)文本區(qū)內(nèi)的自動(dòng)換行，并以這種形式傳送給服務(wù)器，就像用戶真的那樣鍵入的。因?yàn)槲谋疽杂脩粼谖谋緟^(qū)內(nèi)看到的效果傳輸給服務(wù)器，因?yàn)槭褂米詣?dòng)換行是非常有用的方法。如果把wrap設(shè)置為off，將得到默認(rèn)的動(dòng)作。例子以下面這個(gè)例子為例,將60個(gè)字符的文本輸入到一個(gè)40個(gè)字符寬的文本區(qū)域內(nèi)：wordwrappingisafeaturethatmakeslifeeasierforusers.如果設(shè)置為wrap="wrap"，文本

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論