《移動(dòng)Web開(kāi)發(fā)實(shí)戰(zhàn)》教學(xué)課件-第5章-使用表單元素

目錄表單元素的類(lèi)型表單元素中的屬性實(shí)例5-4：在網(wǎng)頁(yè)中生成一個(gè)密鑰實(shí)例5-1：驗(yàn)證輸入的是否是一個(gè)URL地址實(shí)例5-2：驗(yàn)證輸入的數(shù)值是否合法實(shí)例5-3：實(shí)現(xiàn)一個(gè)簡(jiǎn)單的乘法計(jì)算器綜合實(shí)例：制作一個(gè)顏色滑動(dòng)控制器目錄表單元素的類(lèi)型表單元素中的屬性實(shí)例5-4：在網(wǎng)頁(yè)中生成一1表單元素的類(lèi)型HTML5提供了多個(gè)新的表單輸入類(lèi)型，這些新類(lèi)型為我們提供了更好的輸入控制和驗(yàn)證功能。在HTML5標(biāo)記語(yǔ)言中，包含了如下所示的輸入類(lèi)型。emailurlnumberrangeDatepickers（date，month，week，time，datetime，datetime-local）searchcolor1表單元素的類(lèi)型HTML5提供了多個(gè)新的表單輸入類(lèi)型，這些新1表單元素的類(lèi)型5.1.1email類(lèi)型在HTML5標(biāo)記語(yǔ)言中，email類(lèi)型用于包含Email地址的輸入域。如果將<input>元素中的“type”類(lèi)型設(shè)置為“email”，將在頁(yè)面中創(chuàng)建一個(gè)專(zhuān)門(mén)用于輸入郵件地址的文本輸入框。在顯示頁(yè)面時(shí)，這個(gè)文本框與其他文本框沒(méi)有區(qū)別，專(zhuān)門(mén)用于接收Email地址信息。當(dāng)提交表單時(shí)，會(huì)自動(dòng)檢測(cè)文本框中的內(nèi)容是否符合Email郵件地址格式，如果不符則提示相應(yīng)錯(cuò)誤信息。在現(xiàn)實(shí)應(yīng)用中，在提交表單之前不會(huì)檢測(cè)email類(lèi)型文本框的內(nèi)容是否為空，只有在不為空的情況下才會(huì)檢測(cè)其內(nèi)容是否符合標(biāo)準(zhǔn)的Email格式。如果將該元素的“multiple”屬性設(shè)置為“true”，則表示允許用戶(hù)輸入一串用逗號(hào)分隔的Email地址。在提交表單時(shí)，會(huì)自動(dòng)驗(yàn)證Email域中的值是否合法。1表單元素的類(lèi)型5.1.1email類(lèi)型在HTML5標(biāo)記1表單元素的類(lèi)型5.1.2url類(lèi)型在HTML5標(biāo)記語(yǔ)言中，url類(lèi)型用于包含URL地址的輸入域。在提交表單時(shí)，會(huì)自動(dòng)驗(yàn)證url域中的值。在輸入元素<input>中，“url”類(lèi)型是一種新增的類(lèi)型，該類(lèi)型表示<input>元素是一個(gè)專(zhuān)門(mén)用于輸入Web站點(diǎn)地址的輸入框。Web地址的格式與普通文本有些區(qū)別，例如文本中有反斜杠“/”和點(diǎn)“.”。為了確保“url”類(lèi)型的輸入框能夠正確提交符合格式的內(nèi)容，表單在提交數(shù)據(jù)前會(huì)自動(dòng)驗(yàn)證其內(nèi)容格式的有效性。如果不符合對(duì)應(yīng)的格式，則會(huì)出現(xiàn)相應(yīng)的錯(cuò)誤提示信息。并且與“email”類(lèi)型一樣，url的有效性檢測(cè)并不會(huì)判斷輸入框的內(nèi)容是否為空，而是針對(duì)非空內(nèi)容進(jìn)行格式檢測(cè)。1表單元素的類(lèi)型5.1.2url類(lèi)型在HTML5標(biāo)記語(yǔ)言1表單元素的類(lèi)型5.1.3number類(lèi)型在HTML5標(biāo)記語(yǔ)言中，number類(lèi)型用于設(shè)置包含數(shù)值的輸入域，通過(guò)此類(lèi)型能夠設(shè)置對(duì)所接受的數(shù)字的限定。在網(wǎng)頁(yè)設(shè)計(jì)應(yīng)用中，可以使用下表所示的屬性來(lái)設(shè)置對(duì)數(shù)字類(lèi)型的限定。number類(lèi)型支持的屬性1表單元素的類(lèi)型5.1.3number類(lèi)型在HTML5標(biāo)1表單元素的類(lèi)型在HTML4及以前的版本中，如果想要在表單中輸入一個(gè)指定范圍的整數(shù)，需要在表單提交前使用代碼進(jìn)行數(shù)據(jù)檢測(cè)，以確定輸入框中是否是一個(gè)符合要求的整數(shù)。而在HTML5標(biāo)記語(yǔ)言中，只要?jiǎng)?chuàng)建一個(gè)“number”類(lèi)型的<input>元素便可以實(shí)現(xiàn)以上操作。該類(lèi)型的元素在HTML5中還將顯示一個(gè)微調(diào)控件。如果指定了最大與最小范圍值，就可以點(diǎn)擊微調(diào)控件的上限與下限按鈕，以指定的步長(zhǎng)（step）增加或減少輸入框中的值，極大方便了用戶(hù)的操作。在“number”類(lèi)型的輸入框中，不能輸入其他非數(shù)字型的字符，并且當(dāng)輸入的數(shù)字大于設(shè)定的最大值或小于設(shè)置的最小值時(shí)，都將出現(xiàn)數(shù)字輸入出錯(cuò)的提示信息。同樣道理，該類(lèi)型不進(jìn)行輸入內(nèi)容是否為空值的自動(dòng)檢測(cè)。1表單元素的類(lèi)型在HTML4及以前的版本中，如果想要在表單中1表單元素的類(lèi)型5.1.4DatePickers（數(shù)據(jù)檢出器）在HTML5標(biāo)記語(yǔ)言中，使用DatePickers（數(shù)據(jù)檢出器）可以為用戶(hù)提供日期和時(shí)間輸入框。DatePickers的意義是可以避免用打字的方式輸入日期和時(shí)間，能夠大大提高處理數(shù)據(jù)的效率。在HTML5中提供了多個(gè)可供選取日期和時(shí)間的新輸入類(lèi)型，具體說(shuō)明如下：date：選取日、月、年。month：選取月、年。week：選取周和年。time：選取時(shí)間（小時(shí)和分鐘）。datetime：選取時(shí)間、日、月、年（UTC時(shí)間）。datetime-local：選取時(shí)間、日、月、年（本地時(shí)間）。1表單元素的類(lèi)型5.1.4DatePickers（數(shù)據(jù)1表單元素的類(lèi)型在HTML4之前的版本中，沒(méi)有專(zhuān)門(mén)用于顯示日期的文本輸入框，開(kāi)發(fā)人員需要編寫(xiě)大量的JavaScript代碼或?qū)胂鄳?yīng)的插件。而在HTML5中，只需要將<input>元素的類(lèi)型設(shè)置為“date”，便可以創(chuàng)建一個(gè)日期輸入框。當(dāng)單擊該文本框時(shí)會(huì)彈出一個(gè)日歷選擇器，選擇日期并關(guān)閉這個(gè)框，會(huì)將所選擇的日期顯示在文本框中。1表單元素的類(lèi)型在HTML4之前的版本中，沒(méi)有專(zhuān)門(mén)用于顯示日2表單元素中的屬性除了本章中介紹的表單類(lèi)型外，在HTML5中還可以使用屬性來(lái)實(shí)現(xiàn)我們需要的顯示功能。HTML5新增的表單屬性如下：（1）新的form屬性autocompletenovalidate（2）新的input屬性autocompleteautofocusformformoverrides（formaction，formenctype，formmethod，formnovalidate，formtarget）2表單元素中的屬性除了本章中介紹的表單類(lèi)型外，在HTML5中2表單元素中的屬性height和widthlistmin、max和stepmultiplepattern（regexp）placeholderrequired下面我們具體介紹其中常用的一些。2表單元素中的屬性height和width下面我們具體介紹其2表單元素中的屬性5.2.1記住表單中的數(shù)據(jù)在HTML5的<input>元素中，屬性“autofocus”是一個(gè)布爾值。主要功能是當(dāng)加載頁(yè)面完成后，設(shè)置光標(biāo)是否自動(dòng)鎖定<input>元素，即是否使元素自動(dòng)獲取焦點(diǎn)。在<input>元素中，如果將該屬性的值設(shè)置為“true”或直接輸入“autofocus”屬性名稱(chēng)，那么對(duì)應(yīng)的元素將自動(dòng)獲取焦點(diǎn)。2表單元素中的屬性5.2.1記住表單中的數(shù)據(jù)在HTML52表單元素中的屬性5.2.2驗(yàn)證表單中輸入的數(shù)據(jù)是否合法在HTML5網(wǎng)頁(yè)中，可以通過(guò)“pattern”屬性驗(yàn)證在表單中輸入的數(shù)據(jù)是否合法。pattern屬性適用于以下類(lèi)型的<input>標(biāo)簽：textsearchurltelephoneemailpassword“email”和“url”等類(lèi)型的<input>元素都內(nèi)置了正則表達(dá)式，當(dāng)創(chuàng)建這些元素時(shí)，通過(guò)與內(nèi)容進(jìn)行匹配的方式進(jìn)行有效性驗(yàn)證。其實(shí)這些元素都使用了“pattern”屬性，只是內(nèi)置的而已。但是內(nèi)置驗(yàn)證的元素畢竟較少，并且如果要進(jìn)行組合式的驗(yàn)證，就需要使用“pattem”屬性。該屬性支持各種類(lèi)型的組合正則表達(dá)式，用來(lái)驗(yàn)證對(duì)應(yīng)文本輸入框中的內(nèi)容。2表單元素中的屬性5.2.2驗(yàn)證表單中輸入的數(shù)據(jù)是否合法2表單元素中的屬性5.2.3在文本框中顯示提示信息在HTML5標(biāo)記語(yǔ)言中，placeholder屬性能夠提供一種描述輸入域所期待值的提示。只要為某個(gè)元素設(shè)置“placeholder”屬性后，會(huì)在輸入域?yàn)榭諘r(shí)顯示提示，在輸入域獲得焦點(diǎn)時(shí)這個(gè)提示會(huì)消失。placeholder屬性適用于以下所示的<input>標(biāo)簽類(lèi)型：textsearchurltelephoneemailpassword2表單元素中的屬性5.2.3在文本框中顯示提示信息在HT2表單元素中的屬性5.2.4驗(yàn)證文本框中的內(nèi)容是否為空在HTML5標(biāo)記語(yǔ)言中，可以使用required屬性來(lái)驗(yàn)證文本框中的內(nèi)容是否為空。required屬性適用于以下所示的<input>標(biāo)簽類(lèi)型：textsearchurltelephoneemailpassworddatepickersnumbercheckboxradiofile2表單元素中的屬性5.2.4驗(yàn)證文本框中的內(nèi)容是否為空在2表單元素中的屬性通過(guò)前面的學(xué)習(xí)我們已經(jīng)知道，“email”或“url”類(lèi)型的<input>元素在提交表單時(shí)只驗(yàn)證非空內(nèi)容。這時(shí)只要在驗(yàn)證元素中添加一個(gè)“required”屬性，就可以對(duì)其內(nèi)容是否為空自動(dòng)進(jìn)行驗(yàn)證，如果為空，則在表單提交數(shù)據(jù)時(shí)會(huì)顯示錯(cuò)誤提示信息。2表單元素中的屬性通過(guò)前面的學(xué)習(xí)我們已經(jīng)知道，“email”2表單元素中的屬性5.2.5開(kāi)啟表單的自動(dòng)完成功能在HTML5標(biāo)記語(yǔ)言中，使用autocomplete屬性可以設(shè)置form或input域開(kāi)啟自動(dòng)完成功能，該功能可隨著用戶(hù)鍵入顯示以前的匹配條目從而節(jié)約時(shí)間。autocomplet屬性不但適用于<form>標(biāo)簽，而且適應(yīng)于<input>標(biāo)簽中的以下類(lèi)型：textsearchurltelephoneemailpassworddatepickersrangecolor在某些瀏覽器中，可能還需要啟用自動(dòng)完成功能才能使該屬性生效。2表單元素中的屬性5.2.5開(kāi)啟表單的自動(dòng)完成功能在HT2表單元素中的屬性5.2.6重寫(xiě)表單中的某些屬性在HTML5標(biāo)記語(yǔ)言中，通過(guò)表單重寫(xiě)屬性（formoverrideattributes）可以重寫(xiě)form元素的某些屬性設(shè)定。HTML5中的表單重寫(xiě)屬性如下：formaction：重寫(xiě)表單的action屬性。formenctype：重寫(xiě)表單的enctype屬性。formmethod：重寫(xiě)表單的method屬性。formnovalidate：重寫(xiě)表單的novalidate屬性。formtarget：重寫(xiě)表單的target屬性。在HTML5應(yīng)用中，表單重寫(xiě)屬性適用于以下類(lèi)型的<input>標(biāo)簽：submitimage2表單元素中的屬性5.2.6重寫(xiě)表單中的某些屬性在HTM2表單元素中的屬性5.2.7自動(dòng)設(shè)置表單中傳遞數(shù)字在HTML5標(biāo)記語(yǔ)言中，使用屬性min、max和step可以為包含數(shù)字或日期的input類(lèi)型規(guī)定限定條件，這三個(gè)屬性的具體說(shuō)明如下：max：規(guī)定輸入域所允許的最大值。min：規(guī)定輸入域所允許的最小值。step：為輸入域設(shè)置合法的數(shù)字間隔，假如step="3"，則合法的數(shù)是-3、0、3、6等。在HTML5應(yīng)用中，屬性min、max和step適用于以下三個(gè)<input>標(biāo)簽類(lèi)型：datepickersnumberrange2表單元素中的屬性5.2.7自動(dòng)設(shè)置表單中傳遞數(shù)字在HT2表單元素中的屬性5.2.8在表單中選擇多個(gè)上傳文件在HTML5標(biāo)記語(yǔ)言中，使用multiple屬性可以設(shè)置在輸入域中選擇多個(gè)值。在HTML5應(yīng)用中，multiple屬性適用于以下兩種類(lèi)型的<input>標(biāo)簽：emailfile2表單元素中的屬性5.2.8在表單中選擇多個(gè)上傳文件在H3實(shí)例

5-1

驗(yàn)證輸入的是否是一個(gè)

U

R

L

地址在本實(shí)例中首先創(chuàng)建了一個(gè)“url”類(lèi)型的<input>元素，然后新建了一個(gè)表單“提交”按鈕。當(dāng)單擊“提交”按鈕時(shí)，會(huì)自動(dòng)檢測(cè)輸入框中的元素是否符合Web地址格式，如果不是合法的URL，則顯示錯(cuò)誤提示信息。實(shí)例文件的具體代碼如下所示。<linkhref="css.css"rel="stylesheet"type="text/css"></head><body><formid="frmTmp"><fieldset><legend>請(qǐng)?jiān)谙旅娴谋韱沃休斎胍粋€(gè)網(wǎng)址：</legend><inputname="txtUrl"type="url"class="inputtxt"/><inputname="frmSubmit"type="submit"class="inputbtn"value="提交"/></fieldset></form></body>3實(shí)例

5-1

驗(yàn)證輸入的是否是一個(gè)

U

R

L

地址在本3實(shí)例

5-1

驗(yàn)證輸入的是否是一個(gè)

U

R

L

地址在此需要說(shuō)明的是，不同瀏覽器對(duì)<input>元素的支持不同。在筆者目前的測(cè)試中Chrome瀏覽器和Opera瀏覽器必須輸入完整的URL地址路徑（包括“http://”），否則將提示格式出錯(cuò)信息，如下圖所示。執(zhí)行效果3實(shí)例

5-1

驗(yàn)證輸入的是否是一個(gè)

U

R

L

地址在此4實(shí)例5-2

驗(yàn)證輸入的數(shù)值是否合法在本實(shí)例文件中創(chuàng)建了三個(gè)表單，并分別創(chuàng)建了三個(gè)“number”類(lèi)型的<input>元素，分別用于輸入日期中“年”、“月”、“日”的數(shù)字。同時(shí)，新建一個(gè)表單的“提交”按鈕。單擊該按鈕時(shí)會(huì)檢測(cè)這三個(gè)輸入框中的數(shù)字是否屬于各自設(shè)置的整數(shù)范圍，如果不符合則顯示錯(cuò)誤提示信息。實(shí)例文件的具體代碼如下所示。<linkhref="css.css"rel="stylesheet"type="text/css"></head><body><formid="frmTmp"><fieldset><legend>請(qǐng)輸入你的生日（年-月-日格式）：</legend><inputname="txtYear"type="number"class="inputtxt"min="1960"max="1990"step="1"value="1990"/>年4實(shí)例5-2

驗(yàn)證輸入的數(shù)值是否合法在本實(shí)例文件中創(chuàng)建了三4實(shí)例5-2

驗(yàn)證輸入的數(shù)值是否合法<inputname="txtMonth"type="number"class="inputtxt"min="1"max="12"step="1"value="4"/>月<inputname="txtDay"type="number"class="inputtxt"min="1"max="31"step="1"value="23"/>日<inputname="frmSubmit"type="submit"class="inputbtn"value="提交"/></fieldset></form></body>4實(shí)例5-2

驗(yàn)證輸入的數(shù)值是否合法<inputnam4實(shí)例5-2

驗(yàn)證輸入的數(shù)值是否合法在上述代碼中，定義了三個(gè)“number”類(lèi)型的<input>元素輸入框，用于分別設(shè)置“mm”、“max”、“value”、“step”屬性值。其中“step”屬性值表示步長(zhǎng)值，默認(rèn)值為1，表示當(dāng)用戶(hù)點(diǎn)擊微調(diào)控件時(shí)，向上增加或向下減少的值。上述代碼的執(zhí)行效果如下圖所示。執(zhí)行效果4實(shí)例5-2

驗(yàn)證輸入的數(shù)值是否合法在上述代碼中，定義了三5實(shí)例5-3

實(shí)現(xiàn)一個(gè)簡(jiǎn)單的乘法計(jì)算器在HTML5標(biāo)記語(yǔ)言中，使用<output>元素可以實(shí)現(xiàn)不同類(lèi)型信息的輸出，例如計(jì)算或腳本輸出。在實(shí)際應(yīng)用中，<output>元素必須從屬于某個(gè)表單，或通過(guò)屬性指定某個(gè)表單。<output>元素的功能是在頁(yè)面中顯示各種不同類(lèi)型表單元素的內(nèi)容，例如輸入框的值、JavaScript代碼執(zhí)行后的結(jié)果值等。為了獲取這些值，需要設(shè)置<output>元素的“onFormlnput”事件。當(dāng)在表單輸入框中錄入內(nèi)容時(shí)，會(huì)觸發(fā)該事件，從而方便地實(shí)時(shí)偵察到表單中各元素的輸入內(nèi)容。下面我們?cè)O(shè)計(jì)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的乘法計(jì)算器，方法如下：（1）在新建表單中創(chuàng)建兩個(gè)輸入文本框，分別用于輸入兩個(gè)數(shù)字。（2）新建一個(gè)<output>元素，用于顯示兩個(gè)輸入文本框中數(shù)字相乘后的結(jié)果。（3）當(dāng)改變兩個(gè)輸入框中任意一個(gè)數(shù)值時(shí)，會(huì)自動(dòng)變化在<output>元素中顯示的計(jì)算結(jié)果。5實(shí)例5-3

實(shí)現(xiàn)一個(gè)簡(jiǎn)單的乘法計(jì)算器在HTML5標(biāo)記語(yǔ)言5實(shí)例5-3

實(shí)現(xiàn)一個(gè)簡(jiǎn)單的乘法計(jì)算器實(shí)例文件的具體代碼如下所示。<linkhref="css.css"rel="stylesheet"type="text/css"></head><body><formid="frmTmp"><fieldset><legend>請(qǐng)?jiān)谙旅孑斎雰蓚€(gè)數(shù)字</legend><inputid="txtNum_1"type="text"class="inputtxt"/>*<inputid="txtNum_2"type="text"class="inputtxt"/>=<outputonFormInput="value=txtNum_1.value*txtNum_2.value"></output></fieldset></form></body>5實(shí)例5-3

實(shí)現(xiàn)一個(gè)簡(jiǎn)單的乘法計(jì)算器實(shí)例文件的具體代碼如5實(shí)例5-3

實(shí)現(xiàn)一個(gè)簡(jiǎn)單的乘法計(jì)算器在上述代碼中，<output>元素的內(nèi)容通過(guò)“onFormlnput”事件綁定了兩個(gè)輸入文本框，因此，當(dāng)輸入框中的值發(fā)生變化時(shí)，<output>元素的內(nèi)容根據(jù)綁定的規(guī)則迅速響應(yīng)，這樣便實(shí)現(xiàn)了一種聯(lián)動(dòng)的效果。執(zhí)行效果如下圖所示。執(zhí)行效果提示：目前各大瀏覽器并非完全支持HTML5的特性，這里建議讀者使用OperaMobileEmulator進(jìn)行測(cè)試。它是一款PC上的Operamobile模擬器，簡(jiǎn)單來(lái)說(shuō)，它能在你的電腦上模擬各種手機(jī)、平板等設(shè)備去訪(fǎng)問(wèn)網(wǎng)站。免費(fèi)、使用方法簡(jiǎn)單，讀者可在其官方網(wǎng)站進(jìn)行下載，資料包中附有相應(yīng)安裝包。5實(shí)例5-3

實(shí)現(xiàn)一個(gè)簡(jiǎn)單的乘法計(jì)算器在上述代碼中，<ou6實(shí)例5-4

在網(wǎng)頁(yè)中生成一個(gè)密鑰在HTML5標(biāo)記語(yǔ)言中，新增元素<keygen>的功能是生成頁(yè)面的密鑰。<keygen>元素是一種密鑰對(duì)生成器（key-pairgenerator）技術(shù)，如果在表單中創(chuàng)建<keygen>元素，當(dāng)在表單提交時(shí)該元素將生成一對(duì)密鑰：一個(gè)保存在客戶(hù)端，稱(chēng)為私密鑰（PrivateKey）；另一個(gè)發(fā)送至服務(wù)器，由服務(wù)器進(jìn)行保存，稱(chēng)為公密鑰（PublicKey），公密鑰可以用于客戶(hù)端證書(shū)的驗(yàn)證。下面來(lái)講解在網(wǎng)頁(yè)中生成一個(gè)密鑰的方法，具體實(shí)現(xiàn)流程如下所示：（1）在表單中新建一個(gè)“name”值為“keyUserInfo”的<keygen>元素，通過(guò)此元素可以在頁(yè)面中創(chuàng)建一個(gè)選擇密鑰位數(shù)的下拉列表框。（2）當(dāng)選擇列表框中某選項(xiàng)值，并單擊表單中的“提交”按鈕時(shí)，可以將根據(jù)所選密鑰的位數(shù)生成對(duì)應(yīng)密鑰提交給服務(wù)器。6實(shí)例5-4

在網(wǎng)頁(yè)中生成一個(gè)密鑰在HTML5標(biāo)記語(yǔ)言中，6實(shí)例5-4

在網(wǎng)頁(yè)中生成一個(gè)密鑰實(shí)例文件的具體實(shí)現(xiàn)代碼如下所示：<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>使用keygen元素</title><linkhref="css.css"rel="stylesheet"type="text/css"></head><body>6實(shí)例5-4

在網(wǎng)頁(yè)中生成一個(gè)密鑰實(shí)例文件的具體實(shí)現(xiàn)代碼如6實(shí)例5-4

在網(wǎng)頁(yè)中生成一個(gè)密鑰<formid="frmTmp"><fieldset><legend>選擇密鑰位數(shù)</legend><keygenname="keyUserInfo"class="inputtxt"/><inputname="frmSubmit"type="submit"class="inputbtn"value="提交"/></fieldset></form></body></html>在上述代碼中，<keygen>元素在表單中以列表的形式展示提供密鑰位數(shù)的選擇。當(dāng)提交表單時(shí)，可以通過(guò)<keygen>元素在表單中的“name”值獲取該元素生成的對(duì)應(yīng)位數(shù)密鑰。執(zhí)行效果如右圖所示。執(zhí)行效果6實(shí)例5-4

在網(wǎng)頁(yè)中生成一個(gè)密鑰<formid="fr7綜合實(shí)例

制作一個(gè)顏色滑動(dòng)控制器5.7.1知識(shí)點(diǎn)——range類(lèi)型如果要在HTML5中輸入整數(shù)，除了使用前面介紹過(guò)的“number”類(lèi)型外，還可以使用“range”類(lèi)型。這兩種數(shù)字類(lèi)型的<input>元素基本屬性都一樣，唯一不同在于頁(yè)面中的展示形式?！皀umber”類(lèi)型在頁(yè)面中以輸入框形式添加了微調(diào)控件，而“range”類(lèi)型則以滑動(dòng)條的形式展示數(shù)字，通過(guò)拖動(dòng)滑塊實(shí)現(xiàn)數(shù)字的改變。range類(lèi)型支持的屬性如下表所示。

range類(lèi)型支持的屬性7綜合實(shí)例

制作一個(gè)顏色滑動(dòng)控制器5.7.1知識(shí)點(diǎn)——7綜合實(shí)例

制作一個(gè)顏色滑動(dòng)控制器5.7.2實(shí)現(xiàn)過(guò)程在接下來(lái)的內(nèi)容中，將通過(guò)一個(gè)具體的實(shí)例，來(lái)講解通過(guò)滑動(dòng)條設(shè)置顏色的方法。具體操作課參考書(shū)中步驟。

初始效果

通過(guò)滑動(dòng)條預(yù)覽顏色7綜合實(shí)例

制作一個(gè)顏色滑動(dòng)控制器5.7.2實(shí)現(xiàn)過(guò)程在目錄表單元素的類(lèi)型表單元素中的屬性實(shí)例5-4：在網(wǎng)頁(yè)中生成一個(gè)密鑰實(shí)例5-1：驗(yàn)證輸入的是否是一個(gè)URL地址實(shí)例5-2：驗(yàn)證輸入的數(shù)值是否合法實(shí)例5-3：實(shí)現(xiàn)一個(gè)簡(jiǎn)單的乘法計(jì)算器綜合實(shí)例：制作一個(gè)顏色滑動(dòng)控制器目錄表單元素的類(lèi)型表單元素中的屬性實(shí)例5-4：在網(wǎng)頁(yè)中生成一1表單元素的類(lèi)型HTML5提供了多個(gè)新的表單輸入類(lèi)型，這些新類(lèi)型為我們提供了更好的輸入控制和驗(yàn)證功能。在HTML5標(biāo)記語(yǔ)言中，包含了如下所示的輸入類(lèi)型。emailurlnumberrangeDatepickers（date，month，week，time，datetime，datetime-local）searchcolor1表單元素的類(lèi)型HTML5提供了多個(gè)新的表單輸入類(lèi)型，這些新1表單元素的類(lèi)型5.1.1email類(lèi)型在HTML5標(biāo)記語(yǔ)言中，email類(lèi)型用于包含Email地址的輸入域。如果將<input>元素中的“type”類(lèi)型設(shè)置為“email”，將在頁(yè)面中創(chuàng)建一個(gè)專(zhuān)門(mén)用于輸入郵件地址的文本輸入框。在顯示頁(yè)面時(shí)，這個(gè)文本框與其他文本框沒(méi)有區(qū)別，專(zhuān)門(mén)用于接收Email地址信息。當(dāng)提交表單時(shí)，會(huì)自動(dòng)檢測(cè)文本框中的內(nèi)容是否符合Email郵件地址格式，如果不符則提示相應(yīng)錯(cuò)誤信息。在現(xiàn)實(shí)應(yīng)用中，在提交表單之前不會(huì)檢測(cè)email類(lèi)型文本框的內(nèi)容是否為空，只有在不為空的情況下才會(huì)檢測(cè)其內(nèi)容是否符合標(biāo)準(zhǔn)的Email格式。如果將該元素的“multiple”屬性設(shè)置為“true”，則表示允許用戶(hù)輸入一串用逗號(hào)分隔的Email地址。在提交表單時(shí)，會(huì)自動(dòng)驗(yàn)證Email域中的值是否合法。1表單元素的類(lèi)型5.1.1email類(lèi)型在HTML5標(biāo)記1表單元素的類(lèi)型5.1.2url類(lèi)型在HTML5標(biāo)記語(yǔ)言中，url類(lèi)型用于包含URL地址的輸入域。在提交表單時(shí)，會(huì)自動(dòng)驗(yàn)證url域中的值。在輸入元素<input>中，“url”類(lèi)型是一種新增的類(lèi)型，該類(lèi)型表示<input>元素是一個(gè)專(zhuān)門(mén)用于輸入Web站點(diǎn)地址的輸入框。Web地址的格式與普通文本有些區(qū)別，例如文本中有反斜杠“/”和點(diǎn)“.”。為了確?！皍rl”類(lèi)型的輸入框能夠正確提交符合格式的內(nèi)容，表單在提交數(shù)據(jù)前會(huì)自動(dòng)驗(yàn)證其內(nèi)容格式的有效性。如果不符合對(duì)應(yīng)的格式，則會(huì)出現(xiàn)相應(yīng)的錯(cuò)誤提示信息。并且與“email”類(lèi)型一樣，url的有效性檢測(cè)并不會(huì)判斷輸入框的內(nèi)容是否為空，而是針對(duì)非空內(nèi)容進(jìn)行格式檢測(cè)。1表單元素的類(lèi)型5.1.2url類(lèi)型在HTML5標(biāo)記語(yǔ)言1表單元素的類(lèi)型5.1.3number類(lèi)型在HTML5標(biāo)記語(yǔ)言中，number類(lèi)型用于設(shè)置包含數(shù)值的輸入域，通過(guò)此類(lèi)型能夠設(shè)置對(duì)所接受的數(shù)字的限定。在網(wǎng)頁(yè)設(shè)計(jì)應(yīng)用中，可以使用下表所示的屬性來(lái)設(shè)置對(duì)數(shù)字類(lèi)型的限定。number類(lèi)型支持的屬性1表單元素的類(lèi)型5.1.3number類(lèi)型在HTML5標(biāo)1表單元素的類(lèi)型在HTML4及以前的版本中，如果想要在表單中輸入一個(gè)指定范圍的整數(shù)，需要在表單提交前使用代碼進(jìn)行數(shù)據(jù)檢測(cè)，以確定輸入框中是否是一個(gè)符合要求的整數(shù)。而在HTML5標(biāo)記語(yǔ)言中，只要?jiǎng)?chuàng)建一個(gè)“number”類(lèi)型的<input>元素便可以實(shí)現(xiàn)以上操作。該類(lèi)型的元素在HTML5中還將顯示一個(gè)微調(diào)控件。如果指定了最大與最小范圍值，就可以點(diǎn)擊微調(diào)控件的上限與下限按鈕，以指定的步長(zhǎng)（step）增加或減少輸入框中的值，極大方便了用戶(hù)的操作。在“number”類(lèi)型的輸入框中，不能輸入其他非數(shù)字型的字符，并且當(dāng)輸入的數(shù)字大于設(shè)定的最大值或小于設(shè)置的最小值時(shí)，都將出現(xiàn)數(shù)字輸入出錯(cuò)的提示信息。同樣道理，該類(lèi)型不進(jìn)行輸入內(nèi)容是否為空值的自動(dòng)檢測(cè)。1表單元素的類(lèi)型在HTML4及以前的版本中，如果想要在表單中1表單元素的類(lèi)型5.1.4DatePickers（數(shù)據(jù)檢出器）在HTML5標(biāo)記語(yǔ)言中，使用DatePickers（數(shù)據(jù)檢出器）可以為用戶(hù)提供日期和時(shí)間輸入框。DatePickers的意義是可以避免用打字的方式輸入日期和時(shí)間，能夠大大提高處理數(shù)據(jù)的效率。在HTML5中提供了多個(gè)可供選取日期和時(shí)間的新輸入類(lèi)型，具體說(shuō)明如下：date：選取日、月、年。month：選取月、年。week：選取周和年。time：選取時(shí)間（小時(shí)和分鐘）。datetime：選取時(shí)間、日、月、年（UTC時(shí)間）。datetime-local：選取時(shí)間、日、月、年（本地時(shí)間）。1表單元素的類(lèi)型5.1.4DatePickers（數(shù)據(jù)1表單元素的類(lèi)型在HTML4之前的版本中，沒(méi)有專(zhuān)門(mén)用于顯示日期的文本輸入框，開(kāi)發(fā)人員需要編寫(xiě)大量的JavaScript代碼或?qū)胂鄳?yīng)的插件。而在HTML5中，只需要將<input>元素的類(lèi)型設(shè)置為“date”，便可以創(chuàng)建一個(gè)日期輸入框。當(dāng)單擊該文本框時(shí)會(huì)彈出一個(gè)日歷選擇器，選擇日期并關(guān)閉這個(gè)框，會(huì)將所選擇的日期顯示在文本框中。1表單元素的類(lèi)型在HTML4之前的版本中，沒(méi)有專(zhuān)門(mén)用于顯示日2表單元素中的屬性除了本章中介紹的表單類(lèi)型外，在HTML5中還可以使用屬性來(lái)實(shí)現(xiàn)我們需要的顯示功能。HTML5新增的表單屬性如下：（1）新的form屬性autocompletenovalidate（2）新的input屬性autocompleteautofocusformformoverrides（formaction，formenctype，formmethod，formnovalidate，formtarget）2表單元素中的屬性除了本章中介紹的表單類(lèi)型外，在HTML5中2表單元素中的屬性height和widthlistmin、max和stepmultiplepattern（regexp）placeholderrequired下面我們具體介紹其中常用的一些。2表單元素中的屬性height和width下面我們具體介紹其2表單元素中的屬性5.2.1記住表單中的數(shù)據(jù)在HTML5的<input>元素中，屬性“autofocus”是一個(gè)布爾值。主要功能是當(dāng)加載頁(yè)面完成后，設(shè)置光標(biāo)是否自動(dòng)鎖定<input>元素，即是否使元素自動(dòng)獲取焦點(diǎn)。在<input>元素中，如果將該屬性的值設(shè)置為“true”或直接輸入“autofocus”屬性名稱(chēng)，那么對(duì)應(yīng)的元素將自動(dòng)獲取焦點(diǎn)。2表單元素中的屬性5.2.1記住表單中的數(shù)據(jù)在HTML52表單元素中的屬性5.2.2驗(yàn)證表單中輸入的數(shù)據(jù)是否合法在HTML5網(wǎng)頁(yè)中，可以通過(guò)“pattern”屬性驗(yàn)證在表單中輸入的數(shù)據(jù)是否合法。pattern屬性適用于以下類(lèi)型的<input>標(biāo)簽：textsearchurltelephoneemailpassword“email”和“url”等類(lèi)型的<input>元素都內(nèi)置了正則表達(dá)式，當(dāng)創(chuàng)建這些元素時(shí)，通過(guò)與內(nèi)容進(jìn)行匹配的方式進(jìn)行有效性驗(yàn)證。其實(shí)這些元素都使用了“pattern”屬性，只是內(nèi)置的而已。但是內(nèi)置驗(yàn)證的元素畢竟較少，并且如果要進(jìn)行組合式的驗(yàn)證，就需要使用“pattem”屬性。該屬性支持各種類(lèi)型的組合正則表達(dá)式，用來(lái)驗(yàn)證對(duì)應(yīng)文本輸入框中的內(nèi)容。2表單元素中的屬性5.2.2驗(yàn)證表單中輸入的數(shù)據(jù)是否合法2表單元素中的屬性5.2.3在文本框中顯示提示信息在HTML5標(biāo)記語(yǔ)言中，placeholder屬性能夠提供一種描述輸入域所期待值的提示。只要為某個(gè)元素設(shè)置“placeholder”屬性后，會(huì)在輸入域?yàn)榭諘r(shí)顯示提示，在輸入域獲得焦點(diǎn)時(shí)這個(gè)提示會(huì)消失。placeholder屬性適用于以下所示的<input>標(biāo)簽類(lèi)型：textsearchurltelephoneemailpassword2表單元素中的屬性5.2.3在文本框中顯示提示信息在HT2表單元素中的屬性5.2.4驗(yàn)證文本框中的內(nèi)容是否為空在HTML5標(biāo)記語(yǔ)言中，可以使用required屬性來(lái)驗(yàn)證文本框中的內(nèi)容是否為空。required屬性適用于以下所示的<input>標(biāo)簽類(lèi)型：textsearchurltelephoneemailpassworddatepickersnumbercheckboxradiofile2表單元素中的屬性5.2.4驗(yàn)證文本框中的內(nèi)容是否為空在2表單元素中的屬性通過(guò)前面的學(xué)習(xí)我們已經(jīng)知道，“email”或“url”類(lèi)型的<input>元素在提交表單時(shí)只驗(yàn)證非空內(nèi)容。這時(shí)只要在驗(yàn)證元素中添加一個(gè)“required”屬性，就可以對(duì)其內(nèi)容是否為空自動(dòng)進(jìn)行驗(yàn)證，如果為空，則在表單提交數(shù)據(jù)時(shí)會(huì)顯示錯(cuò)誤提示信息。2表單元素中的屬性通過(guò)前面的學(xué)習(xí)我們已經(jīng)知道，“email”2表單元素中的屬性5.2.5開(kāi)啟表單的自動(dòng)完成功能在HTML5標(biāo)記語(yǔ)言中，使用autocomplete屬性可以設(shè)置form或input域開(kāi)啟自動(dòng)完成功能，該功能可隨著用戶(hù)鍵入顯示以前的匹配條目從而節(jié)約時(shí)間。autocomplet屬性不但適用于<form>標(biāo)簽，而且適應(yīng)于<input>標(biāo)簽中的以下類(lèi)型：textsearchurltelephoneemailpassworddatepickersrangecolor在某些瀏覽器中，可能還需要啟用自動(dòng)完成功能才能使該屬性生效。2表單元素中的屬性5.2.5開(kāi)啟表單的自動(dòng)完成功能在HT2表單元素中的屬性5.2.6重寫(xiě)表單中的某些屬性在HTML5標(biāo)記語(yǔ)言中，通過(guò)表單重寫(xiě)屬性（formoverrideattributes）可以重寫(xiě)form元素的某些屬性設(shè)定。HTML5中的表單重寫(xiě)屬性如下：formaction：重寫(xiě)表單的action屬性。formenctype：重寫(xiě)表單的enctype屬性。formmethod：重寫(xiě)表單的method屬性。formnovalidate：重寫(xiě)表單的novalidate屬性。formtarget：重寫(xiě)表單的target屬性。在HTML5應(yīng)用中，表單重寫(xiě)屬性適用于以下類(lèi)型的<input>標(biāo)簽：submitimage2表單元素中的屬性5.2.6重寫(xiě)表單中的某些屬性在HTM2表單元素中的屬性5.2.7自動(dòng)設(shè)置表單中傳遞數(shù)字在HTML5標(biāo)記語(yǔ)言中，使用屬性min、max和step可以為包含數(shù)字或日期的input類(lèi)型規(guī)定限定條件，這三個(gè)屬性的具體說(shuō)明如下：max：規(guī)定輸入域所允許的最大值。min：規(guī)定輸入域所允許的最小值。step：為輸入域設(shè)置合法的數(shù)字間隔，假如step="3"，則合法的數(shù)是-3、0、3、6等。在HTML5應(yīng)用中，屬性min、max和step適用于以下三個(gè)<input>標(biāo)簽類(lèi)型：datepickersnumberrange2表單元素中的屬性5.2.7自動(dòng)設(shè)置表單中傳遞數(shù)字在HT2表單元素中的屬性5.2.8在表單中選擇多個(gè)上傳文件在HTML5標(biāo)記語(yǔ)言中，使用multiple屬性可以設(shè)置在輸入域中選擇多個(gè)值。在HTML5應(yīng)用中，multiple屬性適用于以下兩種類(lèi)型的<input>標(biāo)簽：emailfile2表單元素中的屬性5.2.8在表單中選擇多個(gè)上傳文件在H3實(shí)例

5-1

驗(yàn)證輸入的是否是一個(gè)

U

R

L

地址在本實(shí)例中首先創(chuàng)建了一個(gè)“url”類(lèi)型的<input>元素，然后新建了一個(gè)表單“提交”按鈕。當(dāng)單擊“提交”按鈕時(shí)，會(huì)自動(dòng)檢測(cè)輸入框中的元素是否符合Web地址格式，如果不是合法的URL，則顯示錯(cuò)誤提示信息。實(shí)例文件的具體代碼如下所示。<linkhref="css.css"rel="stylesheet"type="text/css"></head><body><formid="frmTmp"><fieldset><legend>請(qǐng)?jiān)谙旅娴谋韱沃休斎胍粋€(gè)網(wǎng)址：</legend><inputname="txtUrl"type="url"class="inputtxt"/><inputname="frmSubmit"type="submit"class="inputbtn"value="提交"/></fieldset></form></body>3實(shí)例

5-1

驗(yàn)證輸入的是否是一個(gè)

U

R

L

地址在本3實(shí)例

5-1

驗(yàn)證輸入的是否是一個(gè)

U

R

L

地址在此需要說(shuō)明的是，不同瀏覽器對(duì)<input>元素的支持不同。在筆者目前的測(cè)試中Chrome瀏覽器和Opera瀏覽器必須輸入完整的URL地址路徑（包括“http://”），否則將提示格式出錯(cuò)信息，如下圖所示。執(zhí)行效果3實(shí)例

5-1

驗(yàn)證輸入的是否是一個(gè)

U

R

L

地址在此4實(shí)例5-2

驗(yàn)證輸入的數(shù)值是否合法在本實(shí)例文件中創(chuàng)建了三個(gè)表單，并分別創(chuàng)建了三個(gè)“number”類(lèi)型的<input>元素，分別用于輸入日期中“年”、“月”、“日”的數(shù)字。同時(shí)，新建一個(gè)表單的“提交”按鈕。單擊該按鈕時(shí)會(huì)檢測(cè)這三個(gè)輸入框中的數(shù)字是否屬于各自設(shè)置的整數(shù)范圍，如果不符合則顯示錯(cuò)誤提示信息。實(shí)例文件的具體代碼如下所示。<linkhref="css.css"rel="stylesheet"type="text/css"></head><body><formid="frmTmp"><fieldset><legend>請(qǐng)輸入你的生日（年-月-日格式）：</legend><inputname="txtYear"type="number"class="inputtxt"min="1960"max="1990"step="1"value="1990"/>年4實(shí)例5-2

驗(yàn)證輸入的數(shù)值是否合法在本實(shí)例文件中創(chuàng)建了三4實(shí)例5-2

驗(yàn)證輸入的數(shù)值是否合法<inputname="txtMonth"type="number"class="inputtxt"min="1"max="12"step="1"value="4"/>月<inputname="txtDay"type="number"class="inputtxt"min="1"max="31"step="1"value="23"/>日<inputname="frmSubmit"type="submit"class="inputbtn"value="提交"/></fieldset></form></body>4實(shí)例5-2

驗(yàn)證輸入的數(shù)值是否合法<inputnam4實(shí)例5-2

驗(yàn)證輸入的數(shù)值是否合法在上述代碼中，定義了三個(gè)“number”類(lèi)型的<input>元素輸入框，用于分別設(shè)置“mm”、“max”、“value”、“step”屬性值。其中“step”屬性值表示步長(zhǎng)值，默認(rèn)值為1，表示當(dāng)用戶(hù)點(diǎn)擊微調(diào)控件時(shí)，向上增加或向下減少的值。上述代碼的執(zhí)行效果如下圖所示。執(zhí)行效果4實(shí)例5-2

驗(yàn)證輸入的數(shù)值是否合法在上述代碼中，定義了三5實(shí)例5-3

實(shí)現(xiàn)一個(gè)簡(jiǎn)單的乘法計(jì)算器在HTML5標(biāo)記語(yǔ)言中，使用<output>元素可以實(shí)現(xiàn)不同類(lèi)型信息的輸出，例如計(jì)算或腳本輸出。在實(shí)際應(yīng)用中，<output>元素必須從屬于某個(gè)表單，或通過(guò)屬性指定某個(gè)表單。<output>元素的功能是在頁(yè)面中顯示各種不同類(lèi)型表單元素的內(nèi)容，例如輸入框的值、JavaScript代碼執(zhí)行后的結(jié)果值等。為了獲取這些值，需要設(shè)置<output>元素的“onFormlnput”事件。當(dāng)在表單輸入框中錄入內(nèi)容時(shí)，會(huì)觸發(fā)該事件，從而方便地實(shí)時(shí)偵察到表單中各元素的輸入內(nèi)容。下面我們?cè)O(shè)計(jì)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的乘法計(jì)算器，方法如下：（1）在新建表單中創(chuàng)建兩個(gè)輸入文本框，分別用于輸入兩個(gè)數(shù)字。（2）新建一個(gè)<output>元素，用于顯示兩個(gè)輸入文本框中數(shù)字相乘后的結(jié)果。（3）當(dāng)改變兩個(gè)輸入框中任意一個(gè)數(shù)值時(shí)，會(huì)自動(dòng)變化在<output>元素中顯示的計(jì)算結(jié)果。5實(shí)例5-3

實(shí)現(xiàn)一個(gè)簡(jiǎn)單的乘法計(jì)算器在HTML5標(biāo)記語(yǔ)言5實(shí)例5-3

實(shí)現(xiàn)一個(gè)簡(jiǎn)單的乘法計(jì)算器實(shí)例文件的具體代碼如下所示。<linkhref="css.css"rel="stylesheet"type="text/css"></head><body><formid="frmTmp"><fieldset><legend>請(qǐng)?jiān)谙旅孑斎雰蓚€(gè)數(shù)字</legend><inputid="txtNum_1"type="text"class="inputtxt"/>*<inputid="txtNum_2"type="text"class="inputtxt"/>=<outputonFormInput="value=txtNum_1.value*txtNum_2.value"></output></fieldset></form></body>