整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
html開(kāi)發(fā)中，表單是頁(yè)面上重要的內(nèi)容，用戶輸入內(nèi)容大部分內(nèi)容都是通過(guò)表單收集的，在html4中表單元素是相對(duì)繁瑣的，在html5中，吸納了web forms2.0標(biāo)準(zhǔn)，大大加強(qiáng)了針對(duì)表單元素的功能。下面為大家介紹html5中新增的表單元素。
form元素
在html4中表單內(nèi)的從屬元素必須寫(xiě)在表單內(nèi)部，在html5中沒(méi)有這個(gè)限制，可以寫(xiě)在頁(yè)面任何地方，然后給該元素一個(gè)from屬性，屬性值為該表單的id，這樣就可以聲明該元素從屬于指定的表單了。示例代碼：<form id="test"><input type="text"></form><textarea form="test"></textarea>textarea屬性被寫(xiě)在form表單之外，但它從屬于form表單，所以將form表單id指定給textarea元素的form屬性。這樣的好處在于我們可以方便添加元素的樣式，因?yàn)樗鼈儾皇欠稚⒃诟鞅韱沃畠?nèi)。不過(guò)現(xiàn)在只是部分瀏覽器支持這一屬性。
formaction屬性
在html4中，一個(gè)表單所有的元素只能通過(guò)表單的action屬性統(tǒng)一提交另一頁(yè)面，而在HTML5中可以給所有的提交按鈕（<input type="submit">、<input type="image">、<button type="submit">），都增加了不同的formaction屬性，點(diǎn)擊不同的按鈕提交給不同的頁(yè)面。
placeholder屬性
placeholder是指當(dāng)文本框（<input type="text">或<textarea>）處于未輸入狀態(tài)時(shí)文本框顯示的輸入提示。只要加上了placeholder屬性，在指定提示文字就可以了。
autofocus屬性
給文本框、選擇框或按鈕加上該屬性，當(dāng)畫(huà)面打開(kāi)時(shí)，控件自動(dòng)獲得焦點(diǎn)。在html4中做到這個(gè)效果需要使用JavaScript如“control.focus()”。不建議隨意使用該屬性，比如搜索頁(yè)面中的搜索文本框。
list屬性
在html5中，為單行文本框增加了一個(gè)list屬性，該屬性的值為某個(gè)datelist元素的id。datelist也是html5新增的元素，該元素類似選擇框（select）。但是當(dāng)用戶想要設(shè)定的值不在選擇列表時(shí)，允許自行輸入。該元素本身并不顯示，而是文本框獲得焦點(diǎn)時(shí)提示輸入的方式顯示。為了避免在沒(méi)有支持元素的瀏覽器顯示錯(cuò)誤，可以用css將它設(shè)置為不顯示。
autocomplete屬性
輔助輸入所有的自動(dòng)完成功能，節(jié)省輸入時(shí)間，同時(shí)也十分方便。可以指定“on”、“off”、“不指定”這三種值，不指定時(shí)，取決各個(gè)瀏覽器。屬性為on時(shí)，可以顯示指定候補(bǔ)輸入的數(shù)據(jù)列表，off反之。
如果有漏掉其他方法，歡迎大家補(bǔ)充。每天學(xué)習(xí)一個(gè)知識(shí)點(diǎn)，每日寄語(yǔ)“失敗只有一種，那就是半途而廢。”
、封裝獲取元素的方法
封裝思想——函數(shù)封裝——代碼復(fù)用
function get_id(id){
// 這個(gè)函數(shù)是專門(mén)來(lái)通過(guò)id獲取元素
return document.getElementById(id)
}
function get_els(parentId, tagName){
// 這個(gè)函數(shù)是專門(mén)來(lái)獲取某個(gè)父標(biāo)簽范圍內(nèi)的某些標(biāo)簽
return get_id(parentId).getElementsByTagName(tagName)
}二、表單元素屬性
常用的表單元素包括 input、select、textarea、button等，下面我們學(xué)習(xí)這些表單元素中常用的屬性。
需求：點(diǎn)擊按鈕修改input的類型和內(nèi)容
html和css代碼
<input type="button" value="按鈕" id="btn">JavaScript代碼
TML 5對(duì)表單新增了很多功能和屬性，可以更加方便地進(jìn)行表單開(kāi)發(fā)，form屬性代碼如下：
所以在HTML 5中定義了表單的從屬關(guān)系，而不再完全依賴form的位置。在下面的代碼中，輸入框txtPhone是屬于表單myForm的，因此可以提交輸入框內(nèi)容。在之前的HTML中這種寫(xiě)法是不能提交txtPhone輸入框的內(nèi)容的。 placeholder屬性一般用于文本輸入框上，其主要作用是當(dāng)文本框處于未輸入的狀態(tài)并且內(nèi)容為空時(shí)，顯示一段提示文本內(nèi)容。
<input type="text" id="txtUserName" class="form-control" placeholder="請(qǐng)輸入用戶名"/>
這個(gè)屬性達(dá)到的效果是我們常見(jiàn)的水印效果，如圖所示。
autofocus屬性的作用是指定控件自動(dòng)活動(dòng)的焦點(diǎn)，一個(gè)頁(yè)面中只能有一個(gè)控件具有該屬性。
HTML 5允許單行文本框中使用list屬性，配合datalist元素一起使用。list主要用于提示文本框輸入，datalist用于提供數(shù)據(jù)源，目前支持該特性的瀏覽器較少。
Autocomplete屬性用于完成自動(dòng)輸入的功能，有兩個(gè)值；on和off，分別代表自動(dòng)完成輸入和禁止自動(dòng)完成輸入。很多瀏覽器不支持該屬性，但是自動(dòng)完成插件是筆者平時(shí)使用較多的。
Required屬性是用作必填屬性，如果使用到了這個(gè)屬性則當(dāng)表單中的元素為空時(shí)無(wú)法提交，此屬性作用于輸入框元素上。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
