「重設表單（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