普通文組 2.5

「重設表單（form reset）」相關筆記

總結

HTML 本身即支援兩種重設表單全部內容的方法：

  • Form reset()：作用在表單物件上（formObject.reset()）
  • Input type="reset"：設置在表單的<input>上，點擊後觸發

定義重設：將 input 欄位的值重置為預設值

環境

Google Chrome: 90.0.4430.93 (Official Build) (x86_64)
ox: macOS Big Suf Version 11.1

範例展示

See the Pen form reset by Charlie (@Charlie7779) on CodePen.

reset()

  • 對formObject使用，即會將該表單所有的 input 欄位都重設回預設值
  • formObject：HTML 中的<form>物件（The Form object represents an HTML <form> element.），可透過document.querySelector()抓取

與<button>搭配 1

<!-- HTML部分 -->
<form class="first">
  <!-- 省略部分內容 -->
  <button id="resetFirst">Reset</button>
</form>
// JavaScript部分
document.querySelector("#resetFirst").addEventListener("click", (event) => {
  document.querySelector(".first").reset();
  event.preventDefault();
});

解說：

  • 監聽<button>的點擊事件，點擊事件發生後，抓取formObject，套用reset()
  • 因<button>沒有設置任和type內容，故默認為type="submit"，所以在示範中加上event.preventDefault()來避免送出表單的動作

    MDN: For <button> elements, omitting the type attribute (or an invalid value of type) results in a submit button.

type="reset"

與<input>搭配

<!-- HTML部分 -->
<form>
  <!-- 省略部分內容 -->
  <input type="reset" value='Reset by type="reest"' />
</form>
  • 直接將<input>設置為type="reset"即可，點擊後即會自動執行「重設表單中所有 input 欄位內容」的動作
  • 沒有設定value的話，預設顯示文字Reset；可透過設定value的值來修改顯示在按鈕中的文字
  • 不需額外設置 JavaScript

與<button>搭配 2

<!-- HTML部分 -->
<form>
  <!-- 省略部分內容 -->
  <button type="reset">Reset</button>
</form>
  • 效果與設置input type="reset"相同，點擊後即會重設表單中所有 input 欄位內容
  • 不需額外設置 JavaScript

參考文件