HTML5 新的表單屬性

HTML5 的<form> 和<input>標籤新增了幾個新屬性.

##<form>新屬性： ??autocomplete ? ??novalidate

autocomplete ? ??novalidate

<input>新屬性：

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget##height and width
list
min and max
multiple
pattern (regexp)
placeholder

required

step

<form> / <input> autocomplete 屬性

#autocomplete 屬性規(guī)定form 或input 網(wǎng)域應(yīng)該擁有自動完成功能。
當使用者在自動完成網(wǎng)域中開始輸入時，瀏覽器應(yīng)該會在該網(wǎng)域中顯示填寫的選項。
提示: autocomplete 屬性有可能在 form元素中是開啟的，而在input元素中是關(guān)閉的。
注意: autocomplete 適用於 <form> 標籤，以及以下類型的 <input> 標籤：text, search, url, telephone, email, password, datepickers, range 以及 color。
實例

HTML form 中開啟autocomplete (一個input 欄位關(guān)閉autocomplete ):

<form?action="demo-form.php"?autocomplete=" on"> ?

??First?name:<input?type="text"?name="fname"><br>??

??Last?name:?<input?type="text"?name="lname"><br>??

??E-mail:?<input?type="email""

#??E-mail:?<input?type="email" ="email"?autocomplete="off"><br>??

??<input?type="submit">??

< ;/form>??

<form> novalidate 屬性

novalidate 屬性的一個boolean 屬性.
novalidate 屬性規(guī)定在提交表單時不應(yīng)該驗證form 或input 網(wǎng)域。

實例

無需驗證提交的表單資料

<form?action="demo-form.php"?novalidate> ?

#??E-mail:?<input?type="email"?name="user_email">??

??<input?type="submit?

??<input?type="submit?"> ##########</form>??#######

<input> autofocus 屬性
autofocus 屬性是一個boolean 屬性.
autofocus 屬性規(guī)定在頁面載入時，網(wǎng)域會自動取得焦點。
實例
讓"First name" input 輸入域在頁面載入時自動對焦：

First?name:<input?type="text"?name ="fname"?autofocus> ?

<input> form 屬性
#form 屬性規(guī)定輸入域所屬的一個或多個表單。
提示:如需引用一個以上的表單，請使用空格分隔的清單。
實例
位於form表單外的input 欄位引用了HTML form (該input 表單仍屬於form表單的一部分):

<input> formaction 屬性
The formaction 屬性用於描述表單提交的URL位址.
The formaction 屬性會覆寫<form> 元素中的action屬性.
注意: The formaction 屬性用於type=" submit" 和type="image".
實例
以下HTMLform表單包含了兩個不同位址的提交按鈕：

<form?action=" demo-form.php"> ?

??First?name:?<input?type="text"?name="fname"><br>??

##??Last?name:?<input?type="text"?name="lname"><br>??

#??<input?type="submit"?value

#??<input?type="submit"?value

#??="Submit"><br>??

#??<input?type="submit"?formaction="demo-admin.php"??

#??value="Submit?as?admin">??

</form>??

#<input> formenctype

<input> formenctype

############<input> formenctype###############<input> formenctype###############<input> formenctype###############<input> formenc類型屬性#########formenctype 屬性描述了表單提交到伺服器的資料編碼(只對form表單中method="post" 表單)###formenctype 屬性覆寫form 元素的enctype 屬性。 ###主要: 此屬性與 type="submit" 和 type="image" 搭配使用。 ###實例###第一個提交按鈕已預(yù)設(shè)編碼發(fā)送表單數(shù)據(jù)，第二個提交按鈕以"multipart/form-data" 編碼格式發(fā)送表單資料:############ ###<form?action="demo-post_enctype.php"?method="post"> ?#########

??First?name:?<input?type="text"?name="fname"><br>??

#??<input?type="submit"?value

#??<input?type="submit"?value

#??<input?type="submit"?value "Submit">??

#??<input?type="submit"?formenctype="multipart/form-data"??

??value="Submit"??

??value="Submit as?Multipart/form-data">??#</form>??

#<input> formmethod 屬性

formmethod 屬性定義了表單提交的方式。 formmethod 屬性覆寫了 <form> 元素的的method 屬性。注意: 此屬性可以與 type="submit" 和 type="image" 配合使用。 實例

重新定義表單提交方式實例:

<form?action="demo-form.php"?method="get"> ?

??First?name:?<input?type="text"?name="fname"><br>??

??Last?name:??

??Last?name: <input?type="text"?name="lname"><br>??

??<input?type="submit"?value="Submit">??

]

##??<input?type="submit"?formmethod="post"?formaction="demo-post.php"??

??value="Submit?using?POST">

??value="Submit?using?POST"> ;??

</form>??

<input> formnovalidate 屬性novalidate 屬性是一個boolean 屬性.

novalidate屬性描述了<input> 元素在表單提交時無需被驗證。 ###formnovalidate 屬性會覆寫<form> 元素的novalidate屬性.###注意: formnovalidate 屬性與type="submit一起使用###實例###兩個提交按鈕的表單(使用與不適用驗證) :###############<form?action="demo-form.php"> ?###############??E-mail:?< ;input?type="email"?name="userid"><br>??###########??<input?type="submit"?value="Submit"><?###########??<input?type="submit"?formnovalidate?value="Submit?without?validation">??#######

</form>??

#<input> formtarget 屬性
formtarget 屬性指定一個名稱或一個關(guān)鍵字來指明表單提交資料接收後的展示。
The formtarget 屬性覆寫<form>元素的target屬性.
注意: formtarget 屬性與type="submit" 和type="image"配合使用.
實例
兩個提交按鈕的表單, 在不同視窗中顯示:

<form?action="demo-form.php"> ?

#??First?name:?<input?type="text"?name="fname"><br>??

??Last?name:?< lname"><br>??

??<input?type="submit"?value="Submit?as?normal">??#?;input?type="submit"?formtarget="_blank"??

#??value="Submit?to?a?new?window">??

#<///; form>??

<input> height 和width 屬性
height 和width 屬性規(guī)定用於image 類型的<input> ; 標籤的圖像高度和寬度。 注意: height 和 width 屬性只適用於 image 類型的<input> 標籤。提示:影像通常會同時指定高度和寬度屬性。如果圖像設(shè)定高度和寬度，圖像所需的空間在載入頁時會被保留。如果沒有這些屬性，瀏覽器不知道圖像的大小，並不能預(yù)留適當?shù)目臻g。圖片在載入過程中會使頁面佈局效果改變（儘管圖片已載入）。
實例
定義了一個圖像提交按鈕, 使用了height 和width 屬性:

<input?type="image"?src="img_submit.gif "?alt="Submit"?width="48"?height="48"> ?

<input> list 屬性

list 屬性規(guī)定輸入域的datalist。 datalist 是輸入域的選項清單。 OperaSafariChromeFirefoxInternet Explorer實例
在<datalist>中預(yù)先定義<input> 值:

<input?list="browsers">list="browsers"> ; ?

??<datalist?id="browsers"> ?

##??<option?value="Internet?Explorer"> #??<option?value="Firefox">??

??<option?value="Chrome">??

??<option?value="Opera">??

??<option?value="Safari">??

#</datalist>

<input> min 和max 屬性
min、max和step 屬性用於為包含數(shù)字或日期的input 類型規(guī)定限定（約束）。 注意: min、max 和 step 屬性適用於下列類型的 <input> 標籤：date pickers、number 以及 range。實例

<input>?元素最小值與最大值設(shè)定: ??
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">??

< ;input> multiple 屬性
multiple 屬性是一個boolean 屬性.multiple 屬性規(guī)定<input> 元素中可選擇多個值。
注意: multiple 屬性適用於下列類型的 <input> 標籤：email 和 file。 : email, and file.###實例###上傳多個檔案:#########Select?images:?<input?type="file"?name="img"?multiple>??##### #

<input> pattern 屬性
#pattern 屬性描述了一個正規(guī)表示式用來驗證 <input> 元素的值。
注意:pattern 屬性適用於以下類型的<input> 標籤: text, search, url, tel, email, 和password.
提示：是用來全域title 屬性描述了模式.
實例
下面的範例顯示了一個只能包含三個字母的文字領(lǐng)域（不含數(shù)字及特殊字元）：
Country?code:?<input?type= "text"?name="country_code"?pattern="[A-Za-z]{3}"?title="Three?letter?country?code"> ?

##<input> placeholder 屬性placeholder 屬性提供一個提示（hint），描述輸入域所期待的值。 簡短的提示在使用者輸入值前會顯示在輸入域上。
注意: placeholder 屬性適用於下列類型的 <input> 標籤：text, search, url, telephone, email 以及 password。
實例
input 欄位提示文字t:##<input?type="text"?name="fname"?placeholder="First?name"> ?

<input> required 屬性
required 屬性是一個boolean 屬性.required 屬性規(guī)定必須在提交之前填寫輸入域（不能為空）。注意:required 屬性適用於下列類型的 <input> 標籤：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。實例
不能為空的input欄位:

Username:?<input?type="text"?name="usrname"?required> ?
############<input> step 屬性#########step 屬性為輸入域規(guī)定合法的數(shù)字間隔。 ###如果step="3"，則合法的數(shù)是-3,0,3,6 等###提示： step 屬性可以與max 和min 屬性建立一個區(qū)域值.###注意: step 屬性與以下type類型一起使用: number, range, date, datetime, datetime-local, month, time 和week.###實例###規(guī)定input step步長為3:############ ####<input?type="number"?name="points"?step="3"> ?#####################<output> 元素#########HTML5?也引入了一個新元素<output>，用來表示不同類型的輸出結(jié)果，例如輸出由腳本所寫。 ###
也可以用 for 屬性指定輸出元素和文件中影響計算的其他元素之間的關(guān)係（例如，作為輸入來源或參數(shù)）。 for 屬性的值是一個由空格分隔的其他元素的 IDs 清單。
placeholder 屬性
HTML5?引入了一個稱為 palceholder 的新屬性。這個屬性在 <input> 和 <textarea> 元素上為使用者提供了在這個欄位可以輸入什麼的提示。佔位符字元不能包含回車符或換行符。
以下是placeholder 屬性的簡單語法：
<input?type="text"?name="search"?placeholder="search?the?web"/> ?
#這個屬性只有最新版的Mozilla，Safari 以及Chrome 瀏覽器支援。
required 屬性
現(xiàn)在，我們不需要使用JavaScript 處理諸如空白文字方塊永遠不能被提交的這類客戶端驗證了，因為?HTML5?引入了一個叫做required 的新屬性，可以如下使用，它會保證輸入框有值：
<input?type="text"?name="search"?required/> ?
這個屬性只有最新版的Mozilla，Safari 以及Chrome 瀏覽器支援。
實例1：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <form action="demo-form.php" id="form1"> First name: <input type="text" name="fname"><br> <input type="submit" value="提交"> </form> <p> "Last name" 字段沒有在form表單之內(nèi)，但它也是form表單的一部分。</p> Last name: <input type="text" name="lname" form="form1"> <p><b>注意:</b> IE不支持form屬性</p> </body> </html>
#實例2：##
<!doctype html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <form action="" method="get"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form> <p><strong>注意:</strong> Internet Explorer 9（更早IE版本），Safari不支持 datalist 標簽。</p> </body> </html>

繼續(xù)學(xué)習(xí)

||

新建檔案

<!doctype html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <form action=""> 輸入 1970-01-01 之前的日期: <input type="date" name="bday" max="1969-12-31"><br> 輸入 2010-12-31 之后的日期: <input type="date" name="bday" min="2011-01-01"><br> 數(shù)量 (在1和9之間): <input type="number" name="quantity" min="1" max="9"><br> <input type="submit"> </form> </body> </html>

提交重置程式碼
自動運行