整理HTML5中表單的常用屬性及新屬性_html5教學技巧-H5教程-PHP中文網

HTML5 新的表單屬性
HTML5 的

新屬性：
autocomplete
novalidate
新屬性：
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidatelist
min and max
multiple
pattern (regexp)
placeholder
required
step

/ autocomplete 屬性

autocomplete 屬性規定 form 或 input 域應該要有自動完成功能。當使用者在自動完成網域中開始輸入時，瀏覽器應該會在該網域中顯示填寫的選項。
提示: autocomplete 屬性有可能在 form元素中是開啟的，而在input元素中是關閉的。注意: autocomplete 適用於

標籤，以及以下類型的標籤：text, search, url, telephone, email, password, datepickers, range 以及 color。
實例
HTML form 中開啟 autocomplete (一個 input 欄位關閉 autocomplete ):

XML/HTML Code

複製內容到剪貼簿

form action=action=action="demo-form." autocomplete="on"

"on"> First name:input type type type type type text"
name="fname">br> Last name: input type=" text"
name="lname">br> E-mail: input type type "email" name
"email" >="off">br>br
br> >

type

type

type

＜ 🎜>

form> novalidate 屬性novalidate 屬性的一個boolean 屬性.novalidate 屬性規定在提交表單時不應該驗證 form 或 input 域。實例無須驗證提交的表單資料 XML/HTML Code複製內容到剪貼簿

form action=action=action="demo-form."
> E-mail: input type type "email"
="user_email"> > input type
type type＜ 🎜>>

form
>

autofocus 屬性

autofocus 屬性是一個 boolean 屬性.

實例讓 "First name" input 輸入域在頁面載入時自動對焦： XML/HTML Code複製內容到剪貼簿 First name:input type="text"

"fname"
"fname"

form 屬性

form 屬性規定輸入域所屬的一個或多個表單。

提示:如需引用一個以上的表單，請使用空格分隔的清單。

實例

位於form表單外的input 字段引用了HTML form (該input 表單仍然屬於form表單的一部分): formaction 屬性

The formaction 屬性用於描述表單提交的URL位址.The formaction 屬性會覆寫

🎜 >

表格

>

formenctype 屬性formenctype 屬性描述了表單提交到伺服器的資料編碼（只對form表單中method="post" 表單）formenctype 屬性覆寫表單元素的enctype 屬性。主要: 此屬性與 type="submit" 和 type="image" 搭配使用。實例第一個提交按鈕已預設編碼發送表單數據，第二個提交按鈕以 "multipart/form-data" 編碼格式發送表單數據： XML/HTML 程式碼將內容複製到剪貼簿

表單操作="demo-post_enctype.php " 方法="貼文"> 🎜>>
名字：輸入類型= "文本" 名稱="fname">>>
輸入類型=類型= 🎜> 值=「提交」
🎜>> 輸入類型=類型= 🎜> formenctype
="多重部分/表單資料" 值
「提交給多部分/表單資料」> >

表格

formmethod 屬性

formmethod 屬性定義了表單提交的方式。

formmethod 屬性覆寫了

XML/HTML 程式碼將內容複製到剪貼簿

表單操作="demo-form.php " 方法="取得"> 🎜>>
名字：輸入類型= "文本" 名稱="fname">>>
姓氏：輸入類型" " 名稱="lname">>>
輸入類型=類型= 🎜> 值=「提交」>
🎜>> 輸入類型=類型= 🎜> 表單方法="貼文" 「demo-post.php」
值=「使用 POST 提交」>
> 表格

formnovalidate 屬性

novalidate 屬性是一個布林屬性。
novalidate 屬性描述了 ; 表單提交時的元素被驗證。
formnovalidate 屬性會覆寫

; 元素的 novalidate 屬性。注意： formnovalidate 屬性與 type="submit 一起使用

實例

兩個提交按鈕的表單（使用與不適用驗證）：

XML/HTML 程式碼將內容複製到剪貼簿

表單操作="demo-form.php “ >
電子郵件：輸入類型=“電子郵件” 姓名=「用戶ID」>>br
> 輸入類型=類型= 🎜> 值=「提交」>
>>> 輸入類型
類型= 🎜> formnovalidate 值=

「未經驗證即可提交」

表格

formtarget 屬性formtarget 屬性指定一個名稱或一個關鍵字來指示表單提交資料接收後的顯示。 formtarget 屬性覆蓋元素的target屬性。 : formtarget 屬性與type="submit" 和 type="image" 搭配使用。實例兩個提交按鈕的表單，在不同視窗中顯示： XML/HTML 程式碼將內容複製到剪貼簿

表單操作="demo-form.php “ >
名字：輸入類型= "文本" 名稱="fname">>>
姓氏：輸入類型" " 名稱="lname">>>
輸入類型=類型= 🎜> 值=「正常提交」>
輸入類型=類型= 🎜> formtarget="_blank"
值=「提交到新視窗」
> >

高度和寬度屬性

高度和寬度屬性規定圖像類型的；

注意：高度和寬度屬性僅適用於圖像類型的標籤。

提示：通常影像會同時指定高度和寬度屬性。如果圖像設定了高度和寬度，圖像所需的空間在載入頁面時會被保留。如果沒有這些屬性，瀏覽器不知道圖像的大小，並不能預留合適的空間。圖片在載入過程中使頁面佈局效果改變（儘管圖片已載入）。實例定義了一個圖片提交按鈕，使用了高度和寬度屬性：

將內容複製到剪貼簿輸入型=類型= src="img_submit.gif" 「提交」寬度=「48」 >="48"

list 屬性

list 屬性規定輸入域的 datalist。 datalist 是輸入域的選項清單。

OperaSafariChromeFirefoxInternet Explorer實例在中預先定義值：

XML/HTML 程式碼將內容複製到剪貼簿

輸入列表="瀏覽器" >
資料清單 id=id=id
> 選項值=
> 選項值
值= 🎜>> 選項
=值= 🎜>> 選項
值=值==值==“歌劇” 🎜>>
選項值=

值

🎜>>

資料清單>

min 和 max 屬性min、max 和 step 屬性用於為包含數字或日期的輸入類型規定限定（約束）。注意：min、max 和 step 屬性適用於以下類型的輸入> 標籤：日期選擇器、數字以及範圍。實例 XML/HTML 程式碼將內容複製到剪貼簿

input> 元素最小值與最大值設定: 元素最小值與最大值設定:
Enter a date before 1980-01-01: input type="date" name="bday" >"1979-12-31">
Enter a date after 2000-01-01:
input type="date" name="bday" min >"2000-01-02">
input type name="quantity" min min "1" max="5">"5">

multiple 屬性
multiple 屬性是一個 boolean 屬性.
multiple 屬性規定元素中可選擇多個值。
注意: multiple 屬性適用於下列類型的標籤：email 和 file。 : email, and file.
實例
上傳多個檔案:

XML/HTML Code複製內容到剪貼簿

Select images: input type="file" name="img" >

pattern 屬性
pattern 屬性描述了一個正規表示式用於驗證元素的值。
注意:pattern 屬性適用於以下類型的標籤: text, search, url, tel, email, 和password.提示：是用來全域title 屬性描述了模式.
實例
下面的範例顯示了一個只能包含三個字母的文字域（不含數字及特殊字元）：

XML/HTML Code

複製內容到剪貼簿

Country code: input type="text" name="country_code" "country_code" >="[A-Za-z]{3}" title=title=title=

title=title>

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

XML/HTML Code複製內容到剪貼簿

input type=type=type name="fname" place place

required 屬性

required 屬性是一個 boolean 屬性.

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

XML/HTML Code複製內容到剪貼簿 Username: input type="text" name="usrname"

"usrname"

require>

step 屬性

如果step="3"，則合法的數是-3,0,3,6 等提示： step 屬性可以與max 和min 屬性建立一個區域值.注意: step 屬性與以下type類型一起使用: number, range, date, datetime, datetime-local, month, time 和week.實例規定input step步長為3: XML/HTML Code複製內容到剪貼簿 input type=type=type=

"number"

🎜>

name
=
"points"

step
=
"3"

元素HTML5 也引入了一個新元素，用來表示不同類型的輸出結果，例如輸出由腳本所寫。也可以用 for 屬性指定輸出元素和文件中影響計算的其他元素之間的關係（例如，作為輸入來源或參數）。 for 屬性的值是一個由空格分隔的其他元素的 IDs 清單。 placeholder 屬性HTML5 引入了一個稱為 palceholder 的新屬性。這個屬性在和

這個屬性只有最新版的 Mozilla，Safari 以及 Chrome 瀏覽器支援。

required 屬性現在，我們不需要使用JavaScript 處理諸如空文本框永遠不能被提交的這類客戶端驗證了，因為HTML5 引入了一個叫做required 的新屬性，可以如下使用，它會保證輸入框有值：