網(wǎng)頁設(shè)計表單

1、第91主要內(nèi)容理解表單的概念 掌握表單的屬性設(shè)置掌握表單對象屬性的設(shè)置 29表單的概念表單是網(wǎng)頁中提供的一種交互式操作手段，在網(wǎng)頁中的使用十分廣泛。無論是提交搜索的信息，還是網(wǎng)上注冊等都需要使用表單。用戶可以通過提交表單信息與服務器進行動態(tài)交流，是網(wǎng)站管理員與瀏覽者之間溝通的橋梁。利用表單處理程序可以收集、分析用戶的反饋意見，做出科學的、合理的決策。39表單的概念 在網(wǎng)頁中，最常見的表單形式主要包括文本框、單選按鈕、復選框、下拉菜單、按鈕等。文本框下拉菜單按鈕49表單的概念表單有兩個重要組成部分：一是描述表單的HTML源代碼；二是用于處理用戶在表單域中輸入的信息的服務器端應用程序客戶端腳本，如

2、ASP.NET、JSP等。 表單使用的標記是成對出現(xiàn)的，在首標記和尾標記之間的部分就是一個表單。 5 是個單標記，它必須嵌套在表單標記中使用，用于定義一個用戶的輸入項。基本語法9. 1單行文本輸入框text6語法說明標記主要屬性有：type，name，size，value，maxlength等。其中name和type是必選的兩個屬性；Name:屬性的值是相應程序中的變量名。 在不同的輸入方式下，標記的格式略有不同，其他五種屬性因type類型的不同，其含義也不同；type主要有九種類型：text，submit，reset，password，checkbox，radio，image，hidden，

3、file。9. 1單行文本輸入框text79. 1單行文本輸入框text當type=text時，表示該輸入項的輸入信息是字符串。此時，瀏覽器會在相應的位置顯示一個文本框供用戶輸入信息?；菊Z法：8語法說明maxlength：設(shè)置單行輸入框可以輸入的最大字符數(shù)，例如限制郵政編碼為6個數(shù)字、密碼最多為10個字符等等； size：設(shè)置單行輸入框可顯示的最大字符數(shù)，這個值總是小于等于maxlength屬性的值，當輸入的字符數(shù)超過文本框的長度時，用戶可以通過移動光標來查看超過超出的內(nèi)容；value：文本框的值，可以通過設(shè)置value屬性的值來指定當表單首次被載入時顯示在輸入框中的值。9. 1單行文本輸入

4、框text9 插入文本框 登錄名： 9. 1單行文本輸入框text109. 1單行文本輸入框text119.2密碼輸入框password 密碼輸入框password與單行文本輸入框text使用起來非常相似，所不同的只是當用戶在輸入內(nèi)容時，是用“*”來代替顯示每個輸入的字符，以保證密碼的安全性。 基本語法：12語法說明: 在表單中插入密碼框，只要將標記中type屬性值設(shè)為password就可以插入密碼框，maxlength、size屬性同文件輸入框text的屬性一樣。9.2密碼輸入框password 13 輸入用戶名和密碼 用戶名： 密  碼： 9.2密碼輸入框password 149.

5、2密碼輸入框password 159.3提交按鈕submit和重置按鈕reset當type=submit時，產(chǎn)生一個提交按鈕，當用戶單擊該按鈕時，瀏覽器就會將表單的輸入信息傳送給服務器。當type=reset時，產(chǎn)生一個重置按鈕，當用戶單擊該按鈕時，瀏覽器就會清除表單中所有的輸入信息而恢復到初始狀態(tài)。一般情況下，提交與重置按鈕經(jīng)常同時出現(xiàn)。16提交基本語法：9.3提交按鈕submit和重置按鈕reset17語法說明提交按鈕的name屬性是可以默認的。除name屬性外，它還有一個可選的屬性value，用于指定顯示在提交按鈕上的文字，value屬性的默認值是“提交”。在一個表單中必須有提交按鈕，否

6、則將無法向服務器傳送信息；重置按鈕的name屬性也是可以默認的。value屬性與submit類似，用于指定顯示在清除按鈕上的文字，value的默認值為“重置”。9.3提交按鈕submit和重置按鈕reset18 注冊 請輸入你的姓名： 請輸入你的年齡： 9.3提交按鈕submit和重置按鈕reset199.3提交按鈕submit和重置按鈕reset209. 4單選按鈕和復選框按鈕單選按鈕基本語法： 語法說明：單選項必須是唯一的，即用戶只能選中表單中所有單選項中的一項作為輸入信息，因此，所有屬性的name都應取相同的值；不同的選項其屬性value的值應是不同的；checked屬性用于指定該選項在

7、初始時是被選中的。21 設(shè)置 每頁最多顯示郵件數(shù)： 10封 20封(推薦) 30封 50封 100封 9. 4單選按鈕和復選框按鈕229. 4單選按鈕和復選框按鈕239. 4單選按鈕和復選框按鈕復選框按鈕基本語法： 語法說明：用戶可以同時選中表單中的一個或多個復選項作為輸入信息，由于選項可以有多個，屬性name應取不同的值；屬性value的參數(shù)值就是在該選項被選中并提交后，瀏覽器要傳送給服務器的數(shù)據(jù)。因此，value屬性的參數(shù)值必須與選項內(nèi)容相同或基本相同，該屬性是必選項；checked屬性用于指定該選項在初始時是否被選中。24 選擇 請選擇你喜歡的運動： 籃球足球 網(wǎng)球 9. 4單選按鈕和復

8、選框按鈕259. 4單選按鈕和復選框按鈕269. 4單選按鈕和復選框按鈕圖像按鈕基本語法： 語法說明：單擊該按鈕時，瀏覽器就會將表單的輸入信息傳送給服務器。image類型中的src屬性是必需的，它用于設(shè)置圖像文件的路徑。27表單中圖像按鈕 你最喜歡的運動： 足球 籃球 排球 9. 4單選按鈕和復選框按鈕289. 4單選按鈕和復選框按鈕299. 4單選按鈕和復選框按鈕 標記中type屬性值button用來插入表單中的標準按鈕。標準按鈕的“value”屬性，可以根據(jù)制作者的需要，任意設(shè)置屬性值。button基本語法：309.5多行文本輸入框用標記可以來定義高度超過一行的文本輸入框，標記是成對標記，

9、首標記和尾標記之間的內(nèi)容就是顯示在文本輸入框中的初始信息。標記屬性有：name，rows，cols，readonly，disabled?；菊Z法：textarea name=textarea cols= rows= wrap=“31語法說明：name：用于指定文本輸入框的名字。rows：設(shè)置多行文本輸入框的行數(shù)，此屬性的值是數(shù)字，瀏覽器會自動為高度超過一行的文本輸入框添加垂直滾動條。但是，當輸入文本的行數(shù)小于或等于rows屬性的值時，滾動條將不起作用。cols：設(shè)置多行文本輸入框的列數(shù)。disabled：規(guī)定第一次加載的時候該文本區(qū)不可用。Readonly：將文本區(qū)的內(nèi)容設(shè)置為不可修改。9.5

10、多行文本輸入框32 請?zhí)釋氋F意見 請?zhí)釋氋F意見： 9.5多行文本輸入框339.5多行文本輸入框349.6下拉列表框、在表單中，通過和標記可以在瀏覽器中設(shè)計一個下拉式的列表或帶有滾動條的列表，用戶可以在列表中選中一個或多個選項?；菊Z法：359.6下拉列表框、語法說明： 標記是成對標記，首標記和尾標記之間的內(nèi)容就是一個下拉式菜單的內(nèi)容。標記必須與標記配套使用。標記用于定義列表中的各個選項，標記有name，size，multiple三個屬性。name：設(shè)定下拉列表名字。size：可選項，用于改變下拉框的大小。size屬性的值是數(shù)字，表示顯示在列表中選項的數(shù)目，當size屬性的值小于列表框中的列表項

11、數(shù)目時，瀏覽器會為該下拉框添加滾動條，用戶可以使用滾動條來查看所有的選項，size默認值為1。multiple：如果加上該屬性，表示允許用戶從列表中選擇多項。369.6下拉列表框、語法說明 標記用來定義列表中的選項，設(shè)置列表中顯示的文字和列表條目的值，列表中每個選項有一個顯示的文本和一個value值 (當選項被選擇時傳送給處理程序的信息)。標記必須嵌套在標記中使用。一個列表中有多少個選項，就要有多少個標記與之相對應，選項的具體內(nèi)容寫在每個之后。標記有兩個屬性：value和selected，它們都是可選項。value: 用于設(shè)置當該選項被選中并提交后，瀏覽器傳送給服務器的數(shù)據(jù)。如果是默認狀態(tài)，瀏

12、覽器將傳送選項的內(nèi)容。selected :用來指定選項的初始狀態(tài)，表示該選項在初始時被選中。37 你最喜歡的運動： 足球 籃球 排球 音樂 美術(shù) 體育 9.6下拉列表框、389.6下拉列表框、399. 7上傳文件表單file基本語法： 語法說明：在表單中插入文件選擇輸入框，只要將標記中type屬性值設(shè)為file就可以插入文件選擇輸入框。409. 7上傳文件表單file41表單中文件選擇輸入框 請選擇文件 9. 7上傳文件表單file429. 7上傳文件表單file43 用戶通過submit按鈕來提交表單，將收集的信息發(fā)送到Web服務器上，這一過程通過表單的action屬性指定所收集的信息發(fā)送到

13、哪里。表單Form基本語法9. 8處理表單44語法說明name：給定表單名稱，表單命名之后就可以用腳本語言(如JavaScript或VBScript)對它進行控制。action:指定處理表單信息的服務器端應用程序的路徑。一般情況下，action屬性主要用來處理用戶通過表單提交的信息，如保存、回復等。表單的處理程序定義的是表單要提交的地址，也就是表單中收集到的資料將要傳遞的程序地址。這一地址可以是絕對地址，也可以是相對地址，還可以是一些其他的地址形式，如發(fā)送E-mail等。method :method屬性用于指定表單處理表單數(shù)據(jù)方法，method的值可以為get或是post，默認方式是get。它

14、決定了表單中已收集數(shù)據(jù)是什么樣的方法發(fā)送到服務器的。 9. 8處理表單45 表單標簽 發(fā)送郵件姓名：郵件：內(nèi)容： 9. 8處理表單469. 8處理表單479.9定義域集合 如果表單內(nèi)包含多個控件，可以通過 標簽將相關(guān)主題的控件或標簽組合在一起（定義域集合），這樣使網(wǎng)頁中的表單分布更合理，結(jié)構(gòu)更清晰，并增加網(wǎng)頁的易讀性，同時也有利于Tab鍵在元素之間移動。 請登錄 用戶名: 密碼: 489.9定義域集合語法說明可將表單內(nèi)的相關(guān)元素分組。 標簽將表單內(nèi)容的一部分打包，生成一組相關(guān)表單的字段。標簽為設(shè)置標題。當一組表單元素放到 標簽內(nèi)時，瀏覽器會以特殊方式來顯示它們，它們可能有特殊的邊界或者可創(chuàng)建一個子表單來處理這些元素。499.9定義域集合 定義域集合 請登錄 用戶名: 密碼: 509.9定義域集合519. 10使用Tab鍵與快捷鍵基本語法： 語法說明：通過定義tabindex屬性值，可以確定使用Tab鍵在表單的各個組件之間移動的順序。通過定義accesskey屬性值，給表單中的元素指定一個快捷方式。529.11小實例表單應用 會員注冊 用戶名： 密碼： 539.11小實例