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