HTML 中文開發手冊

input type="reset" (Elements) - HTML 中文開發手冊

<input>型別的元素"reset"被渲染為重置按鈕 - 單擊一個將重置所有輸入的形式，它是其初始值的一部分。

<input type="reset" value="Reset the form">

注意：通常不建議在表單中包含重置按鈕。它們很少有用，而且當意外按下而不是主動按下提交按鈕時往往會使使用者沮喪。

值

一個<input type="reset">元素的value屬性包含DOMString一個用作按鈕的標籤。

<input type="reset" value="Reset the form">

如果你不指定一個value，你會得到一個預設標籤Reset的按鈕：

<input type="reset">

使用重置按鈕

<input type="reset">按鈕用於重置表單。如果你想建立一個自定義的按鈕，然後使用JavaScript自定義行為，則需要使用<input type="button">或更好的<button>元素。

一個簡單的重置按鈕

我們將開始建立一個簡單的重置按鈕：

<form> 
  <div>
    <label for="example">Type in some sample text</label>
    <input id="example" type="text">
  </div>
  <div>
    <input type="reset" value="Reset the form">
  </div>
</form>

這呈現如下：

嘗試在文字欄位中輸入一些文字，然後按下重置按鈕。

新增重置鍵盤快捷鍵

鍵盤快捷鍵可讓使用者使用鍵盤上的鍵或鍵組合來觸發按鈕。要將鍵盤快捷鍵新增到重置按鈕可以使用accesskey全域性屬性。

在這個例子中，r被指定為訪問鍵（您需要按r加上您的瀏覽器/作業系統組合的特定修飾鍵;請參閱accesskey這些鍵的有用列表）。

<form>
  <div>
    <label for="example">Type in some sample text</label>
    <input id="example" type="text">
  </div>
  <div>
    <input type="reset" value="Reset the form"
     accesskey="r">
  </div>
</form>

注意：以上例子的問題當然是使用者不知道訪問金鑰是什麼！在真實網站中，您必須以不干擾網站設計的方式提供此資訊（例如，通過提供易於訪問的連結指向有關網站訪問鍵的資訊）。

禁用並啟用重置按鈕

要禁用重置按鈕，只需disabled在其上指定全域性屬性，如下所示：

<input type="reset" value="Disabled" disabled>

您可以在執行時通過設定disabled為true或來啟用和禁用按鈕false; 在JavaScript中，這看起來像btn.disabled = true。

注意：請參閱<input type="button">頁面以獲取有關啟用/禁用按鈕的更多資訊。

注：Firefox將不像其他的瀏覽器，預設情況下，堅持動態禁用狀態一的<button>整個頁面載入。使用該autocomplete屬性來控制此功能。

驗證

按鈕不參與約束驗證; 他們沒有真正的價值被約束。

示例

我們已經包含上面的簡單例子。關於重置按鈕沒有什麼可說的。

規範

瀏覽器相容性

  HTML 中文開發手冊