10電商網(wǎng)頁設(shè)計(jì)第9章 表單

1、company name網(wǎng)頁設(shè)計(jì)與開發(fā)網(wǎng)頁設(shè)計(jì)與開發(fā)第9章 表單清華大學(xué)出版社清華大學(xué)出版社主要內(nèi)容 理解表單的概念理解表單的概念 掌握表單的屬性設(shè)置掌握表單的屬性設(shè)置 掌握表單對(duì)象屬性的設(shè)置掌握表單對(duì)象屬性的設(shè)置 9.1表單的概念表單的概念l表單可以把來自用戶的信息提交給服務(wù)器，是網(wǎng)站管理員與瀏覽者之間溝通的橋梁。利用表單處理程序可以收集、分析用戶的反饋意見，做出科學(xué)的、合理的決策。 l表單有兩個(gè)重要組成部分：一是描述表單的html源代碼；二是用于處理用戶在表單域中輸入的信息的服務(wù)器端應(yīng)用程序客戶端腳本，如asp.net、jsp等。 l表單使用的標(biāo)記是成對(duì)出現(xiàn)的，在首標(biāo)記和尾標(biāo)記之間的部分就

2、是一個(gè)表單。 l表單表單form基本語法基本語法. l表單表單form語法說明語法說明name：給定表單名稱，表單命名之后就可以用腳本語言(如javascript或vbscript)對(duì)它進(jìn)行控制。action:指定處理表單信息的服務(wù)器端應(yīng)用程序。method :method屬性用于指定表單處理表單數(shù)據(jù)方法，method的值可以為get或是post，默認(rèn)方式是get。 9.2 輸入l 是個(gè)單標(biāo)記，它必須嵌套在表單標(biāo)記中使用，用于定義一個(gè)用戶的輸入項(xiàng)。l基本語法基本語法l語法說明語法說明標(biāo)記主要有六個(gè)屬性，type，name，size，value，maxlength，check。其中name和ty

3、pe是必選的兩個(gè)屬性；name:屬性的值是相應(yīng)程序中的變量名。 在不同的輸入方式下，標(biāo)記的格式略有不同，其他五種屬性因type類型的不同，其含義也不同；type主要有九種類型：text，submit，reset，password，checkbox，radio，image，hidden，file。9.2.1單行文本輸入框textl當(dāng)當(dāng)type=text時(shí)，表示該輸入項(xiàng)的輸入信息是字時(shí)，表示該輸入項(xiàng)的輸入信息是字符串。此時(shí)，瀏覽器會(huì)在相應(yīng)的位置顯示一個(gè)文符串。此時(shí)，瀏覽器會(huì)在相應(yīng)的位置顯示一個(gè)文本框供用戶輸入信息。本框供用戶輸入信息。l基本語法：基本語法：l語法說明語法說明maxlength：設(shè)置

4、單行輸入框可以輸入的最大字符數(shù)，例如限制郵政編碼為6個(gè)數(shù)字、密碼最多為10個(gè)字符等等； size：設(shè)置單行輸入框可顯示的最大字符數(shù)，這個(gè)值總是小于等于maxlength屬性的值，當(dāng)輸入的字符數(shù)超過文本框的長度時(shí)，用戶可以通過移動(dòng)光標(biāo)來查看超過超出的內(nèi)容；value：文本框的值，可以通過設(shè)置value屬性的值來指定當(dāng)表單首次被載入時(shí)顯示在輸入框中的值。9.2.1單行文本輸入框text 輸入用戶姓名輸入用戶姓名 請輸入你的姓名：請輸入你的姓名： 9.2.1單行文本輸入框text9.2.1單行文本輸入框text9.2.2提交按鈕submit和重置按鈕resetl當(dāng)當(dāng)type=submit時(shí)，產(chǎn)生一個(gè)

5、提交按鈕，當(dāng)用時(shí)，產(chǎn)生一個(gè)提交按鈕，當(dāng)用戶單擊該按鈕時(shí)，瀏覽器就會(huì)將表單的輸入信息戶單擊該按鈕時(shí)，瀏覽器就會(huì)將表單的輸入信息傳送給服務(wù)器。傳送給服務(wù)器。l當(dāng)當(dāng)type=reset時(shí)，產(chǎn)生一個(gè)重置按鈕，當(dāng)用戶時(shí)，產(chǎn)生一個(gè)重置按鈕，當(dāng)用戶單擊該按鈕時(shí)，瀏覽器就會(huì)清除表單中所有的輸單擊該按鈕時(shí)，瀏覽器就會(huì)清除表單中所有的輸入信息而恢復(fù)到初始狀態(tài)。一般情況下，提交與入信息而恢復(fù)到初始狀態(tài)。一般情況下，提交與重置按鈕經(jīng)常同時(shí)出現(xiàn)。重置按鈕經(jīng)常同時(shí)出現(xiàn)。l基本語法：基本語法：9.2.2提交按鈕submit和重置按鈕resetl語法說明語法說明提交按鈕的name屬性是可以默認(rèn)的。除name屬性外，它還有一個(gè)

6、可選的屬性value，用于指定顯示在提交按鈕上的文字，value屬性的默認(rèn)值是“提交”。在一個(gè)表單中必須有提交按鈕，否則將無法向服務(wù)器傳送信息；重置按鈕的name屬性也是可以默認(rèn)的。value屬性與submit類似，用于指定顯示在清除按鈕上的文字，value的默認(rèn)值為“重置”。9.2.2提交按鈕submit和重置按鈕reset 注冊注冊 請輸入你的姓名：請輸入你的姓名： 請輸入你的年齡：請輸入你的年齡： 9.2.2提交按鈕submit和重置按鈕reset9.2.2提交按鈕submit和重置按鈕reset9.2.3密碼輸入框密碼輸入框password l 密碼輸入框密碼輸入框password與單

7、行文本輸入框與單行文本輸入框text使用使用起來非常相似，所不同的只是當(dāng)用戶在輸入內(nèi)容時(shí)，起來非常相似，所不同的只是當(dāng)用戶在輸入內(nèi)容時(shí)，是用是用“*”來代替顯示每個(gè)輸入的字符，以保證密碼來代替顯示每個(gè)輸入的字符，以保證密碼的安全性。的安全性。 l基本語法：基本語法：l語法說明語法說明: 在表單中插入密碼框，只要將在表單中插入密碼框，只要將標(biāo)記中標(biāo)記中type屬性值設(shè)為屬性值設(shè)為password就可以插入密碼框，就可以插入密碼框，maxlength、size屬性同文件輸入框?qū)傩酝募斎肟騮ext的屬的屬性一樣。性一樣。9.2.3密碼輸入框密碼輸入框password 輸入用戶名和密碼輸入用戶名和

8、密碼 用戶名：用戶名： 密密&nbsp 碼：碼： 9.2.3密碼輸入框密碼輸入框password 9.2.3密碼輸入框密碼輸入框password 9.2.4復(fù)選框checkboxl基本語法：基本語法： l語法說明：語法說明：用戶可以同時(shí)選中表單中的一個(gè)或多個(gè)復(fù)選項(xiàng)作為輸入用戶可以同時(shí)選中表單中的一個(gè)或多個(gè)復(fù)選項(xiàng)作為輸入信息，由于選項(xiàng)可以有多個(gè)，屬性信息，由于選項(xiàng)可以有多個(gè)，屬性name應(yīng)取不同的值；應(yīng)取不同的值；屬性屬性value的參數(shù)值就是在該選項(xiàng)被選中并提交后，瀏的參數(shù)值就是在該選項(xiàng)被選中并提交后，瀏覽器要傳送給服務(wù)器的數(shù)據(jù)。因此，覽器要傳送給服務(wù)器的數(shù)據(jù)。因此，value屬性的參

9、數(shù)屬性的參數(shù)值必須與選項(xiàng)內(nèi)容相同或基本相同，該屬性是必選項(xiàng)；值必須與選項(xiàng)內(nèi)容相同或基本相同，該屬性是必選項(xiàng)；checked屬性用于指定該選項(xiàng)在初始時(shí)是否被選中。屬性用于指定該選項(xiàng)在初始時(shí)是否被選中。 選擇選擇 請選擇你喜歡的運(yùn)動(dòng)：請選擇你喜歡的運(yùn)動(dòng)： 籃球籃球 足球足球 網(wǎng)球網(wǎng)球 9.2.4復(fù)選框checkbox9.2.4復(fù)選框checkbox9.2.5單選框radiol基本語法：基本語法： l語法說明：語法說明：單選項(xiàng)必須是唯一的，即用戶只能選中表單中單選項(xiàng)必須是唯一的，即用戶只能選中表單中所有單選項(xiàng)中的一項(xiàng)作為輸入信息，因此，所所有單選項(xiàng)中的一項(xiàng)作為輸入信息，因此，所有屬性的有屬性的nam

10、e都應(yīng)取相同的值；都應(yīng)取相同的值；不同的選項(xiàng)其屬性不同的選項(xiàng)其屬性value的值應(yīng)是不同的；的值應(yīng)是不同的；checked屬性用于指定該選項(xiàng)在初始時(shí)是被選屬性用于指定該選項(xiàng)在初始時(shí)是被選中的。中的。 設(shè)置設(shè)置 每頁最多顯示郵件數(shù)：每頁最多顯示郵件數(shù)： 10封封 20封封(推薦推薦) 30封封 50封封 100封封 9.2.5單選框radio9.2.5單選框radio9.2.6圖像按鈕imagel基本語法：基本語法： l語法說明：語法說明：單擊該按鈕時(shí)，瀏覽器就會(huì)將表單的輸入信息單擊該按鈕時(shí)，瀏覽器就會(huì)將表單的輸入信息傳送給服務(wù)器。傳送給服務(wù)器。image類型中的類型中的src屬性是必屬性是必需

11、的，它用于設(shè)置圖像文件的路徑。需的，它用于設(shè)置圖像文件的路徑。表單中圖像按鈕表單中圖像按鈕 你最喜歡的運(yùn)動(dòng)：你最喜歡的運(yùn)動(dòng)： 足球足球 籃球籃球 排球排球 9.2.6圖像按鈕image9.2.6圖像按鈕image9.2.7文件選擇輸入框filel基本語法：基本語法： l語法說明：語法說明：l在表單中插入文件選擇輸入框，只要將在表單中插入文件選擇輸入框，只要將標(biāo)記中標(biāo)記中type屬性值設(shè)為屬性值設(shè)為file就可以插入文件選擇就可以插入文件選擇輸入框。輸入框。9.2.7文件選擇輸入框filel基本語法：基本語法： l語法說明：語法說明：l在表單中插入文件選擇輸入框，只要將在表單中插入文件選擇輸入框

12、，只要將標(biāo)記中標(biāo)記中type屬性值設(shè)為屬性值設(shè)為file就可以插入文件選擇就可以插入文件選擇輸入框。輸入框。 表單中文件選擇輸入框表單中文件選擇輸入框 請選擇文件請選擇文件 9.2.7文件選擇輸入框file9.2.7文件選擇輸入框file9.2.8隱藏框hiddenl基本語法：基本語法： l語法說明：語法說明：當(dāng)當(dāng)type=hidden時(shí)，表示輸入項(xiàng)將不在瀏覽時(shí)，表示輸入項(xiàng)將不在瀏覽器中顯示。器中顯示。9.3多行文本輸入框l用用標(biāo)記可以來定義高度超過一行的標(biāo)記可以來定義高度超過一行的文本輸入框，文本輸入框，標(biāo)記是成對(duì)標(biāo)記，首標(biāo)記是成對(duì)標(biāo)記，首標(biāo)記標(biāo)記和尾標(biāo)記和尾標(biāo)記之間之間的內(nèi)容就是顯示在文本

13、輸入框中的初始信息。的內(nèi)容就是顯示在文本輸入框中的初始信息。標(biāo)記有四個(gè)屬性：標(biāo)記有四個(gè)屬性：name，rows，cols，wrap。l基本語法：基本語法：textarea name=textarea cols= rows= wrap=“l(fā)語法說明：語法說明：name：用于指定文本輸入框的名字。rows：設(shè)置多行文本輸入框的行數(shù)，此屬性的值是數(shù)字，瀏覽器會(huì)自動(dòng)為高度超過一行的文本輸入框添加垂直滾動(dòng)條。但是，當(dāng)輸入文本的行數(shù)小于或等于rows屬性的值時(shí)，滾動(dòng)條將不起作用。cols：設(shè)置多行文本輸入框的列數(shù)。wrap：默認(rèn)值是文本自動(dòng)換行，當(dāng)輸入內(nèi)容超過文本域的右邊界時(shí)會(huì)自動(dòng)轉(zhuǎn)到下一行，而數(shù)據(jù)在被提

14、交處理時(shí)自動(dòng)換行的地方不會(huì)有換行符出現(xiàn)。8.3多行文本輸入框 請?zhí)釋氋F意見請?zhí)釋氋F意見 請?zhí)釋氋F意見：請?zhí)釋氋F意見： 9.3多行文本輸入框9.3多行文本輸入框9.4下拉列表框、l在表單中，通過在表單中，通過和和標(biāo)記可標(biāo)記可以在瀏覽器中設(shè)計(jì)一個(gè)下拉式的列表或帶有滾動(dòng)以在瀏覽器中設(shè)計(jì)一個(gè)下拉式的列表或帶有滾動(dòng)條的列表，用戶可以在列表中選中一個(gè)或多個(gè)選條的列表，用戶可以在列表中選中一個(gè)或多個(gè)選項(xiàng)。項(xiàng)。l基本語法：基本語法：9.4下拉列表框、l語法說明：語法說明： 標(biāo)記是成對(duì)標(biāo)記，首標(biāo)記標(biāo)記是成對(duì)標(biāo)記，首標(biāo)記和尾標(biāo)記和尾標(biāo)記之間的內(nèi)容就是一個(gè)下拉式菜單的內(nèi)容。之間的內(nèi)容就是一個(gè)下拉式菜單的內(nèi)容。標(biāo)記必

15、須與標(biāo)記必須與標(biāo)記配套使用。標(biāo)記配套使用。標(biāo)記標(biāo)記用于定義列表中的各個(gè)選項(xiàng)，用于定義列表中的各個(gè)選項(xiàng)，標(biāo)記有標(biāo)記有namename，sizesize，multiplemultiple三個(gè)屬性。三個(gè)屬性。namename：設(shè)定下拉列表名字。：設(shè)定下拉列表名字。sizesize：可選項(xiàng)，用于改變下拉框的大小。：可選項(xiàng)，用于改變下拉框的大小。sizesize屬性的值是數(shù)屬性的值是數(shù)字，表示顯示在列表中選項(xiàng)的數(shù)目，當(dāng)字，表示顯示在列表中選項(xiàng)的數(shù)目，當(dāng)sizesize屬性的值小于列屬性的值小于列表框中的列表項(xiàng)數(shù)目時(shí)，瀏覽器會(huì)為該下拉框添加滾動(dòng)條，表框中的列表項(xiàng)數(shù)目時(shí)，瀏覽器會(huì)為該下拉框添加滾動(dòng)條，用戶可

16、以使用滾動(dòng)條來查看所有的選項(xiàng)，用戶可以使用滾動(dòng)條來查看所有的選項(xiàng)，sizesize默認(rèn)值為默認(rèn)值為1 1。multiplemultiple：如果加上該屬性，表示允許用戶從列表中選擇多：如果加上該屬性，表示允許用戶從列表中選擇多項(xiàng)。項(xiàng)。9.4下拉列表框、l語法說明語法說明 標(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)容寫在每個(gè)之后。標(biāo)記有兩個(gè)屬性：value和selected，它們都是可選

17、項(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í)被選中。 你最喜歡的運(yùn)動(dòng)：你最喜歡的運(yùn)動(dòng)： 足球足球 籃球籃球 排球排球 9.4下拉列表框、9.4下拉列表框、9.5 buttonl 標(biāo)簽定義一個(gè)按鈕。在 button 元素內(nèi)部，可以放置內(nèi)容，比如文本或圖像。請始終為按鈕規(guī)定 type 屬性,不同的瀏覽器有不同的默認(rèn)定義。html 表單中使用 input 元素來創(chuàng)建按鈕。其他屬性：disabled，name，type（button，reset，submit），valu

18、eclick me! 標(biāo)簽標(biāo)簽l 標(biāo)簽標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）。label 元素不會(huì)向用戶呈現(xiàn)任何特殊效果。不過，它為鼠標(biāo)用戶改進(jìn)了可用性。如果您在 label 元素內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。就是說，當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。 標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同。 標(biāo)簽標(biāo)簽lfieldset 可將表單內(nèi)的相關(guān)元素分組。 標(biāo)簽將表單內(nèi)容的一部分打包，生成一組相關(guān)表單的字段。當(dāng)一組表單元素放到 標(biāo)簽內(nèi)時(shí)，瀏覽器會(huì)以特殊方式來顯示它們，它們可能有特殊的邊界、3d 效果，或者甚至可創(chuàng)建一個(gè)子表單來處理這些元素。 請登錄請登錄 用戶名用戶名: 密碼密碼: 9.5小實(shí)例l在做表單前首先要規(guī)劃好表單所包含的對(duì)象，例如在做表單前首先要規(guī)劃好表單所包含的對(duì)象，例如本實(shí)例用戶注冊表單將包含：用戶名稱、真實(shí)姓名、本實(shí)例用戶注冊表單將包含：用戶名稱、真實(shí)姓名、出生時(shí)間、性別、登陸密碼、確認(rèn)密碼、出生時(shí)間、性別、登陸密碼、確認(rèn)密碼、e-mail、電話、電話、qq、個(gè)人簡介等信息。、個(gè)人簡介等信息。l在表單布局設(shè)計(jì)時(shí)，考慮到用戶完成表單填寫的時(shí)在表單布局設(shè)計(jì)時(shí)，考慮到用戶完成表單填寫的時(shí)間應(yīng)當(dāng)盡可能的短，標(biāo)簽、輸入框均垂直對(duì)齊是很間應(yīng)當(dāng)盡可能的短，標(biāo)簽、輸入框均垂直對(duì)