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
step
<form> / <input> autocomplete 屬性
#autocomplete 屬性規定form 或input 網域應該擁有自動完成功能。
當使用者在自動完成網域中開始輸入時，瀏覽器應該會在該網域中顯示填寫的選項。
提示: autocomplete 屬性有可能在 form元素中是開啟的，而在input元素中是關閉的。
注意: autocomplete 適用於 <form> 標籤，以及以下類型的 <input> 標籤：text, search, url, telephone, email, password, datepickers, range 以及 color。
實例
<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 屬性規定在提交表單時不應該驗證form 或input 網域。
無需驗證提交的表單資料
<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 屬性規定在頁面載入時，網域會自動取得焦點。
實例
讓"First name" input 輸入域在頁面載入時自動對焦：
First name:<input type="text" name ="fname" autofocus>
<input> form 屬性
#form 屬性規定輸入域所屬的一個或多個表單。
提示:如需引用一個以上的表單，請使用空格分隔的清單。
實例
位於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" 搭配使用。 ###實例###第一個提交按鈕已預設編碼發送表單數據，第二個提交按鈕以"multipart/form-data" 編碼格式發送表單資料:############ ###<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:
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 屬性指定一個名稱或一個關鍵字來指明表單提交資料接收後的展示。
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 屬性規定用於image 類型的<input> ; 標籤的圖像高度和寬度。 注意: height 和 width 屬性只適用於 image 類型的<input> 標籤。 提示:影像通常會同時指定高度和寬度屬性。如果圖像設定高度和寬度，圖像所需的空間 在載入頁時會被保留。如果沒有這些屬性， 瀏覽器不知道圖像的大小，並不能預留 適當的空間。圖片在載入過程中會使頁面佈局效果改變 （儘管圖片已載入）。
實例
定義了一個圖像提交按鈕, 使用了height 和width 屬性:
list 屬性規定輸入域的datalist。 datalist 是輸入域的選項清單。 OperaSafariChromeFirefoxInternet Explorer實例
在<datalist>中預先定義<input> 值:
<datalist id="browsers"> ## <option value="Internet Explorer"> # <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> #</datalist> min、max和step 屬性用於為包含數字或日期的input 類型規定限定（約束）。 注意: min、max 和 step 屬性適用於下列類型的 <input> 標籤：date pickers、number 以及 range。 實例 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): multiple 屬性是一個boolean 屬性.multiple 屬性規定<input> 元素中可選擇多個值。 Country code: <input type= "text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"> ##<input> placeholder 屬性placeholder 屬性提供一個提示（hint），描述輸入域所期待的值。 簡短的提示在使用者輸入值前會顯示在輸入域上。 實例 required 屬性是一個boolean 屬性.required 屬性規定必須在提交之前填寫輸入域（不能為空）。 注意:required 屬性適用於下列類型的 <input> 標籤：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。 實例 也可以用 for 屬性指定輸出元素和文件中影響計算的其他元素之間的關係（例如，作為輸入來源或參數）。 for 屬性的值是一個由空格分隔的其他元素的 IDs 清單。 placeholder 屬性 <input type="text" name="search" placeholder="search the web"/> #這個屬性只有最新版的Mozilla，Safari 以及Chrome 瀏覽器支援。 required 屬性 <input type="text" name="search" required/> 這個屬性只有最新版的Mozilla，Safari 以及Chrome 瀏覽器支援。 實例1： #實例2：##
<input type="number" name="quantity" min="1" max="5">
< ;input> multiple 屬性
<input> pattern 屬性
#pattern 屬性描述了一個正規表示式用來驗證 <input> 元素的值。
注意:pattern 屬性適用於以下類型的<input> 標籤: text, search, url, tel, email, 和password.
提示： 是用來全域title 屬性描述了模式.
實例
下面的範例顯示了一個只能包含三個字母的文字領域（不含數字及特殊字元）：
input 欄位提示文字t:##<input type="text" name="fname" placeholder="First name">
<input> required 屬性
Username: <input type="text" name="usrname" required>
HTML5 引入了一個稱為 palceholder 的新屬性。這個屬性在 <input> 和 <textarea> 元素上為使用者提供了在這個欄位可以輸入什麼的提示。佔位符字元不能包含回車符或換行符。
以下是placeholder 屬性的簡單語法：
現在，我們不需要使用JavaScript 處理諸如空白文字方塊永遠不能被提交的這類客戶端驗證了，因為 HTML5 引入了一個叫做required 的新屬性，可以如下使用，它會保證輸入框有值：<!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表单之内，但它也是form表单的一部分。</p>
Last name: <input type="text" name="lname" form="form1">
<p><b>注意:</b> IE不支持form属性</p>
</body>
</html>
<!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>
