HTML+CSS+JavaScript網(wǎng)頁(yè)設(shè)計(jì)-第4章-HTML表單課件

第1頁(yè)第4章HTML表單本章概述本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第1頁(yè)第4章HTML表單本章概述第2頁(yè)本章概述表單是實(shí)現(xiàn)用戶與網(wǎng)頁(yè)之間數(shù)據(jù)交互的必要標(biāo)簽，通過(guò)在網(wǎng)頁(yè)中添加表單可以實(shí)現(xiàn)諸如會(huì)員注冊(cè)、用戶登錄、提交資料等交互功能。本章將主要講解如何在網(wǎng)頁(yè)中制作表單，并使用表單元素創(chuàng)建表單。第2頁(yè)本章概述表單是實(shí)現(xiàn)用戶與網(wǎng)頁(yè)之間數(shù)據(jù)交互的必要標(biāo)簽，通第3頁(yè)本章的學(xué)習(xí)目標(biāo)了解表單的基本組成部分掌握<form>元素的常用屬性及其用法掌握HTML中的常用表單輸入類(lèi)型了解<input>元素的常用屬性及其用法掌握下列列表的創(chuàng)建與使用掌握多行文本控件的用法了解<button>元素的基本用法掌握<fieldset>和<legend>元素的用法第3頁(yè)本章的學(xué)習(xí)目標(biāo)了解表單的基本組成部分第4頁(yè)主要內(nèi)容4.1表單概述

4.2創(chuàng)建表單 4.3組織表單結(jié)構(gòu)4.4disabled與readonly控件4.5本章小結(jié) 4.6思考和練習(xí)第4頁(yè)主要內(nèi)容4.1表單概述 第5頁(yè)4.1表單概述表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端的HTML標(biāo)簽元素，服務(wù)器端程序可以處理表單傳過(guò)來(lái)的數(shù)據(jù)，從而完成與用戶的各種交互動(dòng)作網(wǎng)頁(yè)上具有可輸入表項(xiàng)及項(xiàng)目選擇等控件所組成的欄目稱為表單，其中包括各種對(duì)象，如文字輸入框、單選按鈕、復(fù)選框和提交按鈕等。通俗地講，表單就是一個(gè)將用戶信息組織起來(lái)的容器。將需要用戶填寫(xiě)的內(nèi)容放置在表單容器中，當(dāng)用戶單擊“提交”按鈕時(shí)，表單會(huì)將數(shù)據(jù)統(tǒng)一發(fā)送給服務(wù)器第5頁(yè)4.1表單概述表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服第6頁(yè)表單概述幾乎每當(dāng)需要從網(wǎng)站訪問(wèn)者那里收集信息時(shí)，都需要使用“表單”。典型的表單應(yīng)用場(chǎng)景有：登錄、注冊(cè)：登錄時(shí)輸入用戶名和密碼，單擊“登錄”按鈕；注冊(cè)時(shí)填寫(xiě)個(gè)人信息，提交到服務(wù)器。網(wǎng)上訂單：在網(wǎng)上購(gòu)買(mǎi)商品時(shí)，提交訂單，輸入個(gè)人信息和付款方式等。調(diào)查問(wèn)卷：通常是一些選擇題形式的問(wèn)卷，回答這些問(wèn)題，以便形成統(tǒng)計(jì)數(shù)據(jù)，進(jìn)一步分析。網(wǎng)上搜索：輸入關(guān)鍵字，搜索想要的信息或資源。第6頁(yè)表單概述幾乎每當(dāng)需要從網(wǎng)站訪問(wèn)者那里收集信息時(shí)，都需要第7頁(yè)表單概述將表單數(shù)據(jù)發(fā)送給服務(wù)器時(shí)，會(huì)將其轉(zhuǎn)換成“名稱/值”對(duì)的形式。名稱對(duì)應(yīng)于表單控件的名稱，而值則是用戶輸入的內(nèi)容或一個(gè)被選定選項(xiàng)的值。服務(wù)器接收到數(shù)據(jù)后，會(huì)處理數(shù)據(jù)并返回相應(yīng)的結(jié)果。第7頁(yè)表單概述將表單數(shù)據(jù)發(fā)送給服務(wù)器時(shí)，會(huì)將其轉(zhuǎn)換成“名稱/第8頁(yè)主要內(nèi)容4.1表單概述 4.2創(chuàng)建表單

4.3組織表單結(jié)構(gòu)4.4disabled與readonly控件4.5本章小結(jié) 4.6思考和練習(xí)第8頁(yè)主要內(nèi)容4.1表單概述 第9頁(yè)4.2創(chuàng)建表單HTML中用于創(chuàng)建表單的標(biāo)簽是<form>，然后在<form>元素中，可以放置各種類(lèi)型的表單控件。在網(wǎng)頁(yè)中，<form>和</form>這對(duì)標(biāo)簽用來(lái)創(chuàng)建一個(gè)表單，在標(biāo)簽對(duì)之間的一切都屬于表單的內(nèi)容。<form>元素通常是一些用來(lái)采集用戶輸入信息的表單控件，也還可以包含其他標(biāo)記，如段落、標(biāo)題等。但是，它不能包含另外一個(gè)<form>元素，即<form>不能嵌套。第9頁(yè)4.2創(chuàng)建表單HTML中用于創(chuàng)建表單的標(biāo)簽是<for第10頁(yè)<form>在<form>標(biāo)記中，可以設(shè)置表單的基本屬性，一般情況下，一個(gè)<form>標(biāo)簽應(yīng)該至少帶有action和method兩個(gè)屬性。除此之外，還可以包含所有通用通性及以下屬性：enctype、novalidate、target、autocomplete和accept-charset。第10頁(yè)<form>在<form>標(biāo)記中，可以設(shè)置表單的基本第11頁(yè)action屬性action屬性指明表單提交后對(duì)數(shù)據(jù)的處理。通常，action屬性的值是一個(gè)地址，也就是表單收集到的信息將要傳遞到這個(gè)地址，這個(gè)地址可以是絕對(duì)地址，也可以是相對(duì)地址，還可以是其它形式的處理程序。例如，一個(gè)登錄表單，用戶輸入的登錄名和密碼信息可能被傳送到Web服務(wù)器中一個(gè)以ASP.NET編寫(xiě)的頁(yè)面，叫做login.aspx，如果該頁(yè)面與當(dāng)前頁(yè)面在同一目錄，則可以使用相當(dāng)?shù)刂罚?lt;formaction="login.aspx">第11頁(yè)action屬性action屬性指明表單提交后對(duì)數(shù)據(jù)第12頁(yè)method屬性瀏覽器向服務(wù)器發(fā)送表單數(shù)據(jù)能夠使用的有兩種方法：HTTPget和HTTPpost。使用<form>標(biāo)簽的method屬性指定應(yīng)該使用哪一種方法。該屬性有兩個(gè)取值，分別對(duì)應(yīng)兩種方法： get：使用HTTPget方法向服務(wù)器發(fā)送表單數(shù)據(jù)，表單數(shù)據(jù)被附加在<form>元素中由action屬性指定的URL尾部。表單數(shù)據(jù)與URL之間使用問(wèn)號(hào)分隔。在問(wèn)號(hào)之后是各表單控件的“名稱/值”對(duì)。每個(gè)“名稱/值”對(duì)之間使用與符號(hào)&分隔。 post：使用HTTPpost方法向服務(wù)器發(fā)送來(lái)自表單的數(shù)據(jù)，表單數(shù)據(jù)將在HTTP頭部中透明地傳送。第12頁(yè)method屬性瀏覽器向服務(wù)器發(fā)送表單數(shù)據(jù)能夠使用的第13頁(yè)Id和name屬性id屬性可以唯一標(biāo)識(shí)頁(yè)面中的<form>元素。就如同可以使用它唯一標(biāo)識(shí)頁(yè)面中的任何其它HTML元素一樣。id屬性的值在文檔中應(yīng)該是唯一的。name屬性是id屬性的前任，而且如id屬性一樣，其取值在文檔內(nèi)應(yīng)該保持唯一。一種好的命名習(xí)慣是以字符frm作為表單的id和name屬性值的起始，并使用值的剩余部分描述表單收集數(shù)據(jù)的類(lèi)型——例如，frmLogin或frmSearch。第13頁(yè)Id和name屬性id屬性可以唯一標(biāo)識(shí)頁(yè)面中的<fo第14頁(yè)enctype屬性如果使用HTTPpost方法向服務(wù)器發(fā)送數(shù)據(jù)，則可以使用enctype屬性指定瀏覽器在將數(shù)據(jù)發(fā)送到服務(wù)器之前對(duì)其進(jìn)行編碼。瀏覽器通常支持如下3種類(lèi)型的編碼方式： application/x-www-form-urlencoded：這是大多數(shù)表單使用的標(biāo)準(zhǔn)方法。瀏覽器使用該方法是因?yàn)橐恍┳址缈崭?、加?hào)以及一些非字母數(shù)字字符，不能直接發(fā)送到Web服務(wù)器。所以這些字符會(huì)被其他用以替換它們的字符所替代。 multipart/form-data：允許數(shù)據(jù)分成部分傳送，每一個(gè)連續(xù)部分以其在表單中出現(xiàn)的順序?qū)?yīng)于一個(gè)表單控件。通常被用于訪問(wèn)者需要向服務(wù)器上傳文件(如照片)時(shí)。 text/plain：以純文本形式不加修改地將數(shù)據(jù)發(fā)送至服務(wù)器。第14頁(yè)enctype屬性如果使用HTTPpost方法向服第15頁(yè)accept-charset屬性不同語(yǔ)言通過(guò)不同的“字符集”(characterset)或字符組書(shū)寫(xiě)。然而，在創(chuàng)建網(wǎng)站時(shí)，開(kāi)發(fā)人員不會(huì)將網(wǎng)站設(shè)計(jì)成能夠理解所有語(yǔ)言。accept-charset屬性背后的思想是，使用該屬性可以指定一系列用戶能夠輸入，并且之后服務(wù)器可以處理的字符編碼。該屬性的值應(yīng)該是一個(gè)由空格或逗號(hào)分隔的字符集列表。例如，下面的代碼指明服務(wù)器可以接受UTF-8編碼：accept-charset="utf-8"第15頁(yè)accept-charset屬性不同語(yǔ)言通過(guò)不同的“第16頁(yè)novalidate屬性novalidate屬性是HTML5新增的一個(gè)布爾屬性，用以指定表單在提交時(shí)是否應(yīng)該進(jìn)行校驗(yàn)。如果使用了該屬性，則關(guān)閉對(duì)表單內(nèi)所有元素的有效性檢查。如果希望只取消表單中較少部分內(nèi)容的驗(yàn)證，則需要在這些不需要驗(yàn)證表單控件上使用novalidate屬性。目前支持該屬性的瀏覽器有Chrome6+、Firefox4+、Opera10.6+以及IE10+。第16頁(yè)novalidate屬性novalidate屬性是H第17頁(yè)target和autocomplete屬性target屬性指定一個(gè)命名窗口或關(guān)鍵字，用于處理表單提交。該屬性的取值與上一章中介紹的<a>標(biāo)簽的target屬性一樣。autocomplete屬性也是HTML5中新增的屬性，用來(lái)指明瀏覽器是否應(yīng)該自動(dòng)填寫(xiě)表單值。默認(rèn)值為on，如果將之設(shè)置為off，則指明瀏覽器不應(yīng)該自動(dòng)填寫(xiě)任何內(nèi)容。第17頁(yè)target和autocomplete屬性targe第18頁(yè)<input>元素在表單中，用戶輸入數(shù)據(jù)使用的文本框、復(fù)選框、單選按鈕等都是通過(guò)<input>元素創(chuàng)建的，<input>元素必須在<form>元素中使用，用來(lái)創(chuàng)建表單中的輸入元素，如果<input>元素不在<form>元素內(nèi)，則該輸入元素不會(huì)被<form>元素收集并傳送給服務(wù)器，只具有頁(yè)面顯示功能。<input>標(biāo)簽的type屬性用來(lái)指定該輸入控件的類(lèi)型，type屬性的值有很多第18頁(yè)<input>元素在表單中，用戶輸入數(shù)據(jù)使用的文本框第19頁(yè)文本框和密碼框文本框和密碼框是用的最多的表單控件，這兩個(gè)控件非常類(lèi)似，所不同的是密碼框在輸入內(nèi)容時(shí)，輸入的信息不可見(jiàn)，通常使用星號(hào)(*)或圓點(diǎn)替代用戶輸入的每個(gè)字符。當(dāng)type屬性值為text或password時(shí)，通常還會(huì)用到<input>元素的如下幾個(gè)屬性進(jìn)一步設(shè)置文本框或密碼框的大小：name：該屬性也是一個(gè)必要屬性，幾乎所有的<input>元素都要設(shè)置該屬性，該屬性值就是向服務(wù)器發(fā)送的“名稱/值”對(duì)中的“名稱”部分。value：該屬性用來(lái)為文本框提供初始值，用戶會(huì)在表單加載后看到該值size：設(shè)置文本框的寬度，以字符為單位。需要注意的是，size屬性不影響用戶可以輸入的字符數(shù)量，例如，size屬性的值為20，用戶依然可以輸入40個(gè)字符。如果用戶輸入了多于size個(gè)字符，可以使用方向鍵向左及向右滾動(dòng)查看輸入的內(nèi)容。第19頁(yè)文本框和密碼框文本框和密碼框是用的最多的表單控件，這第20頁(yè)文本框和密碼框maxlength：該屬性用來(lái)指定用戶在文本框內(nèi)可以輸入的最大字符數(shù)。在輸入達(dá)到最大字符數(shù)之后，即使用戶繼續(xù)輸入，也不會(huì)再有新字符添加進(jìn)去。placeholder：這是HTML5新增的一個(gè)屬性，用來(lái)位文本框設(shè)置輸入提示信息，當(dāng)文本框處于未輸入狀態(tài)且未獲取光標(biāo)焦點(diǎn)時(shí)，模糊顯示輸入提示文字。required：這也是HTML5中新增的屬性，該屬性是布爾屬性，可以應(yīng)用到大多數(shù)輸入元素上。在提交時(shí)，如果元素中內(nèi)容為空白，則不允許提交，同時(shí)在瀏覽器中顯示提示信息，提示用戶必須輸入內(nèi)容。autocomplete：這也是HTML5中新增的屬性，該屬性可以取兩個(gè)不同的值：on及off。on表示表單值可以安全地保存及預(yù)填寫(xiě)。off則表示不應(yīng)該保存表單的值。第20頁(yè)文本框和密碼框maxlength：該屬性用來(lái)指定用戶第21頁(yè)autocomplete屬性使用autocomplete屬性，就可以在安全性方面實(shí)現(xiàn)很好的控制。該屬性可以允許網(wǎng)頁(yè)作者控制是否緩存表單條目。將autocomplete屬性設(shè)置為off，則表示不應(yīng)該保存表單的值。<inputtype="text"name="login"value=""size="20"maxlength="20"placeholder="請(qǐng)輸入登錄名"requiredautocomplete="off">第21頁(yè)autocomplete屬性使用autocomple第22頁(yè)datalist元素datalist元素也是HTML5新增的表單元素，用于為輸入框提供一個(gè)可選的列表，用戶可以直接選擇列表中的某個(gè)預(yù)設(shè)的項(xiàng)，從而免去輸入的麻煩。這個(gè)可選的列表由datalist元素中的option元素創(chuàng)建。如果用戶不希望從列表中選擇某項(xiàng)，也可以自行輸入其他內(nèi)容。為了把datalist元素提供的列表綁定到某個(gè)輸入框，則需要使用輸入框的list屬性來(lái)引用datalist元素的id。第22頁(yè)datalist元素datalist元素也是HTML第23頁(yè)復(fù)選框和單選按鈕當(dāng)<input>標(biāo)簽的type屬性為checkbox時(shí)，創(chuàng)建的是復(fù)選框控件；type屬性為radio時(shí)，創(chuàng)建的是單選按鈕控件。這兩個(gè)控件都有開(kāi)和關(guān)兩種狀態(tài)，用戶可以通過(guò)單擊控件使其在開(kāi)與關(guān)兩種狀態(tài)之間切換。復(fù)選框控件通常用在允許用戶從候選項(xiàng)目中選擇多個(gè)條目的場(chǎng)景，而單向按鈕則適用于從多個(gè)選項(xiàng)中只選擇一個(gè)的情況。第23頁(yè)復(fù)選框和單選按鈕當(dāng)<input>標(biāo)簽的type屬性為第24頁(yè)復(fù)選框和單選按鈕當(dāng)有一組單選按鈕共享同一名稱時(shí)，只有其中之一可以被選定。當(dāng)一個(gè)單選按鈕被選定后，如果用戶又單擊了另一個(gè)，則新的選項(xiàng)被選定，而舊選項(xiàng)便失去選定。不應(yīng)將單選按鈕作為指定開(kāi)或關(guān)的單一表單控件使用，因?yàn)楫?dāng)單一單選按鈕被選定后，就無(wú)法通過(guò)界面操作再次失去選定。而復(fù)選框可以單獨(dú)出現(xiàn)，此時(shí)每一個(gè)復(fù)選框都有自己的名稱。復(fù)選框也可以共享同一名稱，作為復(fù)選框組出現(xiàn)，在同一組中可以有多個(gè)復(fù)選框同時(shí)被選中。第24頁(yè)復(fù)選框和單選按鈕當(dāng)有一組單選按鈕共享同一名稱時(shí)，只有第25頁(yè)按鈕使用<input>元素可以創(chuàng)建多種類(lèi)型的按鈕，當(dāng)type屬性值為submit、reset、button或image時(shí)都能創(chuàng)建按鈕控件。 submit：創(chuàng)建一個(gè)單擊時(shí)提交表單的按鈕。 reset：創(chuàng)建一個(gè)自動(dòng)重置表單控件，將它們?cè)O(shè)置為頁(yè)面載入時(shí)初始值的按鈕。 button：創(chuàng)建一個(gè)用于在用戶單擊時(shí)觸發(fā)客戶端腳本的按鈕。image：創(chuàng)建一個(gè)帶圖片的提交按鈕，單擊該按鈕也會(huì)提交表單數(shù)據(jù)。通常需要把src屬性和alt屬性一起配合使用，還可以適用height和width屬性指定圖片的高度和寬度。第25頁(yè)按鈕使用<input>元素可以創(chuàng)建多種類(lèi)型的按鈕，當(dāng)隱藏字段有些時(shí)候需要在頁(yè)面間傳遞信息而不希望被用戶看到。這就用到了隱藏字段，盡管用戶無(wú)法在頁(yè)面中看到它們，如果用戶查看頁(yè)面的源文件的話，還是可以從代碼中看到它們的值。因此，隱藏控件不應(yīng)被用于任何不希望用戶看到的敏感信息。隱藏字段的創(chuàng)建和使用比較簡(jiǎn)單，只需將type屬性值設(shè)置為hidden，然后指定name和value屬性即可。表單提交時(shí)，name和value屬性將與表單其他元素的“名稱/值”對(duì)一同發(fā)送至服務(wù)器。第26頁(yè)隱藏字段有些時(shí)候需要在頁(yè)面間傳遞信息而不希望被用戶看到。這就文件上傳控件文件上傳控件用于需要用戶上傳文件到服務(wù)器的情況，使用<input>元素，設(shè)置type屬性為file，即可創(chuàng)建一個(gè)文件上傳控件，該控件的頁(yè)面顯示效果中會(huì)出現(xiàn)“瀏覽”按鈕或者“選擇文件”按鈕，具體由不同的瀏覽器確定。使用文件上傳控件時(shí)，<form>元素的method屬性值必須是post，另外還需要增加屬性enctype，其值為“multipart/form-data”，否則無(wú)法實(shí)現(xiàn)文件上傳功能。第27頁(yè)文件上傳控件文件上傳控件用于需要用戶上傳文件到服務(wù)器的情況，日期與時(shí)間日期檢出器(DatePickers)是網(wǎng)頁(yè)中經(jīng)常要用到的一種控件，在HTML5之前的版本中，并沒(méi)有提供任何形式的日期檢出器控件。在網(wǎng)頁(yè)前端設(shè)計(jì)中，多采用一些JavaScript框架來(lái)實(shí)現(xiàn)日期檢出器控件的功能，如jQueryUI、YUI等，在具體使用時(shí)會(huì)比較麻煩。HTML5新增了6個(gè)可用于選取日期和時(shí)間的輸入類(lèi)型：date、datetime、datetime-local、month、time和week，分別用于選擇以下日期格式：日期、日期+時(shí)間、日期+時(shí)間+時(shí)區(qū)、月、時(shí)間和星期。第28頁(yè)日期與時(shí)間日期檢出器(DatePickers)是網(wǎng)頁(yè)中經(jīng)常日期與時(shí)間<inputtype="date"name="date1"value="2018-09-01"/><inputtype="datetime"name="date2"value="2015-09-01:20:22:12"/>第29頁(yè)日期與時(shí)間<inputtype="date"name="日期與時(shí)間<inputtype="datetime-local"name="date3"value="2018-09-03T21:59"/><inputtype="month"name="date4"value="2018-12"/>"/>第30頁(yè)日期與時(shí)間<inputtype="datetime-loc日期與時(shí)間<inputtype="time"name="date5"value="21:32:11"step="3"/><inputtype="week"name="date6"value="2018-W02"/>第31頁(yè)日期與時(shí)間<inputtype="time"name="顏色選擇框color類(lèi)型的輸入元素提供專門(mén)用于設(shè)置顏色的文本框。通過(guò)單擊文本框，可以快速打開(kāi)顏色面板，方便用戶可視化地選擇一種顏色。第32頁(yè)顏色選擇框color類(lèi)型的輸入元素提供專門(mén)用于設(shè)置顏色的文本滑塊數(shù)字range類(lèi)型用于設(shè)置要包含指定范圍內(nèi)數(shù)字值的輸入，其頁(yè)面顯示形式為一個(gè)劃塊，通過(guò)鼠標(biāo)拖動(dòng)滑塊來(lái)改變其值的大小。因?yàn)樵擃?lèi)型表示的是一個(gè)數(shù)字，所以可以使用min和max屬性來(lái)限制值的范圍，通過(guò)step屬性設(shè)置步長(zhǎng)大小。第33頁(yè)滑塊數(shù)字range類(lèi)型用于設(shè)置要包含指定范圍內(nèi)數(shù)字值的輸入，其它特殊文本類(lèi)型<inputtype="email"name="e-mail"/><inputtype="number"min="1"max="100"step="3"/><inputtype="url"name="muUrl"/><inputtype="search"name="keyword"/>inputtype="tel"name="telephone"/>第34頁(yè)其它特殊文本類(lèi)型<inputtype="email"naInput元素的其它屬性在HTML5之前，表單內(nèi)的元素一定要放在表單中，也就是把表單內(nèi)的元素嵌入<form>和</form>標(biāo)簽中，而有了form屬性后，從屬于表單的元素可以放在頁(yè)面的任何地方，只要在該元素內(nèi)指定form屬性的值為表單的名稱即可。第35頁(yè)Input元素的其它屬性在HTML5之前，表單內(nèi)的元素一定formaction屬性在HTML5之前，表單內(nèi)的所有元素只能通過(guò)表單的action屬性統(tǒng)一提交到另一個(gè)頁(yè)面，而在HTML5中，可以為諸如<inputtype="image">、<inputtype="button">、<inputtype="submit">等提交按鈕增加formaction屬性，該屬性為單擊該按鈕時(shí)將表單數(shù)據(jù)發(fā)送到的地址。第36頁(yè)formaction屬性在HTML5之前，表單內(nèi)的所有元素formmethod屬性與formaction類(lèi)似，對(duì)于提交按鈕，還可以使用formmethod屬性為每個(gè)提交按鈕指定不同的提交方法，而不是只能使用表單的method屬性來(lái)統(tǒng)一指定提交方法。<inputtype="submit"value="post提交"formmethod="post"/>第37頁(yè)formmethod屬性與formaction類(lèi)似，對(duì)于提交formenctype屬性formenctype屬性也是在提交按鈕控件上使用的屬性，它的作用與表單的enctype屬性一樣，用于指定表單發(fā)送到服務(wù)器之前應(yīng)該如何對(duì)表單內(nèi)容進(jìn)行編碼。應(yīng)用在提交按鈕上，從而可以指定不同的編碼方式<inputtype="submit"formaction="upload.aspx"formenctype="multipart/form-data"/>第38頁(yè)formenctype屬性formenctype屬性也是在提formtarget屬性formtarget屬性也是適用于提交按鈕，可以對(duì)多個(gè)提交按鈕分別使用formtarget屬性來(lái)指定提交后在何處打開(kāi)需要加載的頁(yè)面。其屬性值和用法與表單元素的target屬性一樣。<inputtype="submit"value="提交到a1"formaction="a1.aspx"formtarget="_self"/>第39頁(yè)formtarget屬性formtarget屬性也是適用于提autofocus屬性autofocus屬性是一個(gè)布爾屬性，為<input>元素加上autofocus屬性，當(dāng)頁(yè)面打開(kāi)時(shí)，這些控件將自動(dòng)獲得光標(biāo)焦點(diǎn)。autofocus屬性的使用方法如下： <inputtype="text"autofocus>一個(gè)頁(yè)面上只能有一個(gè)控件具有autofocus屬性。第40頁(yè)autofocus屬性autofocus屬性是一個(gè)布爾屬性，下拉列表下拉列表使用戶可以從下拉菜單中選擇一個(gè)選項(xiàng)。下拉列表可以占用比單選按鈕組小得多的空間。該控件還可以作為使用單行文本框又希望限制用戶輸入選項(xiàng)時(shí)的替代方案。例如，需要用戶填寫(xiě)省份的表單中，如果使用文本框，那么來(lái)自河北省的訪問(wèn)者可能會(huì)輸入不同的內(nèi)容，例如河北或河北省。而使用下拉列表則可以控制用戶只能從列表中選擇一個(gè)選項(xiàng)。第41頁(yè)下拉列表下拉列表使用戶可以從下拉菜單中選擇一個(gè)選項(xiàng)。下拉列表下拉列表下拉列表包含于<select>元素內(nèi)，列表中的每一個(gè)選項(xiàng)是一個(gè)<option>元素，位于<option>開(kāi)標(biāo)簽與</option>閉標(biāo)簽之間的文本會(huì)作為選項(xiàng)的標(biāo)簽顯示給用戶，提交表單時(shí)，所選選項(xiàng)的value屬性值將作為<select>元素的值被傳送到服務(wù)器。<select>元素有一個(gè)size屬性，使用該屬性可以創(chuàng)建一種滾動(dòng)的選擇框，size屬性的值是希望同一時(shí)間可見(jiàn)的選項(xiàng)數(shù)量。第42頁(yè)下拉列表下拉列表包含于<select>元素內(nèi)，列表中的每一個(gè)下拉列表有的時(shí)候，可能希望選選擇框中選擇多個(gè)選項(xiàng)，就像使用復(fù)選框組那樣，這時(shí)可以使用multiple屬性，這是一個(gè)布爾屬性，使用該屬性后，選擇框自動(dòng)會(huì)已滾動(dòng)選擇框的形式出現(xiàn)。如果一個(gè)下拉列表的選項(xiàng)非常多，則可以使用<optgroup>元素對(duì)它們進(jìn)行分組。<optgroup>的作用就像一個(gè)容器元素，包含需要?dú)w入同一組中的元素。<optgroup>元素必須帶有一個(gè)label屬性，它的值就是該選項(xiàng)分組的標(biāo)簽。第43頁(yè)下拉列表有的時(shí)候，可能希望選選擇框中選擇多個(gè)選項(xiàng)，就像使用復(fù)多行文本輸入控件在HTML表單中，創(chuàng)建多行文本使用的是<textarea>元素，<textarea>元素常用的屬性主要有3個(gè)：name：控件的名稱。在發(fā)送至服務(wù)器端的“名稱/值”對(duì)中使用。rows：用于指定<textarea>元素應(yīng)該具有的文本行數(shù)，對(duì)應(yīng)于文本區(qū)域的高度。cols：用于指定<textarea>元素具有的列數(shù)，對(duì)應(yīng)于輸入框的寬度。第44頁(yè)多行文本輸入控件在HTML表單中，創(chuàng)建多行文本使用的是<te<button>元素<button>元素也可以定義一個(gè)按鈕，在<button>元素內(nèi)部，可以放置文本或圖像。這是該元素與使用<input>元素創(chuàng)建的按鈕之間的不同之處。使用<button>元素也可以創(chuàng)建3類(lèi)按鈕：提交按鈕、重置按鈕和普通按鈕，通過(guò)type屬性指定。不同的瀏覽器對(duì)<button>元素的type屬性使用不同的默認(rèn)值，所以使用<button>元素創(chuàng)建按鈕時(shí)，必須明確指定type屬性。第45頁(yè)<button>元素<button>元素也可以定義一個(gè)按鈕，第46頁(yè)主要內(nèi)容4.1表單概述 4.2創(chuàng)建表單 4.3組織表單結(jié)構(gòu)4.4disabled與readonly控件4.5本章小結(jié) 4.6思考和練習(xí)第46頁(yè)主要內(nèi)容4.1表單概述 第47頁(yè)4.3組織表單結(jié)構(gòu)如果表單過(guò)于龐大，可能會(huì)使用戶感到困惑，為此HTML提供了組織表單結(jié)構(gòu)的元素：<fieldset>和<legend>。使用這兩個(gè)元素可以將相關(guān)表單控件組織到一起，使得表單結(jié)構(gòu)更清晰。 <fieldset>元素在表單控件組四周添加邊框，以表示它們是相關(guān)聯(lián)的一組元素。 <legend>元素用來(lái)為<fieldset>元素指定標(biāo)題，它將作為表單控件組的標(biāo)題顯示。在使用時(shí)，<legend>元素應(yīng)總是<fieldset>元素的第一個(gè)子元素。第47頁(yè)4.3組織表單結(jié)構(gòu)如果表單過(guò)于龐大，可能會(huì)使用戶第48頁(yè)主要內(nèi)容4.1表單概述 4.2創(chuàng)建表單 4.3組織表單結(jié)構(gòu)4.4disabled與readonly控件4.5本章小結(jié) 4.6思考和練習(xí)第48頁(yè)主要內(nèi)容4.1表單概述 4.4disabled與readonly控件 readonly屬性用來(lái)防止用戶更改表單控件的值。但仍然可以通過(guò)腳本修改。任何readonly控件的名稱與值仍將被發(fā)送至服務(wù)器。 disabled屬性會(huì)禁用表單控件或<fieldset>元素中的表單控件組，從而使用戶無(wú)法更改?？梢允褂媚_本重新激活控件，但除非控件被重新激活，否則其名稱與值不會(huì)被發(fā)送至服務(wù)器。第49頁(yè)4.4disabled與readonly控件 reado第50頁(yè)主要內(nèi)容4.1表單概述 4.2創(chuàng)建表單 4.3組織表單結(jié)構(gòu)4.4disabled與readonly控件4.5本章小結(jié)

4.6思考和練習(xí)第50頁(yè)主要內(nèi)容4.1表單概述 第51頁(yè)4.5本章小結(jié)本章主要介紹了HTML中的表單。首先介紹了表單的基本概念和用途，表單在網(wǎng)頁(yè)設(shè)計(jì)中起到數(shù)據(jù)收集的作用，這也是客戶端向服務(wù)器端提供數(shù)據(jù)的唯一方法；接著重點(diǎn)介紹了表單的創(chuàng)建，包括<form>元素及其屬性，以及表單中各類(lèi)控件元素的創(chuàng)建與使用；最后介紹了使用<fieldset>與<legend>元素組織大型表單的結(jié)構(gòu)。表單是網(wǎng)頁(yè)與訪問(wèn)者交互的主要途徑，幾乎所有網(wǎng)站開(kāi)發(fā)中都要用到表單，所以，學(xué)會(huì)創(chuàng)建和使用表單是網(wǎng)頁(yè)設(shè)計(jì)的必備技能，通過(guò)本章的學(xué)習(xí)，讀者應(yīng)該掌握如何創(chuàng)建和組織表單結(jié)構(gòu)，掌握<form>和<input>元素的常用屬性。第51頁(yè)4.5本章小結(jié)本章主要介紹了HTML中的表單。第52頁(yè)主要內(nèi)容4.1表單概述 4.2創(chuàng)建表單 4.3組織表單結(jié)構(gòu)4.4disabled與readonly控件4.5本章小結(jié) 4.6思考和練習(xí)第52頁(yè)主要內(nèi)容4.1表單概述 第53頁(yè)4.6思考和練習(xí)1.在網(wǎng)頁(yè)中，

和

這對(duì)標(biāo)簽用來(lái)創(chuàng)建一個(gè)表單，在標(biāo)簽對(duì)之間的一切都屬于表單的內(nèi)容。2.

屬性指明表單提交后對(duì)數(shù)據(jù)的處理。3.使用<form>標(biāo)簽的method屬性有兩個(gè)取值

和

。4.<input>標(biāo)簽的

屬性用來(lái)指定該輸入控件的類(lèi)型。5.

元素是HTML5新增的表單元素，用于為輸入框提供一個(gè)可選的列表，用戶可以直接選擇列表中的某個(gè)預(yù)設(shè)的項(xiàng)，從而免去輸入的麻煩。6.簡(jiǎn)述復(fù)選框和單選按鈕的主要區(qū)別。7.使用文件上傳控件時(shí)，<form>元素的method屬性值必須是

，另外還需要增加

屬性。第53頁(yè)4.6思考和練習(xí)1.在網(wǎng)頁(yè)中，第54頁(yè)第4章HTML表單本章概述本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第1頁(yè)第4章HTML表單本章概述第55頁(yè)本章概述表單是實(shí)現(xiàn)用戶與網(wǎng)頁(yè)之間數(shù)據(jù)交互的必要標(biāo)簽，通過(guò)在網(wǎng)頁(yè)中添加表單可以實(shí)現(xiàn)諸如會(huì)員注冊(cè)、用戶登錄、提交資料等交互功能。本章將主要講解如何在網(wǎng)頁(yè)中制作表單，并使用表單元素創(chuàng)建表單。第2頁(yè)本章概述表單是實(shí)現(xiàn)用戶與網(wǎng)頁(yè)之間數(shù)據(jù)交互的必要標(biāo)簽，通第56頁(yè)本章的學(xué)習(xí)目標(biāo)了解表單的基本組成部分掌握<form>元素的常用屬性及其用法掌握HTML中的常用表單輸入類(lèi)型了解<input>元素的常用屬性及其用法掌握下列列表的創(chuàng)建與使用掌握多行文本控件的用法了解<button>元素的基本用法掌握<fieldset>和<legend>元素的用法第3頁(yè)本章的學(xué)習(xí)目標(biāo)了解表單的基本組成部分第57頁(yè)主要內(nèi)容4.1表單概述

4.2創(chuàng)建表單 4.3組織表單結(jié)構(gòu)4.4disabled與readonly控件4.5本章小結(jié) 4.6思考和練習(xí)第4頁(yè)主要內(nèi)容4.1表單概述 第58頁(yè)4.1表單概述表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端的HTML標(biāo)簽元素，服務(wù)器端程序可以處理表單傳過(guò)來(lái)的數(shù)據(jù)，從而完成與用戶的各種交互動(dòng)作網(wǎng)頁(yè)上具有可輸入表項(xiàng)及項(xiàng)目選擇等控件所組成的欄目稱為表單，其中包括各種對(duì)象，如文字輸入框、單選按鈕、復(fù)選框和提交按鈕等。通俗地講，表單就是一個(gè)將用戶信息組織起來(lái)的容器。將需要用戶填寫(xiě)的內(nèi)容放置在表單容器中，當(dāng)用戶單擊“提交”按鈕時(shí)，表單會(huì)將數(shù)據(jù)統(tǒng)一發(fā)送給服務(wù)器第5頁(yè)4.1表單概述表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服第59頁(yè)表單概述幾乎每當(dāng)需要從網(wǎng)站訪問(wèn)者那里收集信息時(shí)，都需要使用“表單”。典型的表單應(yīng)用場(chǎng)景有：登錄、注冊(cè)：登錄時(shí)輸入用戶名和密碼，單擊“登錄”按鈕；注冊(cè)時(shí)填寫(xiě)個(gè)人信息，提交到服務(wù)器。網(wǎng)上訂單：在網(wǎng)上購(gòu)買(mǎi)商品時(shí)，提交訂單，輸入個(gè)人信息和付款方式等。調(diào)查問(wèn)卷：通常是一些選擇題形式的問(wèn)卷，回答這些問(wèn)題，以便形成統(tǒng)計(jì)數(shù)據(jù)，進(jìn)一步分析。網(wǎng)上搜索：輸入關(guān)鍵字，搜索想要的信息或資源。第6頁(yè)表單概述幾乎每當(dāng)需要從網(wǎng)站訪問(wèn)者那里收集信息時(shí)，都需要第60頁(yè)表單概述將表單數(shù)據(jù)發(fā)送給服務(wù)器時(shí)，會(huì)將其轉(zhuǎn)換成“名稱/值”對(duì)的形式。名稱對(duì)應(yīng)于表單控件的名稱，而值則是用戶輸入的內(nèi)容或一個(gè)被選定選項(xiàng)的值。服務(wù)器接收到數(shù)據(jù)后，會(huì)處理數(shù)據(jù)并返回相應(yīng)的結(jié)果。第7頁(yè)表單概述將表單數(shù)據(jù)發(fā)送給服務(wù)器時(shí)，會(huì)將其轉(zhuǎn)換成“名稱/第61頁(yè)主要內(nèi)容4.1表單概述 4.2創(chuàng)建表單

4.3組織表單結(jié)構(gòu)4.4disabled與readonly控件4.5本章小結(jié) 4.6思考和練習(xí)第8頁(yè)主要內(nèi)容4.1表單概述 第62頁(yè)4.2創(chuàng)建表單HTML中用于創(chuàng)建表單的標(biāo)簽是<form>，然后在<form>元素中，可以放置各種類(lèi)型的表單控件。在網(wǎng)頁(yè)中，<form>和</form>這對(duì)標(biāo)簽用來(lái)創(chuàng)建一個(gè)表單，在標(biāo)簽對(duì)之間的一切都屬于表單的內(nèi)容。<form>元素通常是一些用來(lái)采集用戶輸入信息的表單控件，也還可以包含其他標(biāo)記，如段落、標(biāo)題等。但是，它不能包含另外一個(gè)<form>元素，即<form>不能嵌套。第9頁(yè)4.2創(chuàng)建表單HTML中用于創(chuàng)建表單的標(biāo)簽是<for第63頁(yè)<form>在<form>標(biāo)記中，可以設(shè)置表單的基本屬性，一般情況下，一個(gè)<form>標(biāo)簽應(yīng)該至少帶有action和method兩個(gè)屬性。除此之外，還可以包含所有通用通性及以下屬性：enctype、novalidate、target、autocomplete和accept-charset。第10頁(yè)<form>在<form>標(biāo)記中，可以設(shè)置表單的基本第64頁(yè)action屬性action屬性指明表單提交后對(duì)數(shù)據(jù)的處理。通常，action屬性的值是一個(gè)地址，也就是表單收集到的信息將要傳遞到這個(gè)地址，這個(gè)地址可以是絕對(duì)地址，也可以是相對(duì)地址，還可以是其它形式的處理程序。例如，一個(gè)登錄表單，用戶輸入的登錄名和密碼信息可能被傳送到Web服務(wù)器中一個(gè)以ASP.NET編寫(xiě)的頁(yè)面，叫做login.aspx，如果該頁(yè)面與當(dāng)前頁(yè)面在同一目錄，則可以使用相當(dāng)?shù)刂罚?lt;formaction="login.aspx">第11頁(yè)action屬性action屬性指明表單提交后對(duì)數(shù)據(jù)第65頁(yè)method屬性瀏覽器向服務(wù)器發(fā)送表單數(shù)據(jù)能夠使用的有兩種方法：HTTPget和HTTPpost。使用<form>標(biāo)簽的method屬性指定應(yīng)該使用哪一種方法。該屬性有兩個(gè)取值，分別對(duì)應(yīng)兩種方法： get：使用HTTPget方法向服務(wù)器發(fā)送表單數(shù)據(jù)，表單數(shù)據(jù)被附加在<form>元素中由action屬性指定的URL尾部。表單數(shù)據(jù)與URL之間使用問(wèn)號(hào)分隔。在問(wèn)號(hào)之后是各表單控件的“名稱/值”對(duì)。每個(gè)“名稱/值”對(duì)之間使用與符號(hào)&分隔。 post：使用HTTPpost方法向服務(wù)器發(fā)送來(lái)自表單的數(shù)據(jù)，表單數(shù)據(jù)將在HTTP頭部中透明地傳送。第12頁(yè)method屬性瀏覽器向服務(wù)器發(fā)送表單數(shù)據(jù)能夠使用的第66頁(yè)Id和name屬性id屬性可以唯一標(biāo)識(shí)頁(yè)面中的<form>元素。就如同可以使用它唯一標(biāo)識(shí)頁(yè)面中的任何其它HTML元素一樣。id屬性的值在文檔中應(yīng)該是唯一的。name屬性是id屬性的前任，而且如id屬性一樣，其取值在文檔內(nèi)應(yīng)該保持唯一。一種好的命名習(xí)慣是以字符frm作為表單的id和name屬性值的起始，并使用值的剩余部分描述表單收集數(shù)據(jù)的類(lèi)型——例如，frmLogin或frmSearch。第13頁(yè)Id和name屬性id屬性可以唯一標(biāo)識(shí)頁(yè)面中的<fo第67頁(yè)enctype屬性如果使用HTTPpost方法向服務(wù)器發(fā)送數(shù)據(jù)，則可以使用enctype屬性指定瀏覽器在將數(shù)據(jù)發(fā)送到服務(wù)器之前對(duì)其進(jìn)行編碼。瀏覽器通常支持如下3種類(lèi)型的編碼方式： application/x-www-form-urlencoded：這是大多數(shù)表單使用的標(biāo)準(zhǔn)方法。瀏覽器使用該方法是因?yàn)橐恍┳址?，如空格、加?hào)以及一些非字母數(shù)字字符，不能直接發(fā)送到Web服務(wù)器。所以這些字符會(huì)被其他用以替換它們的字符所替代。 multipart/form-data：允許數(shù)據(jù)分成部分傳送，每一個(gè)連續(xù)部分以其在表單中出現(xiàn)的順序?qū)?yīng)于一個(gè)表單控件。通常被用于訪問(wèn)者需要向服務(wù)器上傳文件(如照片)時(shí)。 text/plain：以純文本形式不加修改地將數(shù)據(jù)發(fā)送至服務(wù)器。第14頁(yè)enctype屬性如果使用HTTPpost方法向服第68頁(yè)accept-charset屬性不同語(yǔ)言通過(guò)不同的“字符集”(characterset)或字符組書(shū)寫(xiě)。然而，在創(chuàng)建網(wǎng)站時(shí)，開(kāi)發(fā)人員不會(huì)將網(wǎng)站設(shè)計(jì)成能夠理解所有語(yǔ)言。accept-charset屬性背后的思想是，使用該屬性可以指定一系列用戶能夠輸入，并且之后服務(wù)器可以處理的字符編碼。該屬性的值應(yīng)該是一個(gè)由空格或逗號(hào)分隔的字符集列表。例如，下面的代碼指明服務(wù)器可以接受UTF-8編碼：accept-charset="utf-8"第15頁(yè)accept-charset屬性不同語(yǔ)言通過(guò)不同的“第69頁(yè)novalidate屬性novalidate屬性是HTML5新增的一個(gè)布爾屬性，用以指定表單在提交時(shí)是否應(yīng)該進(jìn)行校驗(yàn)。如果使用了該屬性，則關(guān)閉對(duì)表單內(nèi)所有元素的有效性檢查。如果希望只取消表單中較少部分內(nèi)容的驗(yàn)證，則需要在這些不需要驗(yàn)證表單控件上使用novalidate屬性。目前支持該屬性的瀏覽器有Chrome6+、Firefox4+、Opera10.6+以及IE10+。第16頁(yè)novalidate屬性novalidate屬性是H第70頁(yè)target和autocomplete屬性target屬性指定一個(gè)命名窗口或關(guān)鍵字，用于處理表單提交。該屬性的取值與上一章中介紹的<a>標(biāo)簽的target屬性一樣。autocomplete屬性也是HTML5中新增的屬性，用來(lái)指明瀏覽器是否應(yīng)該自動(dòng)填寫(xiě)表單值。默認(rèn)值為on，如果將之設(shè)置為off，則指明瀏覽器不應(yīng)該自動(dòng)填寫(xiě)任何內(nèi)容。第17頁(yè)target和autocomplete屬性targe第71頁(yè)<input>元素在表單中，用戶輸入數(shù)據(jù)使用的文本框、復(fù)選框、單選按鈕等都是通過(guò)<input>元素創(chuàng)建的，<input>元素必須在<form>元素中使用，用來(lái)創(chuàng)建表單中的輸入元素，如果<input>元素不在<form>元素內(nèi)，則該輸入元素不會(huì)被<form>元素收集并傳送給服務(wù)器，只具有頁(yè)面顯示功能。<input>標(biāo)簽的type屬性用來(lái)指定該輸入控件的類(lèi)型，type屬性的值有很多第18頁(yè)<input>元素在表單中，用戶輸入數(shù)據(jù)使用的文本框第72頁(yè)文本框和密碼框文本框和密碼框是用的最多的表單控件，這兩個(gè)控件非常類(lèi)似，所不同的是密碼框在輸入內(nèi)容時(shí)，輸入的信息不可見(jiàn)，通常使用星號(hào)(*)或圓點(diǎn)替代用戶輸入的每個(gè)字符。當(dāng)type屬性值為text或password時(shí)，通常還會(huì)用到<input>元素的如下幾個(gè)屬性進(jìn)一步設(shè)置文本框或密碼框的大?。簄ame：該屬性也是一個(gè)必要屬性，幾乎所有的<input>元素都要設(shè)置該屬性，該屬性值就是向服務(wù)器發(fā)送的“名稱/值”對(duì)中的“名稱”部分。value：該屬性用來(lái)為文本框提供初始值，用戶會(huì)在表單加載后看到該值size：設(shè)置文本框的寬度，以字符為單位。需要注意的是，size屬性不影響用戶可以輸入的字符數(shù)量，例如，size屬性的值為20，用戶依然可以輸入40個(gè)字符。如果用戶輸入了多于size個(gè)字符，可以使用方向鍵向左及向右滾動(dòng)查看輸入的內(nèi)容。第19頁(yè)文本框和密碼框文本框和密碼框是用的最多的表單控件，這第73頁(yè)文本框和密碼框maxlength：該屬性用來(lái)指定用戶在文本框內(nèi)可以輸入的最大字符數(shù)。在輸入達(dá)到最大字符數(shù)之后，即使用戶繼續(xù)輸入，也不會(huì)再有新字符添加進(jìn)去。placeholder：這是HTML5新增的一個(gè)屬性，用來(lái)位文本框設(shè)置輸入提示信息，當(dāng)文本框處于未輸入狀態(tài)且未獲取光標(biāo)焦點(diǎn)時(shí)，模糊顯示輸入提示文字。required：這也是HTML5中新增的屬性，該屬性是布爾屬性，可以應(yīng)用到大多數(shù)輸入元素上。在提交時(shí)，如果元素中內(nèi)容為空白，則不允許提交，同時(shí)在瀏覽器中顯示提示信息，提示用戶必須輸入內(nèi)容。autocomplete：這也是HTML5中新增的屬性，該屬性可以取兩個(gè)不同的值：on及off。on表示表單值可以安全地保存及預(yù)填寫(xiě)。off則表示不應(yīng)該保存表單的值。第20頁(yè)文本框和密碼框maxlength：該屬性用來(lái)指定用戶第74頁(yè)autocomplete屬性使用autocomplete屬性，就可以在安全性方面實(shí)現(xiàn)很好的控制。該屬性可以允許網(wǎng)頁(yè)作者控制是否緩存表單條目。將autocomplete屬性設(shè)置為off，則表示不應(yīng)該保存表單的值。<inputtype="text"name="login"value=""size="20"maxlength="20"placeholder="請(qǐng)輸入登錄名"requiredautocomplete="off">第21頁(yè)autocomplete屬性使用autocomple第75頁(yè)datalist元素datalist元素也是HTML5新增的表單元素，用于為輸入框提供一個(gè)可選的列表，用戶可以直接選擇列表中的某個(gè)預(yù)設(shè)的項(xiàng)，從而免去輸入的麻煩。這個(gè)可選的列表由datalist元素中的option元素創(chuàng)建。如果用戶不希望從列表中選擇某項(xiàng)，也可以自行輸入其他內(nèi)容。為了把datalist元素提供的列表綁定到某個(gè)輸入框，則需要使用輸入框的list屬性來(lái)引用datalist元素的id。第22頁(yè)datalist元素datalist元素也是HTML第76頁(yè)復(fù)選框和單選按鈕當(dāng)<input>標(biāo)簽的type屬性為checkbox時(shí)，創(chuàng)建的是復(fù)選框控件；type屬性為radio時(shí)，創(chuàng)建的是單選按鈕控件。這兩個(gè)控件都有開(kāi)和關(guān)兩種狀態(tài)，用戶可以通過(guò)單擊控件使其在開(kāi)與關(guān)兩種狀態(tài)之間切換。復(fù)選框控件通常用在允許用戶從候選項(xiàng)目中選擇多個(gè)條目的場(chǎng)景，而單向按鈕則適用于從多個(gè)選項(xiàng)中只選擇一個(gè)的情況。第23頁(yè)復(fù)選框和單選按鈕當(dāng)<input>標(biāo)簽的type屬性為第77頁(yè)復(fù)選框和單選按鈕當(dāng)有一組單選按鈕共享同一名稱時(shí)，只有其中之一可以被選定。當(dāng)一個(gè)單選按鈕被選定后，如果用戶又單擊了另一個(gè)，則新的選項(xiàng)被選定，而舊選項(xiàng)便失去選定。不應(yīng)將單選按鈕作為指定開(kāi)或關(guān)的單一表單控件使用，因?yàn)楫?dāng)單一單選按鈕被選定后，就無(wú)法通過(guò)界面操作再次失去選定。而復(fù)選框可以單獨(dú)出現(xiàn)，此時(shí)每一個(gè)復(fù)選框都有自己的名稱。復(fù)選框也可以共享同一名稱，作為復(fù)選框組出現(xiàn)，在同一組中可以有多個(gè)復(fù)選框同時(shí)被選中。第24頁(yè)復(fù)選框和單選按鈕當(dāng)有一組單選按鈕共享同一名稱時(shí)，只有第78頁(yè)按鈕使用<input>元素可以創(chuàng)建多種類(lèi)型的按鈕，當(dāng)type屬性值為submit、reset、button或image時(shí)都能創(chuàng)建按鈕控件。 submit：創(chuàng)建一個(gè)單擊時(shí)提交表單的按鈕。 reset：創(chuàng)建一個(gè)自動(dòng)重置表單控件，將它們?cè)O(shè)置為頁(yè)面載入時(shí)初始值的按鈕。 button：創(chuàng)建一個(gè)用于在用戶單擊時(shí)觸發(fā)客戶端腳本的按鈕。image：創(chuàng)建一個(gè)帶圖片的提交按鈕，單擊該按鈕也會(huì)提交表單數(shù)據(jù)。通常需要把src屬性和alt屬性一起配合使用，還可以適用height和width屬性指定圖片的高度和寬度。第25頁(yè)按鈕使用<input>元素可以創(chuàng)建多種類(lèi)型的按鈕，當(dāng)隱藏字段有些時(shí)候需要在頁(yè)面間傳遞信息而不希望被用戶看到。這就用到了隱藏字段，盡管用戶無(wú)法在頁(yè)面中看到它們，如果用戶查看頁(yè)面的源文件的話，還是可以從代碼中看到它們的值。因此，隱藏控件不應(yīng)被用于任何不希望用戶看到的敏感信息。隱藏字段的創(chuàng)建和使用比較簡(jiǎn)單，只需將type屬性值設(shè)置為hidden，然后指定name和value屬性即可。表單提交時(shí)，name和value屬性將與表單其他元素的“名稱/值”對(duì)一同發(fā)送至服務(wù)器。第79頁(yè)隱藏字段有些時(shí)候需要在頁(yè)面間傳遞信息而不希望被用戶看到。這就文件上傳控件文件上傳控件用于需要用戶上傳文件到服務(wù)器的情況，使用<input>元素，設(shè)置type屬性為file，即可創(chuàng)建一個(gè)文件上傳控件，該控件的頁(yè)面顯示效果中會(huì)出現(xiàn)“瀏覽”按鈕或者“選擇文件”按鈕，具體由不同的瀏覽器確定。使用文件上傳控件時(shí)，<form>元素的method屬性值必須是post，另外還需要增加屬性enctype，其值為“multipart/form-data”，否則無(wú)法實(shí)現(xiàn)文件上傳功能。第80頁(yè)文件上傳控件文件上傳控件用于需要用戶上傳文件到服務(wù)器的情況，日期與時(shí)間日期檢出器(DatePickers)是網(wǎng)頁(yè)中經(jīng)常要用到的一種控件，在HTML5之前的版本中，并沒(méi)有提供任何形式的日期檢出器控件。在網(wǎng)頁(yè)前端設(shè)計(jì)中，多采用一些JavaScript框架來(lái)實(shí)現(xiàn)日期檢出器控件的功能，如jQueryUI、YUI等，在具體使用時(shí)會(huì)比較麻煩。HTML5新增了6個(gè)可用于選取日期和時(shí)間的輸入類(lèi)型：date、datetime、datetime-local、month、time和week，分別用于選擇以下日期格式：日期、日期+時(shí)間、日期+時(shí)間+時(shí)區(qū)、月、時(shí)間和星期。第81頁(yè)日期與時(shí)間日期檢出器(DatePickers)是網(wǎng)頁(yè)中經(jīng)常日期與時(shí)間<inputtype="date"name="date1"value="2018-09-01"/><inputtype="datetime"name="date2"value="2015-09-01:20:22:12"/>第82頁(yè)日期與時(shí)間<inputtype="date"name="日期與時(shí)間<inputtype="datetime-local"name="date3"value="2018-09-03T21:59"/><inputtype="month"name="date4"value="2018-12"/>"/>第83頁(yè)日期與時(shí)間<inputtype="datetime-loc日期與時(shí)間<inputtype="time"name="date5"value="21:32:11"step="3"/><inputtype="week"name="date6"value="2018-W02"/>第84頁(yè)日期與時(shí)間<inputtype="time"name="顏色選擇框color類(lèi)型的輸入元素提供專門(mén)用于設(shè)置顏色的文本框。通過(guò)單擊文本框，可以快速打開(kāi)顏色面板，方便用戶可視化地選擇一種顏色。第85頁(yè)顏色選擇框color類(lèi)型的輸入元素提供專門(mén)用于設(shè)置顏色的文本滑塊數(shù)字range類(lèi)型用于設(shè)置要包含指定范圍內(nèi)數(shù)字值的輸入，其頁(yè)面顯示形式為一個(gè)劃塊，通過(guò)鼠標(biāo)拖動(dòng)滑塊來(lái)改變其值的大小。因?yàn)樵擃?lèi)型表示的是一個(gè)數(shù)字，所以可以使用min和max屬性來(lái)限制值的范圍，通過(guò)step屬性設(shè)置步長(zhǎng)大小。第86頁(yè)滑塊數(shù)字range類(lèi)型用于設(shè)置要包含指定范圍內(nèi)數(shù)字值的輸入，其它特殊文本類(lèi)型<inputtype="email"name="e-mail"/><inputtype="number"min="1"max="100"step="3"/><inputtype="url"name="muUrl"/><inputtype="search"name="keyword"/>inputtype="tel"name="telephone"/>第87頁(yè)其它特殊文本類(lèi)型<inputtype="email"naInput元素的其它屬性在HTML5之前，表單內(nèi)的元素一定要放在表單中，也就是把表單內(nèi)的元素嵌入<form>和</form>標(biāo)簽中，而有了form屬性后，從屬于表單的元素可以放在頁(yè)面的任何地方，只要在該元素內(nèi)指定form屬性的值為表單的名稱即可。第88頁(yè)Input元素的其它屬性在HTML5之前，表單內(nèi)的元素一定formaction屬性在HTML5之前，表單內(nèi)的所有元素只能通過(guò)表單的action屬性統(tǒng)一提交到另一個(gè)頁(yè)面，而在HTML5中，可以為諸如<inputtype="image">、<inputtype="button">、<inputtype="submit">等提交按鈕增加formaction屬性，該屬性為單擊該按鈕時(shí)將表單數(shù)據(jù)發(fā)送到的地址。第89頁(yè)formaction屬性在HTML5之前，表單內(nèi)的所有元素formmethod屬性與formaction類(lèi)似，對(duì)于提交按鈕，還可以使用formmethod屬性為每個(gè)提交按鈕指定不同的提交方法，而不是只能使用表單的method屬性來(lái)統(tǒng)一指定提交方法。<inputtype="submit"value="post提交"formmethod="post"/>第90頁(yè)formmethod屬性與formaction類(lèi)似，對(duì)于提交formenctype屬性formenctype屬性也是在提交按鈕控件上使用的屬性，它的作用與表單的enctype屬性一樣，用于指定表單發(fā)送到服務(wù)器之前應(yīng)該如何對(duì)表單內(nèi)容進(jìn)行編碼。應(yīng)用在提交按鈕上，從而可以指定不同的編碼方式<inputtype="submit"formaction="upload.aspx"formenctype="multipart/form-data"/>第91頁(yè)formenctype屬性formenctype屬性也是在提formtarget屬性formtarget屬性也是適用于提交按鈕，可以對(duì)多個(gè)提交按鈕分別使用formtarget屬性來(lái)指定提交后在何處打開(kāi)需要加載的頁(yè)面。其屬性值和用法與表單元素的target屬性一樣。<inputtype="submit"value="提交到a1"formaction="a1.aspx"formtarget="_self"/>第92頁(yè)formtarget屬性formtarget屬性也是適用于提autofocus屬性autofocus屬性是一個(gè)布爾屬性，為<input>元素加上autofocus屬性，當(dāng)頁(yè)面打開(kāi)時(shí)，這些控件將自動(dòng)獲得光標(biāo)焦點(diǎn)。autofocus屬性的使用方法如下： <inputtype="text"autofocus>一個(gè)頁(yè)面上只能有一個(gè)控件具有autofocus屬性。第93頁(yè)autofocus屬性autofocus屬性是一個(gè)布爾屬性，下拉列表下拉列表使用戶可以從下拉菜單中選擇一個(gè)選項(xiàng)。下拉列表可以占用比單選按鈕組小得多的空間。該控件還可以作為使用單行文本框又希望限制用戶輸入選項(xiàng)時(shí)的替代方案。例如，需要用戶填寫(xiě)省份的表單中，如果使用文本框，那么來(lái)自河北省的訪問(wèn)者可能會(huì)輸入不同的內(nèi)容，例如河北或河北省。而使用下拉列表則可以控制用戶只能從列表中選擇一個(gè)選項(xiàng)。第94頁(yè)下拉列表下拉列表使用戶可以從下拉菜單中選擇一個(gè)選項(xiàng)。下拉列表下拉列表下拉列表包含于<select>元素內(nèi)，列表中的每一個(gè)選項(xiàng)是一個(gè)<option>元素，位于<option>開(kāi)標(biāo)簽與</option>閉標(biāo)簽之間的文本會(huì)作為選項(xiàng)的標(biāo)簽顯示給用戶，提交表單時(shí)，所選選項(xiàng)的value屬性值將作為<select>元素的值被傳送到服務(wù)器。<select>元素有一個(gè)size屬性，使用該屬性可以創(chuàng)建一種滾動(dòng)的選擇框，size屬性的值是希望同一時(shí)間可見(jiàn)的選項(xiàng)數(shù)量。第95頁(yè)下拉列表下拉列表包含于<select>元素內(nèi)，列表中的每一個(gè)下拉列表有的時(shí)候，可能希望選選擇框中選擇多個(gè)選項(xiàng)，就像使用復(fù)選框組那樣，這時(shí)可以使用multiple屬性，這是一個(gè)布爾屬性，使用該屬性后，選擇框自動(dòng)會(huì)已滾