From 43a5cac2eff22c21071800e13bef12af9d3a37d0 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 13:12:08 +0100 Subject: unslug zh-tw: move --- .../learn/html/forms/html5_updates/index.html | 83 ++++++++++++++++++++++ 1 file changed, 83 insertions(+) create mode 100644 files/zh-tw/orphaned/learn/html/forms/html5_updates/index.html (limited to 'files/zh-tw/orphaned/learn/html') diff --git a/files/zh-tw/orphaned/learn/html/forms/html5_updates/index.html b/files/zh-tw/orphaned/learn/html/forms/html5_updates/index.html new file mode 100644 index 0000000000..6d83f5efea --- /dev/null +++ b/files/zh-tw/orphaned/learn/html/forms/html5_updates/index.html @@ -0,0 +1,83 @@ +--- +title: Forms in HTML +slug: Web/HTML/Forms_in_HTML +translation_of: Learn/HTML/Forms/HTML5_updates +--- +
+ {{gecko_minversion_header("2")}}
+

摘要

+

HTML5的Form元素及其屬性比HTML4提供更大程度的語意標記，也移除了原本許多在HTML4所需要的繁瑣程式碼腳本與樣式控制。HTML5的Form元素讓表單在跨網頁上有更好的一致性，也提供即時的使用者輸入回饋，因為這些特色，HTML5的Form元素在使用者體驗上有更好的表現，甚至，這些體驗依然適用在瀏覽器關閉程式碼腳本執行的情況下。

+

本文旨在討論Gecko/Firefox, version 4或更新版本在新的或變更後的Form元素特色上的支援。

+

<input>元素

+

<input>元素的type屬性新增了一些屬性值。

+ +

<input>元素同時也新增了一些屬性:

+ +

<form>元素

+

{{HTMLElement("form")}} 元素新增了一些屬性

+ +

 <datalist>元素

+

{{HTMLElement("datalist")}}元素是{{HTMLElement("option")}}元素的列表，{{HTMLElement("option")}}元素會用於提示輸入建議。

+

可以利用{{HTMLElement("input")}}的{{htmlattrxref("list", "input")}}屬性來連結{{HTMLElement("input")}}元素與{{HTMLElement("datalist")}}

+

<output>元素

+

{{HTMLElement("output")}}元素代表運算結果。

+

可以利用{{htmlattrxref("for", "output")}}屬性來設定{{HTMLElement("output")}}元素和其他影響計算結果的元素(如input或參數)的關係，{{htmlattrxref("for", "output")}}屬性的值為一串以空白分隔的元素ID。

+

{{non-standard_inline}} Gecko2.0(不一定適用其他瀏覽器引擎)支援自定義{{HTMLElement("output")}}元素的驗證條件和錯誤訊息，所以提供了其{{Cssxref(":invalid")}}, {{Cssxref(":valid")}}, {{Cssxref(":-moz-ui-invalid")}}和 {{Cssxref(":-moz-ui-valid")}}的CSS pseudo-class，在以下狀況這個特色將很有用，例如沒有輸入值有問題，但計算結果違反了商業規則(好比說總百分比不可超過100)。

+

placeholder屬性

+

{{HTMLElement("input")}}元素和{{HTMLElement("textarea")}}元素的{{htmlattrxref("placeholder", "input")}}屬性會在輸入欄位上顯示輸入提示，這個屬性的值不可以含有回車或換行符號。

+

autofocus屬性

+

{{htmlattrxref("autofocus", "input")}}屬性指示除非使用者另有指定(例如在其他控制項上進行輸入操作)，否則當載入網頁時表單控制項要自動聚焦於特定元素上；autofocus屬性值為布林值(Boolean)，一份文件只能有一份表單設定autofocus屬性。能夠設定這個屬性的元素有{{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}與{{HTMLElement("textarea")}}，不過當{{htmlattrxref("type", "input")}}屬性為隱藏(hidden)下，autofocus是無效的，也就是說，不能自動聚焦於隱藏元素上。

+

label.control DOM屬性

+

HTMLLabelElement DOM介面提供了{{HTMLElement("label")}}元素一個新的control屬性，control屬性會回傳被標記的控制項，這個控制項便是該label適用的控制項，也就是<label>元素{{htmlattrxref("for", "label")}}屬性指定的元素(如果有的話)或是第一個後代控制項元素。

+

約束驗證

+

HTML5提供了客戶端表單驗證的語法和API，基於安全性與資料正確性，雖然這並不能取代伺服器端驗證，但是客戶端驗證可以提拱使用者更好的立即輸入回饋體驗。

+

當{{HTMLElement("input")}}元素設定了title屬性，其值會作為提示框之內容，若是驗證失敗，提示框的內容會換成相關的錯誤訊息，我們可以利用非標準的{{htmlattrxref("x-moz-errormessage")}}屬性或setCustomValidity()方法來自定義錯誤訊息。

+
<input type="email" title="Please, provide an e-mail" x-moz-errormessage="This is not a valid e-mail">
+
+ Note: 約束驗證不支援表單的{{HTMLElement("button")}}元素，若是想根據表單驗證果來設定按鈕樣式，可以利用{{cssxref(":-moz-submit-invalid")}} pseudo-class。
+

約束驗證的HTML語法

+

下列是HTML5用來約束表單資料的語法

+ +

另外，我們可以在{{HTMLElement("form")}}元素上設定{{htmlattrxref("novalidate", "form")}}屬性或是在{{HTMLElement("button")}}元素以及{{htmlattrxref("type", "input")}}為submit或image的{{HTMLElement("input")}}元素上設定{{htmlattrxref("formnovalidate", "button")}}屬性來避免輸入約束驗證。這些屬性都會指示表單送出時不要進行驗證。

+

約束驗證API

+

下列是客戶端驗證可用的DOM屬性和方法:

+ +

See also

+ -- cgit v1.2.3-54-g00ecf