1. 程式人生 > >HTML5 新的表單屬性

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"

 form="form1">

雖然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> 元素中可選擇多個值。

可用於選擇多個檔案:

file

注意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 屬性。