整理HTML5中表單的常用屬性及新屬性_html5教學技巧

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">
1. "on">   First name:input type type type type type text"
2.  name="fname">br>     Last name: input type=" text"
3.  name="lname">br>     E-mail: input type type "email" name
=
4. "email"  >="off">br>br
>
5. br> >   
input

 

type
 
type

 

type

＜ 🎜>

>  

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

1. form action=action=action="demo-form."
 novalidate
2. >     E-mail: input type type "email" 
name
3. ="user_email"> >   input type
 
4. type type＜ 🎜>>  

form
>

  

autofocus 屬性

autofocus 屬性是一個 boolean 屬性.

autofocus 屬性規定在頁面載入時，域會自動地取得焦點。
1. 實例讓 "First name" input 輸入域在頁面載入時自動對焦： XML/HTML Code複製內容到剪貼簿 First name:input type="text" 
name

=

"fname"
"fname"

  






form 屬性

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

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

實例

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

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

元素中的action屬性.注意: The formaction 屬性用於type="submit" 和type="image" .實例以下HTMLform表單包含了兩個不同位址的提交按鈕： XML/HTML Code複製內容到剪貼簿

1. 表單 操作="demo-form.php “ >  
2.   名字： 輸入 類型= "文本" 名稱="fname">>>
  
3.   姓氏： 輸入 類型" " 名稱="lname">>>  
4.   輸入 類型=類型= 🎜> 值=「提交」>>
5. >>     輸入 類型=
類型
6. = 🎜> formaction="demo-admin.php"  
7.   值=「以管理者身分提交」>

>

🎜 >



表格

>

  

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

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

表格

>

  





formmethod 屬性

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

formmethod 屬性覆寫了

; 元素的方法屬性。 注意：此屬性可以與 type="submit" 和 type="image" 配合使用。 實例重新定義表單提交方式實例：

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

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

  

formnovalidate 屬性

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

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

實例

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

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

1. 表單 操作="demo-form.php “ >  
2.   電子郵件： 輸入 類型=“電子郵件” 姓名=「用戶ID」>>br
3. >     輸入 類型=類型= 🎜> 值=「提交」>
4. >>>     輸入 類型
=
5. 類型= 🎜> formnovalidate 值=
「未經驗證即可提交」

>

「未經驗證即可提交」

>

表格

>  

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

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

>

  





高度和寬度屬性

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

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

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

XML/HTML 程式碼
1. 將內容複製到剪貼簿 輸入 型=類型= src="img_submit.gif"   「提交」 寬度=「48」  >="48"

>

  

list 屬性

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

OperaSafariChromeFirefoxInternet Explorer實例在

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

1. 輸入 列表="瀏覽器" >  
2.   
3. 資料清單 id=id=id
”
4. >     選項 值=
值
5. >     選項 值
=
6. 值= 🎜>>     選項 
值
7. =值= 🎜>>     選項
 
8. 值=值==值==“歌劇” 🎜>>  
9.   選項 值=

值

=

🎜>>
  

資料清單>

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

1. input> 元素最小值與最大值設定:    元素最小值與最大值設定:   
3. Enter a date before 1980-01-01:    input type="date" name="bday"  >"1979-12-31">  
4.   
5. Enter a date after 2000-01-01:   
6. input type="date" name="bday" min >"2000-01-02">  
  
Quantity (between 1 and 5):   
9. input type name="quantity" min min "1" max="5">"5">
🎜>

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

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

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

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

XML/HTML Code

複製內容到剪貼簿

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

=

title=title>  

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

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

1. input type=type=type name="fname" place place
"First name"

>

  






required 屬性

required 屬性是一個 boolean 屬性.

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

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

"usrname"

 require>

  

step 屬性

step 屬性為輸入域規定合法的數字間隔。
1. 如果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 的新屬性。這個屬性在 和 元素上為使用者提供了在這個欄位可以輸入什麼的提示。佔位符字元不能包含回車符或換行符。 以下是 placeholder 屬性的簡單語法： XML/HTML Code複製內容到剪貼簿<div id="code_1536"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><span class="tag-name">input</span><span> </span><span class="attribute">type</span><span>=</span><span class="attribute-value">type</span><span>=</span><span class="attribute">type</span><text> </text></span><span class="attribute-value">name</span><span>=</span><span class="attribute">"search"</span><span> </span><span class="attribute-value">placeholder</span><span class="tag"> </span><span>placeholder</span></span></li>"search the web"</ol> </div>/>

  

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

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

1. XML/HTML Code複製內容到剪貼簿 input type=type=type name
=

"search"

 required

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