Web表單第3章匯報人：***目錄CONTENT表單概述表單標記表單控件表單屬性HTML5對表單的改進本章導讀表單的用處很多，在網站中無處不見。表單可以用來收集用戶在客戶端提交的各種信息，例如，用戶在網站上提交的登錄和注冊信息，就是通過表單作為載體傳遞給服務器的，可以說表單是用戶和瀏覽器交互的重要媒介。本章主要介紹表單概念、<form>標記的屬性、表單的結構、表單控件、HTML5對表單的改進等。第一節(jié)PART.01表單概述表單通常是設計在一個

HTML文檔中，當用戶填寫完信息后做提交操作，將表單的內容從客戶端的瀏覽器傳送到服務器上，經過服務器的處理程序處理后，再將用戶所需信息傳回客戶端的瀏覽器上，這樣網頁就具有了交互性，HTML表單是用戶與網站實現交互的重要手段。表單的主要功能是收集信息，具體說是收集瀏覽者的信息，例如，天貓商城的用戶登錄界面，就是通過表單填寫用戶的相關信息的，如圖3-1所示。在網頁中，最常見的表單形式主要包括文本框、單選按鈕、復選按鈕等。圖3-1用戶登錄界面在

HTML文檔中，一個完整的表單通常由表單控件（也稱表單元素）、提示信息和表單域3個部分組成，其中表單控件包含具體的表單功能項，如文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等；提示信息即一個表單中包含的一些說明性文字，用于提示用戶進行填寫和操作；表單域相當于一個容器，用來容納所有的表單控件和提示信息，可以通過它定義處理表單數據所用程序的

URL地址，以及數據提交到服務器的方法。如果不定義表單域，表單中的數據就無法傳送到后臺服務器，表單組成如圖3-2所示。圖3-2表單組成第二節(jié)PART.02表單標記表單是網頁上的一個特定區(qū)域，這個區(qū)域通過

<form></form>標記聲明。在

<form>標記中，還可以設置表單的基本屬性，包括表單的名稱、處理程序、傳送方式等，其基本語法格式如下：<formaction="url地址"method="提交方式"name="表單名稱">表單控件</form>第三節(jié)PART.03表單控件表單控件是表單的核心內容，不同的表單控件具有不同的功能，如密碼輸入框、文本域、下拉列表、復選框、提交按鈕等。只有掌握這些控件的使用方法才能正確地創(chuàng)建表單。3.3.1input控件input控件是表單元素中用得最多的一種元素，通常網頁中單行文本輸入框、單選按鈕、復選框、提交按鈕、重置按鈕等都是通過

input控件定義的，其基本語法格式如下：<inputtype="控件類型"name="控件名稱"><input>標記為單標記，type屬性為最基本屬性，根據其

type屬性的不同取值可輸入不同的數據。除了

type屬性外，<input>還可以定義很多屬性，其屬性值詳見表3-1。3.3.1input控件表3-1input控件常用屬性屬性屬性值描述typetext單行輸入文本框，默認寬度為20個字符password密碼輸入框，輸入的內容以掩碼的形式出現radio單選按鈕，用于從若干給定的選項中選取一項checkbox復選框，用于從若干給定的選項中選取一項或多項button普通按鈕，多數情況下用于從

JavaScript啟動腳本submit提交按鈕，用于將表單數據發(fā)送到服務器reset重置按鈕，用于清除表單中的數據image圖像形式的提交按鈕，用戶可以選擇不同的圖像來定義這種形式的按鈕hidden隱藏域，定義隱藏的輸入字段file文件域，用于上傳文件name控件的名稱valueinput控件中默認的文本值3.3.1input控件表3-1input控件常用屬性屬性屬性值描述size正整數input控件在頁面中的顯示寬度readonlyreadonly該控件的內容為只讀，不能編輯修改disableddisabled第一次加載頁面時禁用該控件（顯示為灰色）checkedchecked定義默認被選中的項maxlength正整數控件允許輸入的最多字符數表3-1中列出的為

input控件的常用屬性，下面通過具體的案例演示其使用方法和效果。3.3.1input控件1.單行文本框單行文本框常用來輸入簡短的信息，如用戶名、賬號、證件號碼等，常用的屬性有

name、value、maxlength等，其語法格式如下：<inputtype="text"name=""size=""maxlength=""value="">3.3.1input控件2.創(chuàng)建密碼輸入框密碼輸入框是一種特殊的文本域，主要用于輸入一些保密信息，當瀏覽者輸入文本時，顯示為黑點或其他符號，目的是增加輸入文本的安全性，其語法格式如下：<inputtype="password"name=""size=""maxlength="">3.3.1input控件3.創(chuàng)建單選按鈕單選按鈕主要是讓瀏覽者在一組選項中只能選擇一個，其語法格式如下：<inputtype="radio"name=""value="">注意：單選按鈕都是以組為單位使用的，在同一組中的單選項都必須用同一個名稱，value屬性定義單選按鈕的值，在同一組中，它們的域值必須是不同的。3.3.1input控件4.創(chuàng)建復選框復選框主要是讓瀏覽者在一組選項中可以同時選取多個選項，其語法格式如下：<inputtype="checkbox"name=""value="">注意：在同一組中的復選框必須用同一個名稱。每一個復選框都是一個獨立的元素，都必須有一個唯一的

value值。3.3.1input控件5.創(chuàng)建隱藏域隱藏域對用戶是不可見的，通常用于后臺程序，其語法格式如下：<inputtype="hidden"name=""value="">3.3.1input控件6.創(chuàng)建按鈕在

HTML中，提交按鈕

<inputtype="submit">，是表單中的核心控件，用戶完成信息輸入后，一般都需要單擊表單提交按鈕來完成表單數據的提交，可以通過設置

value屬性，改變提交按鈕上的默認文本。重置按鈕

<inputtype="reset">，當用戶輸入有誤時，可單擊重置按鈕取消已輸入的所有表單信息，可以通過

value屬性，改變重置按鈕上的默認文本。普通按鈕

<inputtype="button">，圖像形式的提交按鈕

<inputtype="images">，它們在功能上基本相同，只是圖像形式的提交按鈕用圖像替代了默認的按鈕，外觀上更加美觀，需要注意的是，必須為其定義

src屬性指向圖像的

url地址。3.3.2textarea控件文本區(qū)域（textarea）主要用來輸入較長的文本信息，其語法格式如下：<textareaname=""cols="每行中的字符數"rows="顯示的行數"></textarea>其中，name屬性定義文本區(qū)域的名稱，要保證數據的準確采集，必須定義一個獨一無二的名稱。cols屬性定義文本區(qū)域每行的字符數，rows屬性定義文本區(qū)域中顯示的行數。3.3.3select控件瀏覽網頁時，經常會看到包含多個選項的下拉菜單，如選擇所在城市、出生年月、學歷等。在

HTML中，使用

select控件制作下拉菜單，其基本語法格式如下：<selectname=""><optionvalue="選項1">選項1</option><optionvalue="選項2">選項2</option><optionvalue="選項3">選項3</option><optionvalue="選項4">選項4</option><optionvalue="選項5">選項5</option></select>3.3.3select控件需要注意的是，<option></option>標記嵌套在

<select></select>標記中，用于定義下拉列表中的具體選項，每對

<select></select>中至少包含一對

<option></option>。select控件的常用屬性詳見表3-2。表3-2select控件的常用屬性標記屬性描述selectsize指定下拉菜單的可見選項數（取正整數）multiple定義為

multiple時，下拉菜單將具有多項選擇的功能，即按住

Ctrl鍵的同時選擇多項第四節(jié)PART.04表單屬性通過3.2節(jié)的學習我們知道，創(chuàng)建表單的基本語法格式如下：<formaction="url地址"method="提交方式"name="表單名稱">表單控件</form>3.3節(jié)已對表單控件進行了詳細的介紹，下面將對表單的

name、action、method等常用屬性進行說明。1.namename屬性用于指定表單的名稱，以區(qū)分同一個頁面中的多個表單。例如：<formname="form1"></form>2.action當表單收集到信息后，需要將信息傳遞給服務器進行處理，action屬性用于指定接收并處理表單數據的服務程序的

url地址，例如：<formaction="reg.asp"name="form1"></form>提示：以上代碼表示提交表單時，表單數據會傳送到名為“reg.asp”的頁面去處理。如果

action=""，則表示提交給當前頁面。3.methodmethod屬性用于設置表單數據的提交方式，其取值為

get或

post。其中，get為默認值，通過這種方式提交的數據將顯示在瀏覽器地址欄中，保密性差，且有數據量的限制。而

post方式的保密性好，并且無數據量限制，使用

method="post"可以大量地提交數據。第五節(jié)PART.05HTML5對表單的改進HTML5中增加了表單方面的諸多功能，包括

input輸入類型、表單元素、form屬性和

input屬性等，使用這些新元素，前端設計人員可以更加省力高效地制作出標準的

Web

表單。3.5.1新增

input輸入類型在

HTML5中，增加了多個新的表單

input輸入類型，通過使用這些新增的元素，設計人員可以實現更好的輸入控制和驗證。下面通過示例來逐一介紹這些新的

input輸入類型。3.5.1新增

input輸入類型1.email類型email類型的

input類型元素是一種專門用于輸入

E-mail地址的文本輸入框，在提交表單時會自動驗證

email輸入框的值。如果不是一個有效的

E-mail地址，則該輸入框不允許提交該表單。其語法格式如下：<inputtype="email"name="">3.5.1新增

input輸入類型2.url類型url類型的

input元素提供用于輸入

url地址這類特殊文本的文本框。當提交表單時，如果所輸入的內容是

url地址格式的文本，則會提交數據到服務器；如果不是

url地址格式的文本，則不允許提交。其用法格式如下：<inputtype="url"name="user_url">3.5.1新增

input輸入類型3.number類型number類型的

input元素提供用于輸入數值的文本框。我們還可以設定對所接受的數字的限制，包括規(guī)定允許最大值和最小值、合法的數字間隔或默認值等。如果所輸入的數字不在限定范圍之內，則會出現錯誤提示，其語法格式如下：<inputtype="number"name="user_number"max=""min=""step="">3.5.1新增

input輸入類型3.number類型number類型的屬性詳見表3-3。屬性值描述maxnumber最大值minnumber最小值stepnumber數字間隔valuenumber默認值表3-3number類型的屬性3.5.1新增

input輸入類型4.range類型range類型提供用于包含一定范圍內數字值的文本框，在網頁中顯示為滑動條。我們還可以設定對所接受的數字的限制，包括最大值和最小值、合法的數據間隔和默認值。與

number類型相同，這兩種類型的不同之處在于外觀表現上，支持

range類型的瀏覽器會顯示為滑塊的形式，不支持的瀏覽器則會將其顯示為普通的文本輸入框，即以type="text"來處理。如果輸入的數字不在限定的范圍內，則會出現錯誤提示。其語法格式如下：<inputtype="range"name="range1"max=""min="">3.5.1新增

input輸入類型5.日期檢出器類型日期檢出器類型（datepickers）是網頁中經常用到的一種控件，在

HTML5之前的版本中，并沒有提供任何形式的日期檢出器控件。在網頁前端設計中，多是采用一些

JavaScript框架來實現日期檢出器控件的功能，如

jQueryUI，YUI等，在具體使用時會比較麻煩。HTML5提供了6個日期檢出器控件，分別用于選擇以下日期格式：日期、月、星期、時間、日期+時間和日期+時間+時區(qū)，詳見表3-4。3.5.1新增

input輸入類型5.日期檢出器類型表3-3number類型的屬性類型HTML代碼功能說明date<inputtype="date">選取日、月、年month<inputtype="month">選取月、年week<inputtype="week">選取周和年time<inputtype="time">選取時間（小時和分鐘）datetime<inputtype="datetime">選取時間、日、月、年（UTC時間）datetime-local<inputtype="datetime-local">選取時間、日、月、年（本地時間）3.5.1新增

input輸入類型5.日期檢出器類型UTC是

universaltimecoordinated的英文縮寫，即“協(xié)調世界時”，是由國際無線電咨詢委員會規(guī)定和推薦，并由國際時間局（BIH）負責保持的以秒為基礎的時間標度，簡單地說，UTC時間就是0時區(qū)時間，而本地時間即地方時間。例如，北京時間早上8點，是

UTC時間0點，即

UTC時間比北京時間晚8小時。6個時間檢出器類型的代碼格式彼此相似，下面就以

date為例，其語法格式如下：<inputtype="date"name="">3.5.1新增

input輸入類型6.search類型search類型的

input元素提供用于輸入搜索關鍵詞的文本框。雖然從外觀看，search

類型的

input元素與普通的

text類型只是稍有區(qū)別，但實現起來卻并不那么容易。search類型搜索框可用于任一網頁。目前大多數網站的搜索框都是采用

<inputtype="text">的方式來實現的，即采用純文本的文本框，而

HTML5中定義了專用于搜索的

search類型，其語法格式如下：<inputtype="search"name="">3.5.1新增

input輸入類型7.tel類型tel類型的

input元素提供專門用于輸入電話號碼的文本框，但它并不限定只輸入數字，因為很多電話號碼還包括其他字符（如“+”“-”等），其語法格式如下：<inputtype="tel"name="">3.5.1新增

input輸入類型8.color類型color類型的

input元素提供專門用于設置顏色的文本框，通過單擊文本框，可以快速地打開拾色器面板，方便用戶可視化選擇顏色。其語法格式如下：<inputtype="color"name="">3.5.2新增

input屬性input元素不但增加了新的輸入類型，而且還新增幾個

input屬性，用于指定輸入類型的行為和限制，這些屬性分別是

autocomplete、autofocus、form、formoverrides、placeholder、height和

width、min和

max、step、pattern以及

required。本節(jié)將詳細介紹這些屬性。3.5.2新增

input屬性1.autocomplete屬性多數瀏覽器都帶有輔助用戶完成輸入的自動完成功能，只要是開啟了該功能，用戶下次輸入相同的內容時，瀏覽器就會自動完成內容的輸入。autocomplete屬性可以幫助用戶在

input類型的輸入框中實現自動完成內容輸入，這些類型包括：text、search、url、tel、email、password、datepickers、range以及

color。不過在某些瀏覽器中，可能需要首先啟用瀏覽器本身的自動完成功能，才能使

autocomplete屬性起作用。3.5.2新增

input屬性1.autocomplete屬性autocomplete同樣適用于

<form>標簽，默認情況下表單的autocomplete屬性為打開狀態(tài)，其中的輸入類型繼承所在表單的autocomplete屬性，也可以單獨將表單的某一輸入類型的

autocomplete狀態(tài)設置為打開狀態(tài)，這樣可以更好地實現自動完成。autocomplete屬性有3種值：on、off和空值。3.5.2新增

input屬性2.autofocus屬性HTML5新增的

autofocus屬性，它是一個布爾值，可以使得在頁面加載時，某表單控件自動獲得焦點。這些表單控件可以是文本框、復選框、單選按鈕和普通按鈕等所有

<input>標簽類型，autofocus屬性使用代碼如下：<inputtype="tel"name="usertel"autofocus="autofocus">3.5.2新增

input屬性2.autofocus屬性autofocus屬性的出現使得頁面中的表單控件自動獲取焦點變得非常容易，但要注意，在一個頁面中只能指定一個

autofocus屬性值，所以必須謹慎使用。當頁面中的表單控件比較多時，建議選擇最需要聚焦的那個控件來使用這一屬性，例如，一個搜索頁面中的搜索文本框或一個同意某許可協(xié)議的“同意”按鈕。3.5.2新增

input屬性3.form屬性在

HTML5之前，如果用戶要提交一個表單，必須把相關的控件元素都放在表單內部，即

<form>和

</form>標簽對之間，在提交表單時，會將頁面中不是表單子元素的控件直接忽略掉。然而有些時候，可能需要一并提交表單之外的一些元素，而表單固有的缺陷使得這一要求不容易實現。3.5.2新增

input屬性3.form屬性HTML5新增的

form屬性，使得這一問題得到了很好的解決。有了form屬性，便可以把表單內的子元素寫在頁面中的任一位置，然后為這個元素指定

form屬性并設置屬性值為該表單的

id。如此一來，便規(guī)定了該表單元素屬于指定的這一表單。此外，form屬性也允許規(guī)定一個表單元素從屬于多個表單。form屬性適用于所有的

input類型。在使用時，必須引用所屬表單的

id。3.5.2新增

input屬性4.表單重寫屬性（formoverride）HTML5中新增了幾個表單重寫（formoverride）屬性，用于重寫form元素的某些屬性設定，包括以下幾種：（1）formaction

：用于重寫表單的

action屬性。（2）formenctype

：用于重寫表單的

enctype屬性。（3）formmethod

：用于重寫表單的

method屬性。（4）formnovalidate

：用于重寫表單的

novalidate屬性。（5）formtarget

：用于重寫表單

target屬性。3.5.2新增

input屬性4.表單重寫屬性（formoverride）提示：表單重寫屬性并不適用于所有的

input類型，而只適用于

submit和

image輸入類型。3.5.2新增

input屬性5.width和

height屬性width和

height屬性規(guī)定用于

image類型的

<input>標簽的圖像高度和寬度，因此這個屬性只能用于

image類型的

<input>標簽。3.5.2新增

input屬性6.list屬性HTML5新增了一個

datalist元素，可以實現數據列表的下拉效果，其外觀類似

autocomplete，用戶可以從列表中選擇，也可自行輸入。而list屬性用于指定輸入框所綁定的

datalist元素，其值是某個datalist的

id。list屬性適用于以下

input輸入類型：text、search、url、tel、email、datepickers、number、range和

color。下面以

url類型為例介紹

list屬性的應用。（詳見課本p66【例3.28】）3.5.2新增

input屬性7.min、max和

step屬性在

HTML5中新增的

min、max和step屬性用于包含數字或日期的input輸入類型規(guī)定限值，也就是給這些類型的輸入框加一個數值的約束，適用于

datepickers、number和

range類型。（1）max屬性

：規(guī)定輸入框允許的最大值。（2）min屬性

：規(guī)定輸入框允許的最小值。（3）step