<input type="reset">

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

型別為 reset 的 <input> 元素會渲染成按鈕，預設的 click 事件處理器會將表單中的所有輸入重置為其初始值。

試一試

<form>
  <div class="controls">
    <label for="id">User ID:</label>
    <input type="text" id="id" name="id" />

    <input type="reset" value="Reset" />
    <input type="submit" value="Submit" />
  </div>
</form>

.controls {
  padding-top: 1rem;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: 1fr 2fr;
  gap: 0.7rem;
}

label {
  font-size: 0.8rem;
  justify-self: end;
}

input[type="reset"],
input[type="submit"] {
  width: 5rem;
  justify-self: end;
}

input[type="reset"] {
  grid-column: 2;
  grid-row: 2;
}

input[type="submit"] {
  grid-column: 2;
  grid-row: 3;
}

注意：通常應避免在表單中包含重置按鈕。它們很少有用，反而更容易使使用者不小心點選（通常是在試圖點選提交按鈕時）而感到沮喪。

值

<input type="reset"> 元素的 value 屬性包含一個字串，該字串用作按鈕的標籤，為按鈕提供可訪問的描述。除了這個，像 reset 這樣的按鈕沒有其他值。

設定 value 屬性

html

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

省略 value 屬性

如果未指定 value，則會得到一個帶有預設標籤的按鈕（通常是“Reset”，但這取決於使用者代理）。

html

<input type="reset" />

使用重置按鈕

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

一個基本的重置按鈕

我們將從建立一個基本的重置按鈕開始。

html

<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>

渲染效果如下：

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

新增重置鍵盤快捷鍵

要為重置按鈕新增鍵盤快捷鍵（就像為任何適合的 <input> 新增一樣），請使用 accesskey 全域性屬性。

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

html

<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>

上述示例的問題在於，使用者無法知道訪問鍵是什麼！這尤其如此，因為修飾鍵通常是非標準的，以避免衝突。構建網站時，請確保以不干擾網站設計的方式提供此資訊（例如，透過提供一個易於訪問的連結，該連結指向有關網站訪問鍵的資訊）。向按鈕新增工具提示（使用 title 屬性）也有幫助，儘管這對於可訪問性目的來說不是一個完整的解決方案。

停用和啟用重置按鈕

要停用重置按鈕，請在其上指定 disabled 屬性，如下所示：

html

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

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

注意：有關啟用和停用按鈕的更多想法，請參閱 <input type="button"> 頁面。

值	用作按鈕標籤的字串
事件	`click`
支援的常見屬性	`type` 和 `value`
IDL 屬性	`value`
DOM 介面	`HTMLInputElement`
方法	None
隱式 ARIA 角色	`button`