商務(wù)網(wǎng)頁設(shè)計(jì)與制作（第2版）課件 第10課 表單制作方法_第1頁
商務(wù)網(wǎng)頁設(shè)計(jì)與制作（第2版）課件 第10課 表單制作方法_第2頁
商務(wù)網(wǎng)頁設(shè)計(jì)與制作（第2版）課件 第10課 表單制作方法_第3頁
商務(wù)網(wǎng)頁設(shè)計(jì)與制作（第2版）課件 第10課 表單制作方法_第4頁
商務(wù)網(wǎng)頁設(shè)計(jì)與制作（第2版）課件 第10課 表單制作方法_第5頁
已閱讀5頁，還剩20頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

第3章 HTML網(wǎng)頁制作技術(shù)3.8表單制作方法3.8.1定義表單3.8.2定義輸入項(xiàng)3.8.3制作下拉菜單和數(shù)據(jù)列表3.8.4制作元素分組和輸入項(xiàng)標(biāo)注標(biāo)簽3.8.5制作文件項(xiàng)與進(jìn)度條3.8.6數(shù)據(jù)驗(yàn)證與數(shù)據(jù)輸出3.8.7制作學(xué)生信息編輯表單綜合范例3.8表單制作方法幾乎所有的網(wǎng)站都需要提供人機(jī)數(shù)據(jù)交互功能。比如在網(wǎng)站上注冊(cè)會(huì)員、登錄、留言、購買商品等。表單是由提供數(shù)據(jù)交互功能的多個(gè)標(biāo)簽組合實(shí)現(xiàn)的，如<form><input><select><option>等。制作表單常用標(biāo)簽見3.1.5節(jié)內(nèi)容表3.3。3.8.1定義表單表單是一個(gè)容器，其它表單元素均應(yīng)放在表單里面，構(gòu)成一個(gè)具有一定功能的表單。定義表單，需要使用表單標(biāo)簽<form>及其相關(guān)屬性。設(shè)置方法為<form屬性1=”屬性1的值”屬性2=”屬性2的值”……>表單實(shí)例</form>表單<form>常見屬性見表3.22。表3.22表單<form>常見屬性表1．設(shè)置action屬性action的作用是規(guī)定表單提交的數(shù)據(jù)交給誰去處理。action通常指向域內(nèi)某一具有數(shù)據(jù)接收處理功能的地址或網(wǎng)頁文件，由他們來接收處理這些表單數(shù)據(jù)，比如action="example/example.jsp"。關(guān)于接收處理表單數(shù)據(jù)屬于后端動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)制作范疇，通常采用jsp、asp、js、java、php等技術(shù)編寫網(wǎng)頁或程序來接收處理表單數(shù)據(jù)。而HTML、CSS側(cè)重于網(wǎng)頁的前端設(shè)計(jì)與制作，故本書不對(duì)表單的接收處理做介紹。設(shè)置表單<form>action屬性的設(shè)置方法為<formaction=”URL”>表單實(shí)例</form>URL可以采用相對(duì)地址形式，也可以采用絕對(duì)地址形式。2．設(shè)置method屬性表單<form>的action屬性是規(guī)定數(shù)據(jù)發(fā)往哪里，而表單<form>的method屬性則是規(guī)定采用何種方式來發(fā)送數(shù)據(jù)。表單數(shù)據(jù)可被作為URL變量的形式來發(fā)送（method="get"），或者作為HTTPpost事務(wù)的形式來發(fā)送（method="post"）。希望向社會(huì)廣而告之的數(shù)據(jù)信息如檢索關(guān)鍵詞等，建議采用get方式發(fā)送，其它信息建議采用post方式發(fā)送。設(shè)置表單<form>method屬性的設(shè)置方法為<formmethod=”get/post”>表單實(shí)例</form>屬性method的值只有兩個(gè)，要么采用“get”方式，要么采用“post”方式。3.設(shè)置表單name屬性表單name屬性是給表單定義名稱，表單名稱在頁面中是唯一的。表單<form>的name屬性用于標(biāo)識(shí)本表單。設(shè)置表單<form>name屬性的設(shè)置方法為<formname=”表單名稱”>表單實(shí)例</form>表單名稱可以自擬，可采用英文字母加數(shù)字的形式命名，建議具有一定含義，最好與表單的主要內(nèi)容相符。4.設(shè)置表單novalidate屬性表單<form>的novalidate屬性，在表單提交數(shù)據(jù)時(shí)，是否按照表單各個(gè)輸入元素設(shè)置的規(guī)則校驗(yàn)數(shù)據(jù)。比如，輸入元素的類型是手機(jī)號(hào)碼，表單提交時(shí)，是否檢查該輸入元素的值（輸入內(nèi)容）是否符合手機(jī)號(hào)碼的通用規(guī)則。設(shè)置表單<form>novalidate屬性的設(shè)置方法為<formnovalidate>表單實(shí)例</form>表單<form>的novalidate屬性本身就是布爾值，無須賦值。引用novalidate屬性意味著表單提交時(shí)不校驗(yàn)數(shù)據(jù)。表單<form>的其它屬性設(shè)置請(qǐng)讀者自行學(xué)習(xí)和練習(xí)。3.8.2定義輸入項(xiàng)表單的輸入項(xiàng)在表單中最常見，制作文本編輯框、單選鈕、復(fù)選框、日期時(shí)間編輯框、數(shù)字框等，均是使用輸入項(xiàng)標(biāo)簽<input>的type屬性設(shè)定的。所以<input>標(biāo)簽是制作表單最最重要的學(xué)習(xí)內(nèi)容，應(yīng)多學(xué)多練。定義輸入項(xiàng)，需要使用輸入項(xiàng)標(biāo)簽<input>及其相關(guān)屬性。<input>沒有結(jié)束標(biāo)簽，設(shè)置方法為<input屬性1=”屬性1的值”屬性2=”屬性2的值”……/>輸入項(xiàng)標(biāo)簽<input>的屬性較多且復(fù)雜，初學(xué)時(shí)難以全面掌握。我們先通過學(xué)習(xí)制作學(xué)生信息編輯表單（見3.8.7制作學(xué)生信息編輯表單綜合范例）來逐步學(xué)習(xí)掌握<input>及其相關(guān)屬性的使用方法，尤其是type屬性最為重要。表3.23<input>標(biāo)簽type屬性值表1．設(shè)置文本類型很多數(shù)據(jù)都是文本類型。設(shè)置輸入項(xiàng)為文本類型，需要是使用輸入項(xiàng)標(biāo)簽<input>及其type屬性，設(shè)置方法為<inputtype=”text”/>當(dāng)輸入項(xiàng)type屬性值為“text”時(shí)，定義該輸入項(xiàng)為文本類型。文本類型輸入項(xiàng)時(shí)常與正則表達(dá)式pattern、最小長度minlength、最大長度maxlength等屬性組合使用。2．設(shè)置數(shù)字類型網(wǎng)頁中數(shù)字類型數(shù)據(jù)也比較多，數(shù)字類型本身具有驗(yàn)證機(jī)制，輸入非數(shù)字字符無法通過數(shù)據(jù)驗(yàn)證。設(shè)置輸入項(xiàng)為數(shù)字類型，需要使用輸入項(xiàng)標(biāo)簽<input>及其type屬性，設(shè)置方法為<inputtype=”number”/>當(dāng)輸入項(xiàng)type屬性值為“number”時(shí)，定義該輸入項(xiàng)為數(shù)字類型。數(shù)字類型輸入項(xiàng)時(shí)常與min、max、step等屬性組合使用。3．設(shè)置日期時(shí)間類型日期時(shí)間類型數(shù)據(jù)比較有特點(diǎn)，使用場(chǎng)景也較多。各瀏覽器對(duì)日期時(shí)間類型數(shù)據(jù)的支持程度不同，使用時(shí)需要注意瀏覽器之間的差異，目前Chrome、Oprea等瀏覽器支持日期類型相對(duì)較好。如果設(shè)置輸入項(xiàng)為日期類型，運(yùn)行時(shí)會(huì)彈出日期時(shí)間對(duì)話框，供用戶選擇確定日期和時(shí)間。設(shè)置輸入項(xiàng)為日期時(shí)間類型，需要使用輸入項(xiàng)標(biāo)簽<input>及其type屬性，制作方法為<inputtype=”date”/>當(dāng)輸入項(xiàng)type屬性值為“date”時(shí)，定義該輸入項(xiàng)為日期時(shí)間類型。日期時(shí)間類型還有week、month、time、datetime、datetime-local幾種類型，設(shè)置方法相同，只是type的屬性值不同。制作日期時(shí)間類型輸入項(xiàng)示例代碼如下：<!DOCTYPEhtml><html><head><title>設(shè)置日期時(shí)間類型數(shù)據(jù)</title></head><body><formaction="#"method="get">出版日期：<inputtype="date"/></form></body></html>代碼運(yùn)行后，出現(xiàn)日期時(shí)間型數(shù)據(jù)輸入項(xiàng)，當(dāng)鼠標(biāo)點(diǎn)擊輸入項(xiàng)時(shí)，彈出時(shí)間日期對(duì)話框，見圖3.68。4．制作表單按鈕表單按鈕有三種：即普通按鈕、提交按鈕和重置按鈕，由<input>type屬性的值來確定。普通按鈕可以指向一個(gè)URL，或者啟動(dòng)一段腳本或應(yīng)用，其具體功能可以根據(jù)業(yè)務(wù)需要進(jìn)行定制。而提交按鈕和重置按鈕的功能是封裝好的、不可更改的，提交按鈕是將表單數(shù)據(jù)經(jīng)過驗(yàn)證后提交給后端的網(wǎng)頁或軟件接收處理，重置按鈕是將表單輸入的數(shù)據(jù)全部抹去恢復(fù)到表單初始狀態(tài)。制作表單按鈕許可使用輸入項(xiàng)標(biāo)簽<input>及其type和value屬性，制作方法為<inputtype=”button|submit|reset”value=”caption”/>其中，type屬性值為“button”時(shí)，定義該輸入項(xiàng)為普通按鈕；當(dāng)type屬性值為“submit”時(shí)，定義該輸入項(xiàng)為提交按鈕；當(dāng)type屬性值為“reset”時(shí)，定義該輸入項(xiàng)為重置按鈕。Value屬性給該輸入項(xiàng)的顯示標(biāo)題賦值，沒有給value屬性賦值將會(huì)使用其默認(rèn)屬性值。<!DOCTYPEhtml><html><head><title>制作表單按鈕</title></head><body><formaction="#"method="get">產(chǎn)品說明<br><textareaname="phone"id="phonetext"cols="50"rows="10"></textarea><br><inputtype="button"value="產(chǎn)品演示"/><inputtype="reset"value="重置"/><inputtype="submit"value="保存"/></form></body></html>3.8.3制作下拉菜單和數(shù)據(jù)列表表單中經(jīng)常有下拉菜單、數(shù)據(jù)列表的形式，是制作表單應(yīng)當(dāng)學(xué)習(xí)掌握的基礎(chǔ)內(nèi)容。1．制作下拉菜單制作下拉菜單，需要組合使用下拉列表標(biāo)簽<select>及其name屬性和選擇項(xiàng)標(biāo)簽<option>及其value屬性，制作方法為<selectname=”selectvalue”><optionvalue="value1">選擇項(xiàng)1</option><optionvalue="value2">選擇項(xiàng)2</option><optionvalue="value3">選擇項(xiàng)3</option><optionvalue="value4">選擇項(xiàng)4</option></select>其中，下拉列表標(biāo)簽<select>首先定義一個(gè)下拉列表并命名以傳遞數(shù)字，然后選擇項(xiàng)標(biāo)簽<option>分別定義各個(gè)選擇項(xiàng)的值。選擇項(xiàng)標(biāo)簽<option>的value屬性值由用戶方按照業(yè)務(wù)邏輯賦予選擇項(xiàng)所示項(xiàng)目的代碼值即可。比如，下拉列表是學(xué)生選課用的，則選擇項(xiàng)的屬性值就應(yīng)當(dāng)是該選擇項(xiàng)所示課程的代碼。<!doctypehtml><html><head><title>制作下拉菜單和數(shù)據(jù)列表</title></head><body><formname="myform"method="post"action=""><!--action屬性通常用于同后臺(tái)程序交互，后臺(tái)交互不屬于本課程知識(shí)范圍--><selectname="myselect"><optionvalue="b001">二年一班</option><optionvalue="b002">二年二班</option><optionvalue="b003">二年三班</option><optionvalue="b004">二年四班</option></select><inputname=“datalistname”list="datalistid"/><datalistid="datalistid"><optionvalue="a001">圍棋</option><optionvalue="a002">鋼琴</option><optionvalue="a003">美術(shù)</option><optionvalue="a004">讀書</option></datalist></form></body></html>3.8.4制作元素分組和輸入項(xiàng)標(biāo)注標(biāo)簽1．制作元素分組表單中，通常將一類性質(zhì)的元素劃為一組，并用線框包圍美化顯示效果。這就需要使用分組標(biāo)簽<fieldset>和分組標(biāo)題標(biāo)簽<legend>，制作方法為<fieldset><legend>分組標(biāo)題實(shí)例</legend>……</fieldset>首先用分組標(biāo)簽<feildset>定義一個(gè)分組，然后再用分組標(biāo)題標(biāo)簽<legeng>定義分組標(biāo)題。其余夾在<fieldset></fieldset>之間的所有元素均被劃分為一組，并用線框包圍。2．制作輸入項(xiàng)標(biāo)注標(biāo)簽輸入項(xiàng)標(biāo)注標(biāo)簽<label>不僅用來標(biāo)注輸入項(xiàng)，還能與標(biāo)注的輸入項(xiàng)綁定，成為一個(gè)整體。<label>標(biāo)簽為鼠標(biāo)用戶改進(jìn)了可用性，當(dāng)用戶選擇該標(biāo)注標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)注標(biāo)簽綁定的表單控件上。也就是說，如果想要選中某文本框，不必非得在該文本框內(nèi)單擊鼠標(biāo)，直接單擊由<label>標(biāo)簽標(biāo)記的文本即可，相當(dāng)于給<input>輸入項(xiàng)添加了一個(gè)感應(yīng)區(qū)。<label>標(biāo)簽有兩個(gè)屬性非常重要，一個(gè)是for，另外一個(gè)是accesskey。屬性for是綁定某一輸入項(xiàng)的，屬性accesskey是訪問激活所綁定的元素的熱鍵，當(dāng)按下熱鍵，所綁定的元素將獲取焦點(diǎn)。制作輸入項(xiàng)標(biāo)注標(biāo)簽<label>，需要使用其for、accesskey屬性，并與輸入項(xiàng)標(biāo)簽<input>及其type屬性共同設(shè)置實(shí)現(xiàn)綁定。制作方法為<labelfor="inputid"accesskey=”N”>標(biāo)注標(biāo)簽實(shí)例</label><inputtype="text"name="inputdata"id="inputid"/>標(biāo)注標(biāo)簽<label>創(chuàng)建時(shí)，通過for屬性指向輸入項(xiàng)id號(hào)，并給出標(biāo)注標(biāo)簽實(shí)例。然后在創(chuàng)建輸入項(xiàng)標(biāo)簽<input>時(shí)，必須通過id屬性創(chuàng)建id號(hào)，只要這個(gè)id號(hào)與<label>標(biāo)簽for屬性指向的id號(hào)相同，就實(shí)現(xiàn)了兩者綁定。當(dāng)標(biāo)注標(biāo)簽<label>的accesskey屬性為”N”時(shí)，標(biāo)識(shí)熱鍵為ALT+N。如果accesskey屬性為其它字母時(shí)，標(biāo)識(shí)熱鍵為ALT+其它字母。3.8.5制作文件項(xiàng)與進(jìn)度條1．制作文件項(xiàng)文件項(xiàng)標(biāo)簽在上傳文件時(shí)常常用到。比如在硬盤里瀏覽查找文件并選擇確認(rèn)上傳。制作文件項(xiàng)需要使用輸入項(xiàng)標(biāo)簽<input>及其type屬性，以及全局屬性id，制作方法為<inputtype=”file”id=”fileid”/>通過將type的屬性賦值為”file”，確定了該輸入項(xiàng)為文件類型。通過對(duì)id賦值全局屬性“fileid”，確保該輸入項(xiàng)全局唯一，可以被其它語句（包括腳本等）調(diào)用。輸入項(xiàng)標(biāo)簽<input>的type屬性也可以和multiple、accept等屬性共同設(shè)置，確定是否為多文件上傳，以及限制上傳文件的類型。<!DOCTYPEhtml><html><head><title>文件類型輸入項(xiàng)示例</title></head><body><formmethod="post"action=""name="fileform"><inputtype="file"id=”fileid”/></form></body></html>2．制作進(jìn)度條進(jìn)度條標(biāo)簽可以在表單中使用，也可以不在表單中使用。使用進(jìn)度條可以形象地展示某個(gè)操作的運(yùn)行進(jìn)度，對(duì)于一些耗時(shí)較長的操作具有較好的提示作用。比如上傳視頻等大文檔時(shí)，由于視頻通常比較大，上傳的速度相對(duì)較慢，以進(jìn)度條來形象展示上傳進(jìn)度，制作進(jìn)度條，需要使用進(jìn)度條標(biāo)簽<progress>及其max和value屬性，制作方法為<progressvalue="setvalue"max="maxvalue"></progress>其中，max屬性用于設(shè)定該進(jìn)度條的最大值，value屬性用于給進(jìn)度條賦值。進(jìn)度條標(biāo)簽<progress>通常與腳本配合使用效果更好。進(jìn)度條標(biāo)簽<progress>動(dòng)態(tài)顯示進(jìn)度最有意義，所以它通常采用劇本語言等獲得value屬性值的動(dòng)態(tài)更新。3.8.6數(shù)據(jù)驗(yàn)證與數(shù)據(jù)輸出1．?dāng)?shù)據(jù)驗(yàn)證表單中的數(shù)據(jù)信息最終需要提交給目的網(wǎng)頁或應(yīng)用來處理時(shí)，可以進(jìn)行數(shù)據(jù)驗(yàn)證。按照輸入項(xiàng)<input>標(biāo)簽type屬性值的類型，按照通用規(guī)則和自定義正則表達(dá)式的規(guī)則進(jìn)行數(shù)據(jù)核驗(yàn)。通過數(shù)據(jù)驗(yàn)證的，按照目標(biāo)地址提交表單數(shù)據(jù)，未通過數(shù)據(jù)驗(yàn)證的，不會(huì)提交數(shù)據(jù)，需要對(duì)輸入項(xiàng)的數(shù)據(jù)進(jìn)行修正后再嘗試提交。數(shù)據(jù)驗(yàn)證分兩個(gè)方面：一是按照type屬性值確定的輸入項(xiàng)類型驗(yàn)證輸入的數(shù)據(jù)，如電話號(hào)碼、電子郵箱、數(shù)字類型等；二是通過pattern確定的正則表達(dá)式來驗(yàn)證數(shù)據(jù)輸入是否符合規(guī)則要求。正則表達(dá)式（又稱規(guī)則表達(dá)式）就是用事先定義好的一些特定字符及這些特定字符的組合，組成一個(gè)“規(guī)則字符串”，這個(gè)“規(guī)則字符串”用來表達(dá)對(duì)字符串的一種過濾邏輯。正則表達(dá)式是一種文本模式，許多程序設(shè)計(jì)語言如Java、C++、Javascript以及Python等都支持利用正則表達(dá)式進(jìn)行字符串操作，關(guān)于正則表達(dá)式的構(gòu)成規(guī)則請(qǐng)參閱相關(guān)資料和書籍。使用輸入項(xiàng)標(biāo)簽<input>的pattern屬性設(shè)置輸入規(guī)則的方法為<inputtype=”text”pattern=”regexp”/>表單數(shù)據(jù)是否做驗(yàn)證可以通過表單標(biāo)簽<form>的novalidate屬性來控制。設(shè)置novalidate=”novalidate”時(shí)，表單提交時(shí)不做數(shù)據(jù)驗(yàn)證，否則需驗(yàn)證數(shù)據(jù)。2．?dāng)?shù)據(jù)輸出HTML5增加了輸出標(biāo)簽<output>，用于計(jì)算結(jié)果輸出顯示（比如執(zhí)行腳本計(jì)算結(jié)果的輸出），他有3個(gè)屬性見表3.24。表3.24輸出標(biāo)簽<output>屬性表輸出標(biāo)簽<output>是用于將計(jì)算結(jié)果輸出顯示的，而HTML語言沒有

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(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)論