項(xiàng)目三 表單標(biāo)簽的使用

03表單標(biāo)簽的使用153任務(wù)1制作網(wǎng)易郵箱注冊網(wǎng)頁任務(wù)2制作電子產(chǎn)品調(diào)查問卷網(wǎng)頁154制作網(wǎng)易郵箱注冊網(wǎng)頁任務(wù)1155●1.了解表單的組成及作用?！?.了解創(chuàng)建表單的基本語法格式?！?.掌握表單相關(guān)標(biāo)簽的用法。●4.熟練運(yùn)用表單控件制作網(wǎng)頁。156本任務(wù)主要利用form表單的文本輸入框、密碼框等控件來制作完成網(wǎng)易郵箱注冊網(wǎng)頁，如圖所示。157網(wǎng)易郵箱注冊網(wǎng)頁效果158步驟一：分析上圖，網(wǎng)易郵箱注冊網(wǎng)頁分為四個(gè)板塊，對應(yīng)為四組表格標(biāo)簽，其中第三個(gè)表格需要嵌套子表格。首先寫第一個(gè)表格，表格的寬度為962像素，居于瀏覽器中間，表格包含1行2列，第一列的內(nèi)容是一張寬392像素、高38像素的圖片，第二列的內(nèi)容為文字信息“幫助”。代碼如圖所示。159此時(shí)網(wǎng)頁效果如圖所示。第一個(gè)表格網(wǎng)頁效果第一個(gè)表格代碼160步驟二：接著寫第二個(gè)表格，表格的寬度為962像素，居于瀏覽器中間，表格包含1行1列，唯一列的內(nèi)容為一張寬962像素、高53像素的圖片。第二個(gè)表格網(wǎng)頁效果第二個(gè)表格代碼此時(shí)網(wǎng)頁的效果如圖所示。161步驟三：接著寫第三個(gè)表格，表格的寬度為962像素，居于瀏覽器中間，表格包含1行1列，唯一列嵌入一個(gè)form表單，表單中嵌入一個(gè)子表格，子表格的寬度也為962像素，子表格包含4行1列，第一行、第三行、第四行的單元格填入相應(yīng)的文字信息，第二行的單元格保持為空。代碼如圖所示。162第三個(gè)表格整體框架代碼163第三個(gè)表格整體框架代碼164此時(shí)整體框架頁面效果如圖所示。整體框架頁面效果165步驟四：找到在步驟三中創(chuàng)建的子表格，分別在第二行、第四行、第六行、第八行的空單元格中編寫對應(yīng)的標(biāo)簽代碼。代碼如圖所示。標(biāo)簽代碼a）第二行代碼b）第四行代碼c）第六行代碼d）第八行代碼166標(biāo)簽代碼a）第二行代碼b）第四行代碼c）第六行代碼d）第八行代碼167標(biāo)簽代碼a）第二行代碼b）第四行代碼c）第六行代碼d）第八行代碼168標(biāo)簽代碼a）第二行代碼b）第四行代碼c）第六行代碼d）第八行代碼169此時(shí)網(wǎng)頁效果如圖所示。創(chuàng)建賬號(hào)代碼170步驟五：最后寫第四個(gè)表格，表格的寬度為962像素，居于瀏覽器中間，單元格內(nèi)容與單元格邊沿距離為8，單元格間距為0。表格包含1行1列，唯一列居中，代碼如圖所示。第四個(gè)表格代碼171一、認(rèn)識(shí)表單對于表單，讀者可能比較陌生，其實(shí)它們在互聯(lián)網(wǎng)上隨處可見。在html中，一個(gè)完整的表單通常由表單控件（也被稱為表單元素）、提示信息和表單域三個(gè)部分構(gòu)成，通?？吹降牡卿涀皂撁娑际怯杀韱瓮瓿傻?。表單用于搜集不同類型的用戶輸入。172為了更好地理解表單的構(gòu)成，下面來創(chuàng)建一個(gè)完整的表單，表單結(jié)構(gòu)代碼如圖所示。表單結(jié)構(gòu)代碼表單結(jié)構(gòu)效果運(yùn)行圖中的代碼，此時(shí)網(wǎng)頁效果如圖所示。173二、創(chuàng)建表單在html中，<form></form>被用于定義表單域，即<form>為表單開始，</form>為表單結(jié)束。所有的表單元素都要放置在其中。創(chuàng)建表單的基本語法代碼如圖所示。創(chuàng)建表單的基本語法代碼174在上面的語法中，action、method和name為表單標(biāo)簽form的常用屬性，具體見表。form標(biāo)簽的屬性及含義175三、認(rèn)識(shí)表單控件1.input控件input控件是表單元素中用得最多的一種元素，通常網(wǎng)頁中的單行文本輸入框、單選框、復(fù)選框、提交按鈕、重置按鈕等都是通過input控件定義的，其基本語法格式如下。input控件的type屬性為其最基本的屬性，根據(jù)其type屬性的取值不同，可輸入不同形式的數(shù)據(jù)，達(dá)到客戶端與服務(wù)器之間真正交互、溝通的目的。除了type屬性之外，input控件還可以定義很多其他的屬性，具體見表。176input控件的屬性、屬性值及描述177表中所列出的為input控件的常用屬性，下面通過一個(gè)案例來演示它們的使用方法和效果，如圖所示。input控件代碼1178運(yùn)行圖中的代碼，效果如圖所示。input控件效果179為了使初學(xué)者更好地理解不同的input控件類型，下面對它們做一個(gè)簡單的介紹。（1）單行文本輸入框<inputtype="text"/>單行文本輸入框常用來輸入簡短的信息，如用戶名、賬號(hào)、證件號(hào)碼等，常用的屬性有name、value、maxlength。（2）密碼輸入框<inputtype="password"/>密碼輸入框用來輸入密碼，其內(nèi)容將以“*”的形式顯示。180（3）單選框<inputtype="radio"/>單選框用于單項(xiàng)選擇，如選擇性別、是否操作等。需要注意的是，在定義單選框時(shí)，必須為同一組中的選項(xiàng)指定相同的name值，這樣“單選”才會(huì)生效。此外，可以對單選框應(yīng)用checked屬性，指定默認(rèn)選中項(xiàng)。（4）普通按鈕<inputtype="button"/>普通按鈕常常配合JavaScript腳本語言使用，初學(xué)者了解即可。（5）復(fù)選框<inputtype="checkbox">復(fù)選框允許用戶在一定數(shù)目的選擇中選取一個(gè)或多個(gè)選項(xiàng)。復(fù)選框能夠進(jìn)行內(nèi)容的多項(xiàng)選擇，顯示形式一般為一個(gè)方框。181（6）提交按鈕<inputtype="submit"/>提交按鈕是表單中的核心控件，用戶完成信息的輸入后，一般都需要單擊提交按鈕才能完成表單數(shù)據(jù)的提交。可以對其應(yīng)用value屬性，改變提交按鈕上的默認(rèn)文本。（7）重置按鈕<inputtype="reset"/>當(dāng)用戶輸入的信息有誤時(shí)，可單擊重置按鈕取消已輸入的所有表單信息?？梢詫ζ鋺?yīng)用value屬性，改變重置按鈕上的默認(rèn)文本。182（8）圖片按鈕<inputtype="image"/>圖片按鈕與普通按鈕在功能上基本相同，只是它用圖像替代了默認(rèn)的按鈕，外觀上更加美觀。需要注意的是，必須為其定義src屬性，以指定圖像的URL路徑。（9）隱藏域<inputtype="hidden"/>隱藏域?qū)τ谟脩羰遣豢梢姷?，通常用于后臺(tái)的程序，初學(xué)者了解即可。（10）文件域<inputtype="?le"/>當(dāng)單擊文件域時(shí)，頁面中將出現(xiàn)一個(gè)文本框和一個(gè)“瀏覽”按鈕，用戶可以通過填寫文件路徑或直接瀏覽選擇文件的方式，將文件提交給后臺(tái)服務(wù)器。1832.textarea控件當(dāng)定義input控件的type屬性值為text時(shí)，可以創(chuàng)建一個(gè)單行文本輸入框。但是，如果需要輸入大量的信息，單行文本輸入框就不再適用，為此html語言提供了textarea控件。通過textarea控件可以輕松地創(chuàng)建多行文本輸入框，其基本語法格式如下。184在上面的語法格式中，cols和rows為textarea控件必須設(shè)置的屬性，其中cols用來定義多行文本輸入框中每行的字符數(shù)，rows用來定義多行文本輸入框中顯示的行數(shù)，它們的取值均為正整數(shù)。下面通過一個(gè)案例來學(xué)習(xí)textarea控件的用法，如圖所示。textarea控件代碼185在上圖中，通過textarea控件定義了一個(gè)多行文本輸入框，并對其應(yīng)用cols和rows屬性來設(shè)置多行文本輸入框每行中的字符數(shù)和顯示的行數(shù)。在多行文本輸入框下面，通過將input控件的type屬性值設(shè)置為“submit”，定義了一個(gè)提交按鈕。運(yùn)行上圖中的代碼，效果如圖所示。textarea控件效果制作電子產(chǎn)品調(diào)查問卷網(wǎng)頁任務(wù)2

186●1.熟悉select控件的應(yīng)用?！?.熟練使用表單控件制作多項(xiàng)選擇表單網(wǎng)頁。187表單控件為表單的核心內(nèi)容，它允許用戶在表單中輸入內(nèi)容。不同的表單控件具有不同的功能，如密碼輸入框、文本輸入框、下拉列表、復(fù)選框等，只有掌握了這些控件的使用方法，才能正確地創(chuàng)建表單。188189本任務(wù)主要利用表單控件的文本輸入框、下拉列表框、單選框、復(fù)選框等控件，將多種控件組合在一起，制作出電子產(chǎn)品調(diào)查問卷網(wǎng)頁，如圖所示。電子產(chǎn)品調(diào)查問卷網(wǎng)頁190步驟一：根據(jù)分析，制作電子產(chǎn)品調(diào)查問卷網(wǎng)頁分為兩步，首先插入左側(cè)的問題信息，然后插入右側(cè)的表單控件。在p標(biāo)簽中先放入文字內(nèi)容，代碼如圖所示。191左側(cè)問題信息代碼192效果如圖所示。左側(cè)問題信息效果193步驟二：在上圖中，前三個(gè)表單輸入框（如姓名、購買日期、電子郵件地址）是用了文本框和下拉列表框表單控件，每年有12個(gè)月，所以第一個(gè)下拉列表框中設(shè)置了12個(gè)option選項(xiàng)，每月最多有31天，所以第二個(gè)下拉列表框中設(shè)置了31個(gè)option選項(xiàng)，代碼如圖所示。前三個(gè)表單輸入框源碼194前三個(gè)表單輸入框源碼195此時(shí)網(wǎng)頁效果如圖所示。前三個(gè)表單輸入框網(wǎng)頁效果196步驟三：在上圖中，后三個(gè)表單輸入框所用的是單選框、復(fù)選框、多行文本輸入框表單控件，這里要注意，兩個(gè)單選框radio的name屬性要設(shè)置為相同的值，否則單選功能效果會(huì)失效。多個(gè)復(fù)選框checkbox的name屬性也要設(shè)置為相同的值，否則提交到服務(wù)器的數(shù)據(jù)會(huì)出現(xiàn)異常，代碼如圖所示。197后三個(gè)表單輸入框代碼198瀏覽網(wǎng)頁時(shí)，經(jīng)常會(huì)看到包含多個(gè)選項(xiàng)的下拉列表，例如，選擇所在的城市、出生年月、興趣愛好等。圖所示即為一個(gè)下拉列表，當(dāng)單擊下拉箭頭時(shí)，會(huì)出現(xiàn)一個(gè)選擇列表。在html中，要想制作出圖所示的下拉列表，就需要使用select下拉列表控件，如圖所示。下列列表下拉列表控件199使用select控件定義下拉列表的基本語法格式如下。在上面的語法中，<select></select>用于在表單中添加一個(gè)下拉列表，<option></option>嵌套在<select></select>中，用于定義下拉列表中的具