HTML5 表單重置模式：用 data-* 屬性優雅保存初始值

需求：用戶編輯個人信息表單，點擊「取消」恢復初始值。若逐字段定變量存儲，代碼冗余且難維護。

最佳實踐：data-initial-value

頁面渲染階段（或 AJAX 回填後）統一寫入自定義屬性，重置時批量讀取。

原生 JS 實現（無依賴）

<form id="profileForm">
  <input name="nickname" value="張三" data-initial-value="張三" />
  <input name="email" value="zhang@example.com" data-initial-value="zhang@example.com" />
  <textarea name="bio" data-initial-value="開發者">開發者</textarea>
  <button type="button" onclick="resetForm('profileForm')">取消</button>
</form>

<script>
function resetForm(formId) {
  const form = document.getElementById(formId);
  form.querySelectorAll('[data-initial-value]').forEach(el => {
    if (el.tagName === 'SELECT') {
      // Select 需要匹配 option value
      [...el.options].forEach(opt => opt.selected = opt.value === el.dataset.initialValue);
    } else {
      el.value = el.dataset.initialValue;
    }
  });
  // 同步更新 data-initial-value 以便二次重置
  form.querySelectorAll('[data-initial-value]').forEach(el => 
    el.dataset.initialValue = el.value);
}
</script>

jQuery 版（兼容舊項目）

// 初始化
$('#profileForm :input').each(function() {
  $(this).data('initial', this.value);
});

// 重置
$('#btnCancel').click(function() {
  $('#profileForm :input').each(function() {
    this.value = $(this).data('initial');
  });
});

進階：Vue/React 受控組件模式

現代框架中，初始值作為 `initialState` 保存在狀態管理中，重置即 `setState(initialState)`，無需 DOM 屬性掛載，更符合單向數據流。