HTML5 新的表單屬性
HTML5 的 <form> 和 <input>標籤都添加了一些新屬性。
一、<form>新屬性:
1、autocomplete:屬性規定 form 域應該擁有自動完成功能(詳情看文章 關於form和input的autocomplete屬性)
2、novalidate;屬性描述了 <input> 元素在表單提交時無需被驗證。
注意:在 Safari 和 Internet Explorer 9 及之前的版本中不支援 novalidate 屬性。
二、<input>新屬性:
2、autofocus:屬性規定在頁面載入時,域自動地獲得焦點。
注意: Internet Explorer 9及更早 IE 版本不支援 input 標籤的 autofocus 屬性。
3、form:form 屬性規定輸入域所屬的一個或多個表單。
<form action="demo-form.php" id="form1"> First name: <input type="text" name="fname"><br> <input type="submit" value="提交"> </form> Last name: <input type="text" name="lname"
雖然Last name不在表單form1內,但也屬於表單form1的一部分
注意: IE 不支援 form 屬性
4、formaction:屬性用於描述表單提交的URL地址,並且他會覆蓋form中的action。
注意1:The formaction 屬性用於 type="submit" 和 type="image".
注意2: Internet Explorer 9及更早 IE 版本不支援 input 標籤的 formaction 屬性。
5、formenctype:屬性描述了表單提交到伺服器的資料編碼 (只對form表單中 method="post" 表單)
注意1:該屬性與 type="submit" 和 type="image" 配合使用。
注意2: Internet Explorer 9及更早 IE 版本不支援 input 標籤的 formenctype 屬性。
6、formmethod:屬性定義了表單提交的方式。該屬性會覆蓋form中的method。
<input type="submit" formmethod="post" formaction="demo-post.php"
注意1: 該屬性可以與 type="submit" 和 type="image" 配合使用。
注意2: Internet Explorer 9及更早 IE 版本不支援 input 標籤的 formmethod 屬性。
7、formnovalidate:是一個 boolean 屬性.,該屬性描述了 <input> 元素在表單提交時無需被驗證。並且它會覆蓋 <form> 元素的novalidate屬性。
注意1: formnovalidate 屬性與type="submit一起使用
注意2: Internet Explorer 9及更早 IE 版本,或 Safari 不支援 input 標籤的 formnovalidate 屬性。
8、formtarget:指定一個名稱或一個關鍵字來指明表單提交資料接收後的展示。,該屬性覆蓋form中的target屬性。
屬性值:_blank,_self,_parent_top framname,
注意1: formtarget 屬性與type="submit" 和 type="image"配合使用.
注意2: Internet Explorer 9及更早 IE 版本不支援 input 標籤的 formtarget 屬性。
9、height 與 width:於 image 型別的 <input> 標籤的影象高度和寬度。
提示:影象通常會同時指定高度和寬度屬性。如果影象設定高度和寬度,影象所需的空間 在載入頁時會被保留。如果沒有這些屬性, 瀏覽器不知道影象的大小,並不能預留 適當的空間。圖片在載入過程中會使頁面佈局效果改變 (儘管圖片已載入)。
10、list:規定輸入域的 datalist。datalist 是輸入域的選項列表。
注意1:list值為datalist元素的id。
注意2: Internet Explorer 9(更早 IE 版本),Safari 不支援 datalist 標籤。
11、min、max與 step:於為包含數字或日期的 input 型別規定限定(約束)。
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
注意1: Internet Explorer 9及更早 IE 版本,Firefox 不支援 input 標籤的 max 和 min 屬性。
注意2: 在 Internet Explorer 10中 max 和 min 屬性不支援輸入日期和時間,IE 10 不支援這些輸入型別。
12、multiple:是一個 boolean 屬性。規定<input> 元素中可選擇多個值。
可用於選擇多個檔案:
注意1: multiple 屬性適用於以下型別的 <input> 標籤:email 和 file。
注意2: Internet Explorer 9及更早 IE 版本不支援 input 標籤的 multiple 屬性。
13、pattern (regexp):描述了一個正則表示式用於驗證 <input> 元素的值。
注意1:pattern 屬性適用於以下型別的 <input> 標籤: text, search, url, tel, email, 和 password。
注意2: Internet Explorer 9及更早 IE 版本,或 Safari 不支援 input 標籤的 pattern 屬性。
14、placeholder:提供一種提示(hint),描述輸入域所期待的值。
簡短的提示在使用者輸入值前會顯示在輸入域上。
注意1: placeholder 屬性適用於以下型別的 <input> 標籤:text, search, url, telephone, email 以及 password。
注意2: Internet Explorer 9及更早 IE 版本不支援 input 標籤的 placeholder 屬性。
15、required:是一個 boolean 屬性.
required 屬性規定必須在提交之前填寫輸入域(不能為空)。
注意1:required 屬性適用於以下型別的 <input> 標籤:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
注意2: Internet Explorer 9及更早 IE 版本,或 Safari 不支援 input 標籤的 required 屬性。