1、教學(xué)內(nèi)容8.1 表單的概念8.2 輸入8.3 多行文本輸入框8.4 選擇（列表/菜單）8.5 字段集與選項(xiàng)組第1頁/共44頁教學(xué)重點(diǎn)和難點(diǎn)重點(diǎn)：表單控件（輸入、多行文本輸入框、選擇、字段集 與選項(xiàng)組） 的使用。難點(diǎn)：表單控件（輸入、多行文本輸入框、選擇、字段集 與選項(xiàng)組）屬性的合理設(shè)置。第2頁/共44頁導(dǎo)入：第3頁/共44頁導(dǎo)入：第4頁/共44頁第5頁/共44頁8.1 表單的概念 表單可以把來自用戶的信息提交給服務(wù)器，是網(wǎng)站管理員與瀏覽者之間溝通的橋梁。利用表單處理程序可以收集、分析用戶的反饋意見，做出科學(xué)的、合理的決策。 表單有兩個(gè)重要組成部分：一部分是HTML源代碼用于描述表單（例如域、標(biāo)

2、簽和用戶在頁面上看見的按鈕）；另一部分是腳本或應(yīng)用程序用于處理提交的信息（如CGI腳本、ASP.NET、JSP、PHP等）。不使用處理腳本就不能搜集表單數(shù)據(jù)。 第6頁/共44頁8.1 表單的概念 表單使用的標(biāo)記是成對(duì)出現(xiàn)的，在首標(biāo)記和尾標(biāo)記之間的部分就是一個(gè)表單。 基本語法：第7頁/共44頁8.1 表單的概念語法說明：（1 1）namename和idid：表單名稱，表單命名之后就可以使用腳本語言（如JavaScriptJavaScript或VBScriptVBScript）對(duì)它進(jìn)行控制。namename和idid可以同時(shí)使用，但他們是有區(qū)別的：表單元素（formform、inputinput、

3、textareatextarea、selectselect等）與框架元素（iframeiframe、frameframe等）需要用namename，否則提交的表單（或框架元素作用的targettarget）不起作用，而其它更多的非表單元素（如bodybody、tabletable、divdiv、spanspan、ulul、）則需要使用idid，否則CSSCSS或JavaScriptJavaScript也不認(rèn)識(shí)，而且像表單中的單選按鈕組（radioradio）和復(fù)選框組（checkboxcheckbox）一般都是用相同的namename值來代表他們是一組，表單接收網(wǎng)頁也會(huì)自動(dòng)把他們作為一個(gè)數(shù)組來

4、處理。DreamweaverDreamweaver生成的控件代碼總是會(huì)自動(dòng)同時(shí)產(chǎn)生namename和idid屬性，單個(gè)元素的這兩個(gè)屬性的值是相同的，單選按鈕組和復(fù)選框組中每個(gè)成員的namename值是相同的，而idid值是不同的，因?yàn)閕did必須是唯一的。第8頁/共44頁8.1 表單的概念（2 2）actionaction：動(dòng)作屬性，指定處理表單信息的服務(wù)器端應(yīng)用程序。該程序可以是ASP.NETASP.NET程序，也可以是CGICGI、PHPPHP、JSPJSP等腳本。還可以是C C、Visual BasicVisual Basic等編寫的動(dòng)態(tài)鏈接庫等程序。（3 3）methodmethod：

5、方法屬性，用于指定表單向服務(wù)器提交數(shù)據(jù)的方法，methodmethod的值可以為getget或postpost，默認(rèn)方式是getget。由于getget方式的安全性低、傳送的數(shù)據(jù)量較小等缺點(diǎn)，所以一般采用postpost方式（所以新版DreamweaverDreamweaver產(chǎn)生的表單methodmethod值默認(rèn)就是postpost）。但getget也有提交效率較高的優(yōu)點(diǎn)，所以僅當(dāng)請(qǐng)求查詢功能時(shí)使用getget，當(dāng)請(qǐng)求會(huì)改變（數(shù)據(jù)庫）服務(wù)器數(shù)據(jù)或狀態(tài)時(shí)（比如添加、更新、刪除數(shù)據(jù)的操作）則應(yīng)該使用postpost。 第9頁/共44頁8.2 輸入 是個(gè)單標(biāo)記，它必須嵌套在表單標(biāo)記中使用，用于定

6、義一個(gè)用戶的輸入項(xiàng)。 基本語法： 語法說明： 標(biāo)記的屬性見表8-1，一般name和type是必選的兩個(gè)屬性，name屬性的值是相應(yīng)程序中的變量名。第10頁/共44頁8.2 輸入第11頁/共44頁8.2 輸入第12頁/共44頁8.2.1 單行文本輸入框 當(dāng)type=“text”時(shí)，表示該輸入項(xiàng)的輸入信息是字符串。此時(shí)，瀏覽器會(huì)在相應(yīng)的位置顯示一個(gè)文本框供用戶輸入信息。 基本語法： 語法說明：text文本框是一個(gè)只能輸入一行文字的輸入框。標(biāo)記除了有兩個(gè)必選的屬性name和type除外，還有常用可選屬性：maxlength和value。第13頁/共44頁8.2.1 單行文本輸入框（1）maxleng

7、th：設(shè)置單行輸入框可以輸入的最大字符數(shù)，例如限制郵政編碼為6個(gè)數(shù)字、密碼最多為10個(gè)字符等等；（2）value：文本框的默認(rèn)值，可以通過設(shè)置value屬性的值來指定當(dāng)表單首次被載入時(shí)顯示在輸入框中的值。（3）如果需要?jiǎng)?chuàng)建一個(gè)隨著表單提交一同傳遞的元素，希望用戶看到，卻又不允許編輯，可以添加readonly屬性。第14頁/共44頁8.2.1 單行文本輸入框第15頁/共44頁8.2.2 提交按鈕和重置按鈕 用戶輸入的信息如果不發(fā)送到服務(wù)器，就沒有意義，所以總是要為表單提供提交按鈕。 當(dāng)type=“submit”時(shí)，產(chǎn)生一個(gè)提交按鈕，當(dāng)用戶單擊該按鈕時(shí)，瀏覽器就會(huì)將表單的輸入信息傳送給服務(wù)器。 當(dāng)

8、type=“reset”時(shí)，產(chǎn)生一個(gè)重置按鈕，當(dāng)用戶單擊該按鈕時(shí)，瀏覽器就會(huì)清除表單中所有的輸入信息而恢復(fù)到初始狀態(tài)。一般情況下，提交與重置按鈕經(jīng)常同時(shí)出現(xiàn)。 基本語法：第16頁/共44頁8.2.2 提交按鈕和重置按鈕 語法說明：（1）提交按鈕的name屬性是可以默認(rèn)的。除name屬性外，它還有一個(gè)可選的屬性value，用于指定顯示在提交按鈕上的文字，value屬性的默認(rèn)值是“提交”。在一個(gè)表單中必須有提交按鈕，否則將無法向服務(wù)器傳送信息。（2）重置按鈕的name屬性也是可以默認(rèn)的。value屬性與submit類似，用于指定顯示在清除按鈕上的文字，value的默認(rèn)值為“重置”。第17頁/共44

9、頁8.2.2 提交按鈕和重置按鈕 第18頁/共44頁8.2.3 密碼輸入框 密碼輸入框password與單行文本輸入框text使用起來非常相似，所不同的只是當(dāng)用戶在輸入內(nèi)容時(shí)，是用“*”來代替顯示每個(gè)輸入的字符，以保證密碼的安全性。 基本語法： 語法說明：在表單中插入密碼框，只要將標(biāo)記中type屬性值設(shè)為password就可以插入密碼框，maxlength屬性同文件輸入框text的屬性一樣。第19頁/共44頁8.2.3 密碼輸入框第20頁/共44頁8.2.4 復(fù)選框 當(dāng)type=“checkbox”時(shí)，表示該輸入是一個(gè)復(fù)選框。 基本語法： 語法說明：（1）用戶可以同時(shí)選中表單中的一個(gè)或多個(gè)復(fù)選

10、項(xiàng)作為輸入信息，由于選項(xiàng)可以有多個(gè)，屬性name應(yīng)取相同的值，使服務(wù)器接收頁面作為一個(gè)字符串?dāng)?shù)組來處理，不推薦使用不同的值，若有需要的話可以使用不同的id值來區(qū)分。第21頁/共44頁8.2.4 復(fù)選框（2）屬性value的參數(shù)值就是在該選項(xiàng)被選中并提交后，瀏覽器要傳送給服務(wù)器的數(shù)據(jù)。因此，value屬性的參數(shù)值必須與選項(xiàng)標(biāo)簽匹配，該屬性是必選項(xiàng)；（3）checked屬性用于指定該選項(xiàng)在初始時(shí)是否被選中。第22頁/共44頁8.2.5 單選按鈕當(dāng)type=“radio”時(shí)，表示該輸入項(xiàng)是一個(gè)單選按鈕。基本語法： 語法說明：（1）單選項(xiàng)必須是唯一的，即用戶只能選中表單中所有單選項(xiàng)中的一項(xiàng)作為輸入信息

11、，因此，所有屬性的name都應(yīng)取相同的值；（2）不同的選項(xiàng)其屬性value的值應(yīng)是不同的；（3）checked屬性用于指定該選項(xiàng)在初始時(shí)是被選中的。第23頁/共44頁8.2.5 單選按鈕第24頁/共44頁8.2.6 圖像域 為了界面美觀，可以用一張圖片作為提交或者其他類型的按鈕，當(dāng)type=”image”時(shí)，瀏覽器就會(huì)在相應(yīng)的位置產(chǎn)生一個(gè)圖像按鈕。 基本語法：基本語法： 語法說明語法說明：默認(rèn)的圖像域按鈕只有提交表單的功能，如果要改變其用途，則需要將某種行為附加到表單元素中。image類型中的src屬性是必需的，它用于設(shè)置圖像文件的路徑。 第25頁/共44頁8.2.6 圖像域第26頁/共44頁

12、8.2.7 文件域 文件選擇輸入框允許用戶在自己的硬盤中瀏覽文件，并把文件名及其路徑作為表單數(shù)據(jù)上傳，主要用在上傳程序中。 基本語法：基本語法： 語法說明：語法說明：（1）在表單中插入文件選擇輸入框，只要將標(biāo)記中type屬性值設(shè)為file就可以插入文件選擇輸入框。（2）enctype屬性確保文件采用正確的格式上傳。（3）對(duì)于允許文件上傳的表單，不能使用get方法。第27頁/共44頁8.2.7 文件域第28頁/共44頁8.2.8 隱藏域 如果不想顯示某些選項(xiàng)，這些信息與用戶選擇無關(guān)，但服務(wù)器應(yīng)用程序運(yùn)行時(shí)又是需要的，此時(shí)就可以把這些選項(xiàng)中type屬性的值設(shè)為”hidden”。 基本語法：基本語法

13、： 語法說明：語法說明：（1）type=hidden時(shí)，表示輸入項(xiàng)將不在瀏覽器中顯示。（2）隱藏域可以通過JavaScript代碼動(dòng)態(tài)對(duì)隱藏域中的信息進(jìn)行存儲(chǔ)訪問。第29頁/共44頁 用標(biāo)記可以定義高度超過一行的文本輸入框，標(biāo)記是成對(duì)標(biāo)記，首標(biāo)記和尾標(biāo)記之間的內(nèi)容就是顯示在文本輸入框中的初始信息。 基本語法：基本語法： 語法說明：語法說明：（1）name：用于指定文本輸入框的名字。8.3 多行文本輸入框第30頁/共44頁8.3 多行文本輸入框（2）rows：設(shè)置多行文本輸入框的行數(shù)，此屬性的值是數(shù)字，瀏覽器會(huì)自動(dòng)為高度超過一行的文本輸入框添加垂直滾動(dòng)條。但是，當(dāng)輸入文本的行數(shù)小于或等于rows

14、屬性的值時(shí)，滾動(dòng)條將不起作用。（3）cols：設(shè)置多行文本輸入框的列數(shù)。第31頁/共44頁8.4 選擇（列表/菜單） 在表單中，通過和標(biāo)記可以在瀏覽器中設(shè)計(jì)一個(gè)下拉式的列表或帶有滾動(dòng)條的列表，用戶可以在列表中選中一個(gè)或多個(gè)選項(xiàng)。 基本語法：第32頁/共44頁8.4 選擇（列表/菜單）語法說明：語法說明：（1）標(biāo)記是成對(duì)標(biāo)記，首標(biāo)記和尾標(biāo)記之間的內(nèi)容就是一個(gè)下拉式菜單的內(nèi)容。標(biāo)記必須與標(biāo)記配套使用。標(biāo)記用于定義列表中的各個(gè)選項(xiàng)，標(biāo)記有name、multiple、size和disabled屬性。 name：設(shè)定下拉列表名字。 size：可選項(xiàng)，用于改變下拉框的大小。size屬性的值是數(shù)字，表示顯示

15、在列表中選項(xiàng)的數(shù)目，當(dāng)size屬性的值小于列表框中的列表項(xiàng)數(shù)目時(shí)，瀏覽器會(huì)為該下拉框添加滾動(dòng)條，用戶可以使用滾動(dòng)條來查看所有的選項(xiàng)，size默認(rèn)值為1。 multiple：如果加上該屬性，表示允許用戶從列表中選擇多項(xiàng)。使用multiple時(shí)size屬性的值不能太小，否則瀏覽器中的顯示會(huì)不正常。第33頁/共44頁8.4 選擇（列表/菜單）（2）標(biāo)記用來定義列表中的選項(xiàng)，設(shè)置列表中顯示的文字和列表?xiàng)l目的值，列表中每個(gè)選項(xiàng)有一個(gè)顯示的文本和一個(gè)value值（當(dāng)選項(xiàng)被選擇時(shí)傳送給處理程序的信息）。標(biāo)記是單標(biāo)記，它必須嵌套在標(biāo)記中使用。一個(gè)列表中有多少個(gè)選項(xiàng)，就要有多少個(gè)標(biāo)記與之相對(duì)應(yīng)，選項(xiàng)的具體內(nèi)容寫

16、在每個(gè)之后。標(biāo)記有兩個(gè)屬性：value和selected，它們都是可選項(xiàng)。 value: 用于設(shè)置當(dāng)該選項(xiàng)被選中并提交后，瀏覽器傳送給服務(wù)器的數(shù)據(jù)。如果是默認(rèn)狀態(tài)，瀏覽器將傳送選項(xiàng)的內(nèi)容。 selected :用來指定選項(xiàng)的初始狀態(tài)，表示該選項(xiàng)在初始時(shí)被選中。第34頁/共44頁8.4 選擇（列表/菜單）思考：將示例中的size值改為1，在IE9、Chrome和Firefox中的顯示有何不同？第35頁/共44頁8.5 字段集與選項(xiàng)組 fieldset元素可將表單內(nèi)的相關(guān)元素分組。標(biāo)簽將表單內(nèi)容的一部分打包，生成一組相關(guān)表單的字段。標(biāo)簽沒有必需的或唯一的屬性。 當(dāng)一組表單元素放到 標(biāo)簽內(nèi)時(shí)，瀏覽器

17、會(huì)以特殊方式來顯示它們，它們可能有特殊的邊界、3D 效果，或者甚至可創(chuàng)建一個(gè)子表單來處理這些元素。 標(biāo)簽為元素定義標(biāo)題。 標(biāo)簽定義選項(xiàng)組。此元素允許您組合選項(xiàng)。當(dāng)您使用一個(gè)長的選項(xiàng)列表時(shí)，對(duì)相關(guān)的選項(xiàng)進(jìn)行組合會(huì)使處理更加容易。第36頁/共44頁8.5 字段集與選項(xiàng)組字段集與選項(xiàng)組fieldset width: 320px; 請(qǐng)選擇你喜歡的高校（可多選） 北京大學(xué) 清華大學(xué) 第37頁/共44頁8.5 字段集與選項(xiàng)組 浙江大學(xué) 浙江越秀外國語學(xué)院 四川大學(xué) 電子科技大學(xué) 思考：以示例中如果去掉字段集和選項(xiàng)組，提交到服務(wù)器的數(shù)據(jù)是否會(huì)受到影響？第38頁/共44頁 表單具有服務(wù)器端和客戶端之間雙向服務(wù)和溝通的作用，它提供了包含如文本框、復(fù)選框、按鈕等的輸入界面。當(dāng)它接受了用戶從瀏覽器上的輸入數(shù)據(jù)或者選擇并送至服務(wù)器后，根據(jù)action屬性指定的處理程序，按照method定義的數(shù)據(jù)提交方法（get和post），將數(shù)據(jù)準(zhǔn)備好提交給位于后端服務(wù)器內(nèi)的CGI程序或服務(wù)器端的Script程序（如ASPNET、JSP、PHP）。使用了這種結(jié)構(gòu)的HTML文件將可改變以往用戶對(duì)