HTML5表單新標籤與form屬性

HTML5表單新屬性 (2011.11.05 新增)

元素在HTML5中增加了2個新的屬性。目前瀏覽器的支援如下:

Attribute IE Firefox Opera Chrome Safari
autocomplete 8.0 3.5 9.5 3.0 4.0
novalidate No 4.0 11.0 10.0 No

表格出自於W3Schools

  • autocomplete=”off | on”:是否提供自動完成(自動填入表單內容)的功能。表示在該form下面的所有input欄位都套用此屬性。
  • novalidate=“novalidate”:不驗證表單。表示在該form下面的所有input欄位在提交時都不驗證其內容。

HTML5表單新標籤

除了新加入的Input type與form屬性外,HTML5提供也了3個新的表單標籤,不過一樣有瀏覽器支援的問題:

Input type IE Firefox Opera Chrome Safari
No 4.0 9.5 No No
No 4.0 10.5 3.0 No
No 4.0 9.5 10.0 5.1

表格出自於W3Schools

元素標籤

datalist(預設清單)、output(輸出結果)、keygen(加密金鑰)

關連文章:通用HTML(8)-【表單篇】

datalist

說明:替Input欄位設定一些特殊選項。類似搜尋時自動產生的關聯清單。必須與InputOption標籤一起使用。

屬性:

  • id=“物件ID”:指定物件所屬ID,在同一個頁面中ID不能重覆。

【範例】

Search: 
<datalist id="search_list">
    <option label="程式設計" value="摩刻部落" />
    <option value="w3schools" />
    <option label="HTML5" />
</datalist>

【結果】

Search:

keygen

說明:送出表單時產生一對金鑰。私人金鑰存在client端,公開金鑰送至server。未來可用於驗證身份。

屬性:

  • autofocus=“autofocus”:在網頁載入時,自動獲得focus。
  • challenge:。
  • disabled=“disabled”:禁用物件。使物件無法被選擇。
  • form=“表單ID”:指定歸屬的表單ID。
  • id=“物件ID”:指定物件所屬ID,在同一個頁面中ID不能重覆。
  • keytype=”rsa | dsa | ec”:指定金鑰的演算法。
  • name=“名稱”:資料欄位名稱,建議與ID相同。

【範例】


【結果】

output

說明:利用JavaScript輸出計算值。

屬性:

  • class=“類別”:指定物件類別。
  • for=“元素ID”:指定與計算結果相關的元素ID。
  • form=“表單ID”:指定輸出的表單ID。目前沒有任何瀏覽器支援。
  • id=“物件ID”:指定物件所屬ID,在同一個頁面中ID不能重覆。
  • name=“名稱”:資料欄位名稱,建議與ID相同。
  • style=“樣式”:設定顯示樣式。

【範例】


【結果】