第二章 章靜態(tài)網(wǎng)頁制作基礎(chǔ)

1、第二章 章靜態(tài)網(wǎng)頁制作基礎(chǔ)第四節(jié) 客戶端信息搜集(網(wǎng)頁表單)一、表單的概念表單是網(wǎng)頁上的一組特殊對象標(biāo)簽，是接受用戶輸入數(shù)據(jù)的窗口?？梢越邮苡脩糨斎氲男畔?shù)據(jù)，并提交給預(yù)定的程序等來接收并處理數(shù)據(jù)。 二、表單的作用表單是用戶與服務(wù)器之間信息數(shù)據(jù)交互的橋梁，用戶在網(wǎng)頁上表單對象中輸入數(shù)據(jù)或者做出選擇，表單對象則把用戶的數(shù)據(jù)或選擇提交給服務(wù)器端處理，然后服務(wù)器把處理結(jié)果再反饋給用戶。表單技術(shù)的應(yīng)用，使得基于網(wǎng)頁的編程得以實(shí)現(xiàn)。 含有表單的網(wǎng)頁稱作表單網(wǎng)頁，表單對象中包含有若干表單域，每一個(gè)表單域也稱表單控件，是表單的基本元素，用戶可以在表單域中輸入信息或作出選擇。三、<form>表單標(biāo)

2、記該標(biāo)記的主要作用是設(shè)定表單的起止位置，并指定處理表單數(shù)據(jù)程序的url地址。其基本語法結(jié)構(gòu)如下：<form actionurl method=get|post namevalue onreset=function onsubmitfunction target=window>表單元素</form>其中action：用于設(shè)定處理表單數(shù)據(jù)程序url的地址。method：指定數(shù)據(jù)傳送到服務(wù)器的方式。有兩種主要的方式，當(dāng)method=get時(shí)，將輸入數(shù)據(jù)加在action指定的地址后面?zhèn)魉偷椒?wù)器；當(dāng)method=post時(shí)則將輸入數(shù)據(jù)按照HTTP傳輸協(xié)議中的post傳輸方式傳送

3、到服務(wù)器。name：用于設(shè)定表單的名稱。onreset和onsubmit是主要針對“reset”按鈕和“submit”按鈕來說的，分別設(shè)定了在按下相應(yīng)的按鈕之后要執(zhí)行的子程序。四、<input>表單輸入域（控件）此標(biāo)記在表單中使用頻繁，大部分表單內(nèi)容需要用到此標(biāo)記。其語法如下：<inPut aligh=left|righ|top|middle|bottom name=valuetype=text|textarea|password|checkbox|radio|submit|reset|file|hidden|image|button value=value src=url

4、checked maxlength=n size=n onclick=function onselect=function>align：是用于設(shè)定表單的位置是靠左（left）、靠右（right）、居中（middle）、靠上 top）還是靠底（bottom）。name：設(shè)定當(dāng)前變量名稱。 type：決定了輸入數(shù)據(jù)的類型。其選項(xiàng)較多，各項(xiàng)的意義是： type=text：表示輸入單行文本； typet=textarea：表示輸入多行文本；type=password:表示輸入數(shù)據(jù)為密碼，用星號(hào)表示；type=checkbox：表示復(fù)選框；type=radio：表示單選框；type=submit：

5、表示提交按鈕，數(shù)據(jù)將被送到服務(wù)器； tyPe=reset：表示清除表單數(shù)據(jù)，以便重新輸入；type=file：表示插入一個(gè)文件；type=hidden：表示隱藏按鈕；type=image：表示插入一個(gè)圖像；type=button：表示普通按鈕；value：用于設(shè)定輸入默認(rèn)值，即如果用戶不輸入的話，就采用此默認(rèn)值；src：是針對type=image的情況來說的，設(shè)定圖像文件的地址；checked：表示選擇框中，此項(xiàng)被默認(rèn)選中；maxlength：表示在輸入單行文本的時(shí)候，最大輸入字符個(gè)數(shù)；size：用于設(shè)定在輸入多行文本時(shí)的最大輸入字符數(shù)，采用width，height方式；onclick：表示在

6、按下輸入時(shí)調(diào)用指定的子程序；onselect：表示當(dāng)前項(xiàng)被選擇時(shí)調(diào)用指定的子程序。 五、<select>下拉菜單標(biāo)記用<select>標(biāo)記可以在表間中插入一個(gè)下拉菜單，它需與<option>標(biāo)記聯(lián)用，因?yàn)橄吕藛沃械拿總€(gè)選項(xiàng)要用<option>標(biāo)記來定義。<select>標(biāo)記的語法如下：<select name=nametext size=n multiple>其中name：設(shè)定下拉式菜單的名稱；size：設(shè)定菜單框的高度，也就是一次顯示幾個(gè)菜單項(xiàng)，一般取默認(rèn)值（size="1"）；multiple：設(shè)

7、定為可以進(jìn)行多選。六、<option>選項(xiàng)標(biāo)記該標(biāo)記為下拉菜單中一個(gè)選項(xiàng)，語法很簡單：<option selected value=value>其中selected：表示當(dāng)前項(xiàng)被默認(rèn)選中；value：表示該項(xiàng)對應(yīng)的值，在該項(xiàng)被中之后，該項(xiàng)的值就會(huì)被送到服務(wù)器進(jìn)行處理。 七、<textarea>多行文本輸入標(biāo)記這是一個(gè)建立多行文本輸入框的專用標(biāo)記，其語法如下：<textarea name=name cols=n rows=n wrap=off|hard|soft>各參數(shù)含義：name：文本框名稱；clos：寬度；rows：高度（行數(shù)）；wrap：換

8、行控制，off：不自動(dòng)換行；hard：自動(dòng)硬回車換行，換行標(biāo)記一同被傳送到服務(wù)器中去；soft：自動(dòng)軟回車換行，換行標(biāo)記不會(huì)傳送到服務(wù)器中去。 表單所涉及的標(biāo)記較多，參數(shù)也較復(fù)雜，而實(shí)際制作表單時(shí)就是這些標(biāo)記的組合應(yīng)用，但一般的表單不可能涉及所有參數(shù)，我們還是那個(gè)原則，能用默認(rèn)值的盡量用默認(rèn)值，絕不設(shè)定一個(gè)不用的參數(shù)。我在后面的文章中將通過實(shí)例介紹一些常用參數(shù)的應(yīng)用技巧。 八、表單實(shí)例窗體頂部姓名：性別： 男 女 電子郵件地址：手機(jī)號(hào)： 學(xué)歷：窗體底部以下是這個(gè)表單的源代碼：<form name="form1" method="post" acti

9、on="*.asp">姓名：<br><input type="text" name="姓名" maxlength="50"><br>性別： <br><input type="radio" name="性別" value="男" checked>男 <input type="radio" name="性別" value="女"&

10、gt;女 <br>電子郵件地址：<br><input type="text" name="電子郵件地址" maxlength="50"><br>手機(jī)號(hào)： <br><input type="text" name="電話號(hào)碼"><br>學(xué)歷：<br><select name="學(xué)歷"><option value="高職">高職</option><option value="本科">本科</option><option value="碩士">碩士</option><option value="博士">博士</option></select><br><input