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

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

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

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

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

和

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

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

和

。4.<input>標簽的

屬性用來指定該輸入控件的類型。5.

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

，另外還需要增加

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

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

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