《HTML5網(wǎng)頁前端設(shè)計》教案第6章HTML5表單API一、教學(xué)目標(biāo)：了解HTML5表單的作用；掌握HTML5表單API保留的常用標(biāo)簽用法；掌握HTML5新增輸入類型的用法；掌握HTML5新增元素標(biāo)簽的用法；掌握HTML5新增元素屬性的用法。二、教學(xué)重點(diǎn)和難點(diǎn)：重點(diǎn)：掌握HTML5表單API保留的常用標(biāo)簽用法；難點(diǎn)：掌握HTML5表單API新增元素標(biāo)簽和屬性的用法。三、教學(xué)方法與手段：采取互動式教學(xué)方法，理論教學(xué)使用多媒體投影教室。四、課程簡介：本章主要介紹HTML5表單API的功能與應(yīng)用。HTML表單主要用于收集用戶輸入或選擇的數(shù)據(jù)，并將其作為參數(shù)提交給遠(yuǎn)程服務(wù)器。本章主要內(nèi)容包括HTML表單的基礎(chǔ)知識與HTML5表單API的新特性。在HTML5表單API新特性中增加了HTML5特有的輸入類型、元素標(biāo)簽與相關(guān)屬性。五、教學(xué)基本內(nèi)容：6.1HTML表單基礎(chǔ) 6.1.1表單標(biāo)簽<form> 表單標(biāo)簽<form>和</form>用于定義一個完整的表單框架，其內(nèi)部可包含各式各樣的表單組件，例如文本輸入框、密碼框、按鈕等內(nèi)容。表單標(biāo)簽<form>的基本語法格式如下：<form><!--內(nèi)部可添加各種表單組件--></form>在HTML4中該標(biāo)簽具有5種屬性，如表6-1所示。表6-SEQ表5-\*ARABIC1表單元素<form>屬性一覽表屬性名稱屬性值解釋actionURL地址規(guī)定表單提交數(shù)據(jù)的服務(wù)器地址。methodget或post規(guī)定用于發(fā)送表單數(shù)據(jù)的HTTP方法，默認(rèn)值為自定義表單名稱規(guī)定表單的名稱，具有唯一性。enctypeapplication/x-www-form-urlencodedmultipart/form-datatext/plain規(guī)定表單數(shù)據(jù)發(fā)送之前的編碼要求。target_blank_self_parent_topiframename規(guī)定在何處打開action屬性中的URL地址。表單的method屬性用于規(guī)定了發(fā)送表單數(shù)據(jù)的兩種HTTP方法：GET和POST方法。表單的enctype屬性用于規(guī)定表單數(shù)據(jù)傳遞時的編碼方式，具有3種屬性值：application/x-www-form-urlencoded、multipart/form-data和text/plain。上述這些屬性中比較常用的是action和method，用于規(guī)定表單數(shù)據(jù)提交的URL地址以及提交方式。其余屬性無特殊情況一般可省略直接使用默認(rèn)值。例如：<formaction="http://localhost/testform"method="post"><!--內(nèi)部可添加各種表單組件--></form>單純的<form>標(biāo)簽不包含任何可視化內(nèi)容，需要與表單組件配合使用形成完整的表單效果。6.1.2輸入標(biāo)簽<input>輸入標(biāo)簽<input>是最常用的表單標(biāo)簽，根據(jù)其type屬性值的不同可以顯示多種表單元素樣式，例如單行文本輸入框、密碼框、單選和復(fù)選按鈕等。該表單標(biāo)簽有一系列屬性用于對表單輸入控件進(jìn)行設(shè)置，如表6-2所示。表6-SEQ表5-\*ARABIC2<input>標(biāo)簽的常用屬性屬性名稱屬性值解釋accpetMIME文件類型只能與<inputtype="file">的文件上傳控件配合使用，用于規(guī)定文件上傳控件可選擇的文件類型。alt文本內(nèi)容只能與<inputtype="image">的圖像按鈕控件配合使用，用于規(guī)定無法顯示圖像時的提示文本。checkedchecked只能與<inputtype="radio">的單選框或<inputtype="checkbox">的復(fù)選框配合使用，用于規(guī)定頁面加載時默認(rèn)為選中狀態(tài)。disableddisabled用于規(guī)定加載時禁用此元素。maxlength數(shù)值用于規(guī)定輸入框中字符的最大長度。name自定義名稱用于定義<input>標(biāo)簽的名稱，如果沒有填寫name屬性值則表單組件的內(nèi)容無法被正確提交。readonlyreadonly用于定義<input>標(biāo)簽中的文本為不可編輯的只讀狀態(tài)。size數(shù)值用于定義輸入框中可見字符的個數(shù)。typetextpasswordradiocheckboxsubmitresetbuttonimagefilehidden用于規(guī)定<input>標(biāo)簽的類型，具體解釋見表6-2。value文本值用于規(guī)定<input>標(biāo)簽的值。<input>標(biāo)簽的常見語法格式如下：<inputtype="輸入類型"name="自定義名稱"/>其中type屬性值需要替換成表示輸入類型的關(guān)鍵詞，在HTML4中<input>標(biāo)簽的基本輸入類型共有10種，如表6-3所示。表6-SEQ表5-\*ARABIC3<input>標(biāo)簽的基本輸入類型類型名稱解釋text用于顯示單行文本輸入框。password用于顯示密碼輸入框，其中字符會被*遮擋。radio用于顯示單選按鈕。checkbox用于顯示復(fù)選按鈕。submit用于顯示提交按鈕，該按鈕可以將表單數(shù)據(jù)發(fā)送給服務(wù)器。reset用于顯示重置按鈕，該按鈕可以清除表單中的所有數(shù)據(jù)。button用于顯示無動作按鈕，通常點(diǎn)擊事件需要配合JavaScript使用。image用于顯示圖像形式的提交按鈕。file用于顯示文件上傳控件，包含輸入?yún)^(qū)域和瀏覽按鈕。hidden用于隱藏輸入字段。6.1.3標(biāo)記標(biāo)簽<label> 標(biāo)記標(biāo)簽<label>又稱為標(biāo)注標(biāo)簽，可放置在<input>元素前后為其定義標(biāo)記，通常為文本形式作為<input>元素的補(bǔ)充說明。雖然顯示效果與普通文本一致，但是<label>標(biāo)簽可以在被點(diǎn)擊時為對應(yīng)的表單控件生成焦點(diǎn)?？梢栽?lt;label>元素的首標(biāo)簽中使用for屬性引用對應(yīng)表單控件的id名稱。例如：<labelfor="name">姓名：</label><inputtype="text"name="name1"id="name1"/>其中表單控件的id名稱為自定義，可以與name屬性值相同。也可以直接將文本內(nèi)容與表單控件都放入<label>和</label>標(biāo)簽之間，此時無需為<input>元素特別設(shè)置id名稱。例如：<label>姓名：<inputtype="text"name="name1"/></label>這兩種方法的運(yùn)行效果完全相同。6.1.4多行文本標(biāo)簽<textarea> 使用<textarea>標(biāo)簽可以實(shí)現(xiàn)多行文本區(qū)域，它與<input>標(biāo)簽實(shí)現(xiàn)的文本框最大的區(qū)別在于<textarea>元素允許文本回車換行。其基本語法格式如下：<textarea></textarea>使用該標(biāo)簽實(shí)現(xiàn)的文本域可以容納無限量的文本內(nèi)容，其中文本的默認(rèn)字體為Courier。目前該標(biāo)簽具有3種屬性，如表6-5所示。表6-SEQ表5-\*ARABIC5<textarea>元素屬性一覽表屬性名稱屬性值解釋rows正整數(shù)的數(shù)值規(guī)定文本框可見的行數(shù)。cols正整數(shù)的數(shù)值規(guī)定文本框可見的寬度，默認(rèn)值為20。wrapsoft或hard規(guī)定文本框的換行方式，默認(rèn)值為soft。例如，聲明一個20行、每行15個字符的多行文本域，寫法如下：<textareacols="15"rows="20"></textarea>也可以使用CSS樣式規(guī)定<textarea>元素的寬度（width）和高度（height）屬性。默認(rèn)情況下，<textarea>元素形成的多行文本框是可編輯狀態(tài)，可以使用<textarea>元素的readonly屬性將該文本框改為只讀狀態(tài)，或使用disabled屬性禁用該文本區(qū)域。6.1.5列表標(biāo)簽<select> 在HTML表單中，<select>標(biāo)簽可以用于創(chuàng)建單選或多選菜單，菜單的樣式根據(jù)屬性值的不同可顯示為下拉菜單或列表框。在HTML4中該標(biāo)簽具有4種屬性，如表6-6所示。表6-SEQ表5-\*ARABIC6列表元素<select>屬性一覽表屬性名稱屬性值解釋disableddisabled禁用列表菜單。multiplemultiple規(guī)定允許同時選中多個選項。name自定義名稱規(guī)定列表元素的名稱。size數(shù)值規(guī)定列表菜單中可見選項的個數(shù)。其中multiple屬性會使得<select>元素的顯示樣式從默認(rèn)的下拉菜單變更為列表框，并允許同時選中多個選項欄目。最常見的用法是<select>元素配合若干個<option>標(biāo)簽使用，形成簡易的下拉菜單。<option>標(biāo)簽具有4種屬性，如表6-7所示。表6-SEQ表5-\*ARABIC7選項元素<option>屬性一覽表屬性名稱屬性值解釋disableddisabled首次加載時禁用當(dāng)前選項。label文本內(nèi)容規(guī)定選項的簡寫內(nèi)容，該內(nèi)容將取代原選項內(nèi)容顯示在列表中。selectedselected規(guī)定首次加載時當(dāng)前選項為選中狀態(tài)。value文本內(nèi)容規(guī)定提交表單時發(fā)送給服務(wù)器的選項值。選項標(biāo)簽<option>配合列表標(biāo)簽<select>使用的基本語法格式如下：<select><optionvalue="值1">選項1</option><optionvalue="值2">選項2</option>……<optionvalue="值N">選項N</option></select>其中value屬性值是提交表單時傳遞的數(shù)據(jù)值，不顯示在網(wǎng)頁上；<option>首尾標(biāo)簽之間的文本才是顯示在網(wǎng)頁上的選項內(nèi)容。例如：<select><optionvalue="apple">蘋果</option><optionvalue="cherry">櫻桃</option><optionvalue="grape">葡萄</option></select>在頁面首次加載時第一條選項為默認(rèn)選中的狀態(tài)。如果需要默認(rèn)選中列表中的其他選項，可以為該選項標(biāo)簽<option>添加selected屬性。例如，為第三個選項設(shè)置默認(rèn)選中效果：<select><optionvalue="apple">蘋果</option><optionvalue="banana">香蕉</option><optionvalue="grape"selected>葡萄</option></select>其中selected屬性的完整聲明應(yīng)為selected="selected"，也可以簡寫為selected。需要注意是，如果是單選狀態(tài)只能為其中一個選項添加selected屬性。如果為多個選項同時添加了該屬性，則默認(rèn)也只顯示最后一個帶有selected屬性的選項。如果列表項目較多需要進(jìn)行分類，可以使用<optgroup>標(biāo)簽定義選項組。<optgroup>標(biāo)簽具有2種屬性，如表6-8所示。表6-SEQ表5-\*ARABIC8選項組元素<optgroup>屬性一覽表屬性名稱屬性值解釋disableddisabled禁用選項組中的所有選項。label文本內(nèi)容規(guī)定選項組的標(biāo)題。例如：<select><optgrouplabel="水果類"><optionvalue="apple">蘋果</option><optionvalue="banana">香蕉</option><optionvalue="grape">葡萄</option></optgroup><optgrouplabel="蔬菜類"><optionvalue="apple">南瓜</option><optionvalue="banana">四季豆</option><optionvalue="grape">土豆</option></optgroup></select>此時<optgroup>標(biāo)簽中l(wèi)abel屬性的文本內(nèi)容也會顯示在列表中作為分組選項的標(biāo)題，點(diǎn)擊時不會變?yōu)檫x中狀態(tài)。6.1.6按鈕標(biāo)簽<button> 按鈕標(biāo)簽<button>可用于在網(wǎng)頁上生成自定義樣式的按鈕。在<button>和</button>標(biāo)簽之間可以包含普通純文本內(nèi)容、圖像、文本格式化標(biāo)簽等內(nèi)容；而<input>的提交（submit）、重置（reset）或無動作按鈕（button）類型都只允許包含無樣式的普通文本，如果需要圖片必須使用專門的圖像提交按鈕（image）類型。這意味著使用<button>可以創(chuàng)建帶有圖像、顏色、文字等更多樣式效果的按鈕，比<input>標(biāo)簽創(chuàng)建的按鈕更加豐富。在HTML4中該標(biāo)簽具有4種屬性，如表6-9所示。表6-SEQ表5-\*ARABIC9按鈕元素<button>屬性一覽表屬性名稱屬性值解釋disableddisabled禁用當(dāng)前按鈕元素。name自定義名稱規(guī)定按鈕的名稱。typebuttonresetsubmit規(guī)定按鈕的類型。value文本內(nèi)容規(guī)定按鈕的初始值。<button>按鈕也可以在表單之外獨(dú)立使用，配合JavaScript腳本形成多樣化的功能。6.1.7域標(biāo)簽<fieldset>和域標(biāo)題標(biāo)簽<legend> 域標(biāo)簽<fieldset>可以用于將同一個表單中的多個表單元素分組顯示。當(dāng)把一組表單元素放在<fieldset>和</fieldset>標(biāo)簽之間，瀏覽器會形成邊框效果凸顯分組。配合以域標(biāo)題標(biāo)簽<legend>使用，可以為每個分組的區(qū)域顯示獨(dú)立的標(biāo)題。其基本語法格式如下：<form><fieldset><legend>域標(biāo)題</legend><!--其他表單組件--></fieldset></form>例如，用于顯示學(xué)生的個人基本信息：<form><fieldset><legend>學(xué)生基本信息</legend>姓名：<inputtype="text"/>學(xué)號：<inputtype="text"/></fieldset></form>在同一個表單內(nèi)可以使用<fieldset>標(biāo)簽對表單元素進(jìn)行多項分組。6.2HTML5表單新特性 6.2.1HTML5表單新增輸入類型 HTML5新增多項表單輸入類型，這些新類型具有更明確的含義，并且在禁用瀏覽器腳本的情況都可以為用戶提供輸入控制和驗證。HTML5表單新增的輸入類型共計13種，如表6-10所示。表6-SEQ表5-\*ARABIC10HTML5表單新增輸入類型輸入類型含義tel電話號碼email電子郵箱地址urlURL網(wǎng)址number數(shù)值range包含數(shù)值范圍的滾動條datetimeUTC日期（包含年、月、日）和時間（包含時、分）datetime-local本地日期和時間time選擇時間（包含時、分）date選擇日期（包含年、月、日）week選擇星期（包含年、第幾周）month選擇月份（包含年、月）search搜索欄目的文本輸入域color顏色選擇器在HTML4中最常見的普通單行文本框輸入類型格式為<inputtype="text"name="自定義名稱"/>，HTML5新增的輸入類型寫法格式是相類似的，需要將雙引號中的text替換為表中新的類型值。其中datetime、datetime-local、time、date、week和month類型是6種樣式不同的時間日期選擇器控件，統(tǒng)稱為DatePickers（日期選擇器）。6.2.2HTML5表單新增元素標(biāo)簽 本節(jié)將介紹HTML5中新增的兩個表單元素標(biāo)簽：<datalist>和<output>元素。1.數(shù)據(jù)列表標(biāo)簽<datalist>使用數(shù)據(jù)列表標(biāo)簽<datalist>可以為普通單行文本輸入框提供提示選項。提示選項初始為隱藏狀態(tài)，當(dāng)焦點(diǎn)位于對應(yīng)的文本輸入框時會在下方自動展開提示選項，用戶可以通過點(diǎn)擊提示選項自動生成文本內(nèi)容。在HTML5中該標(biāo)簽具有4種屬性，如表6-19所示。表6-SEQ表5-\*ARABIC19數(shù)據(jù)列表標(biāo)簽<datalist>屬性一覽表屬性名稱屬性值解釋disableddisabled禁用列表菜單。multiplemultiple規(guī)定允許同時選中多個選項。name自定義名稱規(guī)定列表元素的名稱。size數(shù)值規(guī)定列表菜單中可見選項的個數(shù)。<datalist>元素和列表標(biāo)簽<select>的用法類似，也需要在其首尾標(biāo)簽內(nèi)部使用一個或多個選項標(biāo)簽<option>。其基本格式如下：<datalist><optionvalue="值1">選項一</option><optionvalue="值2">選項二</option><optionvalue="值3">選項三</option></datalist>其中<option>標(biāo)簽的value值為可選。如果設(shè)置了value值則該屬性值會隨著用戶的選擇自動顯示在文本輸入框中；如果沒有設(shè)置value值，則會顯示<option>首尾標(biāo)簽之間的文本內(nèi)容。<datalist>無法單獨(dú)使用，需要與文本輸入框配合使用。在需要顯示列表選項的文本框中添加list屬性并令其屬性值為<datalist>元素的id名稱。例如：<inputtype="text"list="myList"/><datalistid="myList"><option>選項一</option><option>選項二</option><option>選項三</option></datalist>在<datalist>的首標(biāo)簽內(nèi)必須為其聲明一個自定義的id名稱方可被文本輸入框調(diào)用。2.輸出標(biāo)簽<output>輸出標(biāo)簽<output>用于顯示各類輸出結(jié)果，可以和表單oninput事件配合使用，動態(tài)變化輸出結(jié)果。其基本格式如下：<outputname="自定義名稱"for="相關(guān)元素id名稱">文本內(nèi)容</output>其中for屬性中可填入關(guān)聯(lián)的一個或多個元素的id名稱，如果是填入多個名稱中間用空格隔開即可。例如：<inputtype="range"name="range1"id="range1"min="0"max="100"step="1"value="0"/><inputtype="range"name="range1"id="range1"min="0"max="100"step="1"value="0"/><outputname="output1"for="range1">0</output>6.2.3HTML5表單新增屬性 1.autofocus屬性autofocus屬性使得指定的輸入框在頁面加載時自動成為焦點(diǎn)，該屬性適用于所有<input>標(biāo)簽的類型。使用方式是在需要獲取焦點(diǎn)的<input>標(biāo)簽中添加autofocus="autofocus"或直接簡寫為autofocus。例如：<inputtype="password"name="pwd"autofocus/>2.form屬性在HTML5之前，只有包含在表單標(biāo)簽<form>內(nèi)的表單組件方能正確提交給服務(wù)器，而在HTML5中表單組件可以通過規(guī)定form屬性放置于<form>標(biāo)簽之外。form屬性可以指定<input>元素從屬于哪個表單，同一個<input>元素可以屬于一個甚至多個表單。該屬性適用于所有<input>標(biāo)簽的類型。外部的<input>標(biāo)簽在使用時必須引用表單標(biāo)簽<form>的id名稱。例如：<formid="form1"><!--內(nèi)容略--></form><inputid="username"type="text"form="form1"/>上述代碼中，外部的<input>標(biāo)簽通過引用表單標(biāo)簽<form>的id名稱"form1"實(shí)現(xiàn)了與該表單的關(guān)聯(lián)。當(dāng)提交表單給服務(wù)器時，該標(biāo)簽的內(nèi)容也會當(dāng)作表單標(biāo)簽<form>內(nèi)部的內(nèi)容一并提交。外部的<input>標(biāo)簽還允許同時從屬多個表單，在使用form屬性引用多個表單的id名稱時需要使用逗號進(jìn)行分割。例如：<formid="form1"><!--內(nèi)容略--></form><formid="form2"><!--內(nèi)容略--></form><inputid="username"type="text"form="form1,form2"/>上述代碼中，外部的<input>標(biāo)簽通過form屬性聲明實(shí)現(xiàn)了同時與不同表單元素關(guān)聯(lián)的從屬關(guān)系。其中任意一個表單向服務(wù)器提交數(shù)據(jù)時，都會將外部的<input>標(biāo)簽的內(nèi)容當(dāng)作表單元素內(nèi)部的數(shù)據(jù)一并提交。3.formaction系列屬性以formaction為首的一系列屬性被稱為表單重寫屬性（formoverrideattributes），它們可以用于更改表單的一些屬性設(shè)置，并且僅適用于類型為submit或image的<input>標(biāo)簽。常用表單重寫屬性共有五種，如表6-25所示。表6-SEQ表5-\*ARABIC25常用表單重寫屬性一覽表屬性名稱解釋formaction用于重寫表單的action屬性。formenctype用于重寫表單的enctype屬性。formmethod用于重寫表單的method屬性。formnovalidate用于重寫表單的novalidate屬性。formtarget用于重寫表單的target屬性。如果表單標(biāo)簽<form>中設(shè)置的屬性在提交按鈕中進(jìn)行了重寫，則會優(yōu)先使用提交按鈕中設(shè)置的表單重寫屬性。例如：<formmethod="get"><!--內(nèi)容略--><inputtype="submit"value="提交"formmethod="post"/></form>上述代碼中雖然<form>標(biāo)簽設(shè)置了method屬性值為"get"，但是當(dāng)點(diǎn)擊提交按鈕時，該屬性值會被更新為"post"。利用這些表單重寫屬性可以方便在同一個表單中設(shè)置多個不同的提交按鈕，并可以為這些提交按鈕分別設(shè)置各自的屬性，它們互相不會產(chǎn)生干擾。例如：<formmethod="post"><!--內(nèi)容略--><inputtype="submit"value="注冊"formaction="register"/><inputtype="submit"value="登陸"formaction="login"/></form>上述代碼表示當(dāng)點(diǎn)擊“注冊”或“登陸”按鈕時會分別將數(shù)據(jù)提交給不同的服務(wù)器地址進(jìn)行處理。4.placeholder屬性placeholder屬性為input類型提供了提示功能，該提示會在空白輸入框中出現(xiàn)，當(dāng)輸入框獲得焦點(diǎn)時提示消失。該屬性適用于<input>標(biāo)簽的6種常見類型：text（單行文本框）、search（搜索框）、url（URL地址）、tel（電話）、email（電子郵箱）和password（密碼框）。使用方式是將placeholder屬性添加到<input>標(biāo)簽中，并給出提示內(nèi)容。例如：<inputtype="text"name="username"placeholder="請輸入用戶名"/>5.required屬性required屬性要求在提交之前必須在輸入框內(nèi)填寫內(nèi)容，提交時輸入框不能為空。該屬性適用于<input>標(biāo)簽常用的11種類型：text（單行文本框）、search（搜索框）、url（URL地址）、tel（電話）、email（電子郵箱）、password（密碼框）、datepickers（日期選擇器）、number（數(shù)值）、checkbox（多選按鈕）、radio（單選按鈕）和file（上傳文件控件）。例如：用戶名：<inputtype="text"name="usrname"required/>6.max、min和step屬性max和min屬性用于為數(shù)字或日期的input類型規(guī)定所允許的數(shù)值范圍：其中max規(guī)定最大值，min規(guī)定最小值，step屬性規(guī)定數(shù)字間隔。max、min和step屬性均適用于3種類型的<input>標(biāo)簽：datepickers（日期選擇器）、number（數(shù)值）和range（數(shù)值范圍）。這三個屬性使用時不分先后順序，例如：<inputtype="number"max="100"min="0"step="20"/>上述代碼表示在數(shù)值輸入框中允許輸入的最小值為0，最大值為100。并且數(shù)字間隔為10，表示只能輸入0、20、40、60、80和100。7.multiple屬性multiple屬性可以允許<input>標(biāo)簽同時輸入多個值。該屬性只適用于2種類型的<input>標(biāo)簽：email（電子郵箱）和file（上傳文件控件）。例如：選擇文件：<inputtype="file"name="file"multiple/>其中multiple屬性為簡寫形式，完整的寫法是multiple="multiple"。8.width和height屬性width和height屬性只能用于類型為image的<input>標(biāo)簽，為圖像規(guī)定以像素為單位的寬度（width）和高度（height）。例如，規(guī)定圖像提交按鈕的寬和高分別為240像素和50像素：<inputtype="image"src="image/btn.jpg"alt="登錄"width="240"height="50"/>9.pattern屬性pattern屬性用于約束輸入域的內(nèi)容，該屬性以正則表達(dá)式的方式對輸入內(nèi)容進(jìn)行規(guī)范。關(guān)于正則表達(dá)式的用法可參考第四章JavaScript基礎(chǔ)中正則表達(dá)式（RegExp）類型的教程。該屬性適用于6種<input>標(biāo)簽：text（單行文本框）、search（搜索框）、url（URL地址）、tel（電話）、email（電子郵箱）以及password（密碼框）。例如：<inputtype="text"name="country_code"pattern="[A-z]{3}"title="Threelettercountrycode"/>上述代碼表示輸入框只允許填入英文大小寫字母，并且只可以有三個字符。10.list屬性list屬性可以為輸入框提供一系列選項提示，需要與數(shù)據(jù)列表標(biāo)簽<datalist>配合使用。數(shù)據(jù)列表標(biāo)簽<datalist>是輸入域的提示選項列表，當(dāng)輸入域獲得焦點(diǎn)時，提示選項列表會自動展開。該屬性適用于9種<input>標(biāo)簽：text（單行文本框）、search（搜索框）、url（URL地址）、tel（電話）、email（電子郵箱）、datepickers（日期選擇器）、number（數(shù)值）、range（數(shù)值范圍）、和color（顏色選擇器）。11.autocomplete屬性autocomplete屬性表示在<form>或<input>域中為用戶正在輸入的內(nèi)容顯示曾經(jīng)填寫過的內(nèi)容選項，其屬性值有on（開啟）或off（關(guān)閉）兩種情況。該屬性同時適用于<form>標(biāo)簽和9種<input>標(biāo)簽：text（單行文本框）、search（搜索框）、url（URL地址）、tel（電話）、email（電子郵箱）、password（密碼框）、datepickers（日期選擇器）、range（數(shù)值范圍）和color（顏色）。12.novalidate屬性novalidate屬性表示在表單提交時不驗證form或input域的內(nèi)容，其屬性值有true（真）或false（假）兩種情況。該屬性同時適用于<form>標(biāo)簽和9種<input>標(biāo)簽：text（單行文本框）、search（搜索框）、url（URL地址）、tel（電話）、email（電子郵箱）、password（密碼框）、datepickers（日期選擇器）、range（數(shù)值范圍）和color（顏色）。6.3實(shí)驗案例——用戶注冊頁面的設(shè)計與實(shí)現(xiàn)功能介紹：使用HTML5表單技術(shù)實(shí)現(xiàn)用戶注冊頁面，要求用戶可以輸入用戶名、密碼、真實(shí)姓名和電子郵箱等信息進(jìn)行注冊。驗證要求：每個輸入欄目的文本框均需要顯示提示信息。用戶在點(diǎn)擊按鈕提交注冊信息時可以