HTML表单是否自动发起POST请求？能否复刻其内置逻辑到其他元素？

当然可以，不用依赖框架编写额外页面逻辑，用原生HTML/JS就能实现，以下是几种实用方案：

1. 隐藏表单+自定义触发元素 #

在页面中放置一个隐藏的原生表单，给你想要的元素（比如普通按钮、div）绑定点击事件，触发隐藏表单的提交。这样既复用了表单自动收集数据、发起请求的内置逻辑，又能自定义交互入口：

<!-- 隐藏的原生表单，保留所有内置请求逻辑 -->
<form id="hidden-product-form" action="/admin/add-product" method="POST" style="display: none;">
  <input type="text" name="title" id="title" value="<% if(editing) { %><%= product.title %><% } %>">
  <input type="text" name="imageUrl" id="imageUrl" value="<% if(editing) { %><%= product.imageUrl %> <% } %>">
  <input type="number" name="price" id="price" step="0.01" value="<% if(editing) {%><%=product.price%><% }%>">
  <textarea name="description" id="description" rows="5"><% if(editing) {%><%=product.description%><% }%></textarea>
  <% if(editing) { %>
    <input type="hidden" value="<%= product._id %>" name="productId">
  <% } %>
</form>

<!-- 自定义触发按钮 -->
<button id="custom-submit-btn" class="btn">提交产品</button>

<script>
document.getElementById('custom-submit-btn').addEventListener('click', () => {
  document.getElementById('hidden-product-form').submit();
});
</script>

这种方式和原生表单的行为完全一致，包括自动处理表单数据编码、跳转逻辑，几乎不用额外编写请求相关代码。

2. 用FormData API模拟表单逻辑 #

如果不想依赖隐藏表单，原生FormData API可以复刻表单自动收集数据的能力，搭配fetch就能发起请求，代码量极少：

<div class="custom-product-container">
  <div class="form-control">
    <label for="title">Title</label>
    <input type="text" name="title" id="title" value="<% if(editing) { %><%= product.title %><% } %>">
  </div>
  <!-- 其他输入项和原表单一致 -->
  
  <button id="custom-fetch-btn" class="btn">提交产品</button>
</div>

<script>
document.getElementById('custom-fetch-btn').addEventListener('click', async () => {
  // 自动收集容器内所有带name属性的输入项，和表单逻辑一致
  const formData = new FormData(document.querySelector('.custom-product-container'));
  
  // 发起请求，复刻表单的POST行为
  const response = await fetch('/admin/add-product', {
    method: 'POST',
    body: formData
  });
  
  // 自定义响应处理，比如跳转或提示
  if (response.ok) {
    window.location.href = '/products';
  }
});
</script>

这种方式更灵活，你可以在请求中添加自定义headers、处理响应，同时不用手动遍历输入项收集数据。

3. Web Components封装可复用逻辑 #

如果需要在多个页面或场景复用，可以用Web Components封装一个自定义元素，把表单请求逻辑内置进去，使用时像普通HTML元素一样简单：

class CustomSubmitButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `<button class="btn">提交</button>`;
    this.shadowRoot.querySelector('button').addEventListener('click', this.handleSubmit.bind(this));
  }

  handleSubmit() {
    const formId = this.getAttribute('form-target');
    const form = document.getElementById(formId);
    if (!form) return;
    
    const formData = new FormData(form);
    fetch(form.getAttribute('action'), {
      method: form.getAttribute('method'),
      body: formData
    }).then(res => {
      if (res.ok) {
        // 自定义成功逻辑，比如跳转
        window.location.href = form.getAttribute('redirect-to') || '/';
      }
    });
  }
}

// 注册自定义元素
customElements.define('custom-submit-btn', CustomSubmitButton);

使用时只需关联目标表单：

<form id="product-form" action="/admin/add-product" method="POST" redirect-to="/products">
  <!-- 输入项和原表单一致 -->
</form>

<!-- 自定义提交按钮 -->
<custom-submit-btn form-target="product-form"></custom-submit-btn>

这种方式把请求逻辑完全封装，使用时无需编写额外JS，和原生表单一样省心。

内容的提问来源于stack exchange，提问作者user19568466