通過代碼示例跟我學(xué)html5相關(guān)技術(shù)——html5中的表單標(biāo)簽及新特性第2部分(編輯修改稿)
2024-12-20 07:40 本頁面
【文章內(nèi)容簡介】 option value=ht option value=htm option value=html option value=html5 option value=html5 實(shí)例 option value=html5 教程 option value=html5 開發(fā) option value=html5 標(biāo)簽 /datalistbr / input type=submit value=提交 /form 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 9/20 頁 9 body /body /html （ 4）示例的執(zhí)行結(jié)果 （ 5）進(jìn)一步完善該示例 一般應(yīng)用 style=display:none。的 CSS 風(fēng)格設(shè)置，將 datalist標(biāo)簽 元素設(shè)定為在默認(rèn)狀態(tài)下不顯示，只有匹配后才顯示出對應(yīng)的匹配文字。 !doctype html html head meta charset=utf8 titleHTML5 中自動(dòng)補(bǔ)全的列表項(xiàng)目標(biāo)簽 /title /head form 輸入文字： input type=text name=inputText list=useableTextList datalist id=useableTextList style=display: none。 option value=匹配輸入的提交的文字 1匹配輸入的顯示文字 1/option option value=匹配輸入的提交的文字 2匹配輸入的顯示文字 2/option option value=匹配輸入的提交的文字 3匹配輸入的顯示文字 3/option /datalist input type=submit value=提交 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 10/20 頁 10 /form body /body /html 對于本示例，可以再配合 AJAX 技術(shù)動(dòng)態(tài)地獲得從服務(wù)器端返回的各個(gè)匹配的結(jié)果，并放入 datalist標(biāo)簽中。 （ 6）注意正確地設(shè)置匹配的文字串 如果在 option/option之間定義有“匹配輸入”內(nèi)容項(xiàng)目，則以它為優(yōu)先；而如果在option/option之間沒有定義有“匹配輸入”內(nèi)容項(xiàng)目，則以 option value= 中的 value屬性值為匹配輸入項(xiàng)目。 !doctype html html head meta charset=utf8 titleHTML5 中自動(dòng)補(bǔ)全的列表項(xiàng)目標(biāo)簽 /title /head form 輸入文字： input type=text name=inputText list=useableTextList datalist id=useableTextList style=display: none。 option value=匹配輸入的提交的文字 1/option option value=匹配輸入的提交的文字 2/option option value=匹配輸入的提交的文字 3/option /datalist input type=submit value=提交 /form body /body 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 11/20 頁 11 /html max、 min 和 step 屬性 （ 1）主要的功能 它們主要是限制所輸入值的輸入范圍以及值的輸入漸進(jìn)程度，比如可在 number 設(shè)定輸入最大值、最小值或者在 range 中設(shè)定拖動(dòng)階梯。 （ 2）應(yīng)用示例 input type=range step=20 min=1 max=100 下面為示例表單和在 IE10 中顯示的效果圖，其中所顯示的 43 為當(dāng)前的選擇值： form 年齡： input type=range step=1 min=1 max=100 name=userAge input type=submit value=提交 /form （ 3）也設(shè)置日期和時(shí)間的最小和最大范圍 “ min、 max 和 step”屬性也可以用于設(shè)置日期或時(shí)間值的允許范圍，但由于 HTML5 中與日期和時(shí)間相關(guān)的輸入類型只接受標(biāo)準(zhǔn)格式的值。 input type=date name=date id=date min=20200101 max=20201231 step=10 由于 step 的值設(shè)置為 10，這樣可以進(jìn)一步將日期的選擇限制為每 10 天 一次。 在 Safari和 Chrome 中，點(diǎn)擊 up 箭頭可以插入明天的日期（或在超過范圍的情形下插入上限）。 點(diǎn)擊 down 箭頭可以插入 10 天之前的日期。 如果你持續(xù)的點(diǎn)擊，則日期將以 10 天為步長增加，直到你到達(dá)范圍的末端。 在 Opera 中，日歷顯示的日期的遞增步長為 10 天，起算日為明天的日期，并且用粗體和高亮的方式表示。 你可以使用日歷的導(dǎo)航鍵移動(dòng)到指定范圍內(nèi)的不同月份或年份，但只有高亮的日期才能選中。 （ 4） step 的值只影響最小單位 對于 date 屬性，步長增量是以天數(shù)計(jì)算的。但不能將 date 設(shè)置為一個(gè) 月遞增一次。 （ 5）與時(shí)間 time 相關(guān)的輸入元素一起使用 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 12/20 頁 12 如果為 step 指定一個(gè)值后，將迫使該字段顯示秒以及小時(shí)和分鐘。 （ 6） step 屬性也能夠被設(shè)置為對大小寫不敏感的關(guān)鍵字 any 在 Safari 和 Chrome 中，在一個(gè) time 輸入元素中使用 step=any將會(huì)把當(dāng)前時(shí)間設(shè)置為最接近的毫秒值。 label for=time時(shí)間 :/label input type=time name=time id=timebr / label for=time10Step=10:/label input type=time name=time10 id=time10 step=10br / label for=anyStep=any:/label input type=time name=any id=any step=any 第一
環(huán)評公示相關(guān)推薦
鄂ICP備17016276號-1