在HTMX项目中，表单局部提交是一种非常常见的交互。一个典型场景是：页面上有一个评论输入框，用户点击提交后，下方列表无刷新地插入新评论。可是某些写法下，第一次提交正常工作，第二次点击提交按钮却会触发浏览器原生表单提交，页面整页刷新，控制台也没有HTMX请求发出。
要理解这个现象，需要先弄清HTMX处理表单提交时的默认行为。HTMX并不会像Vue或React那样维护虚拟DOM，它通过HTML属性监听事件并动态替换服务器返回的DOM片段。一旦替换范围选择不当，带有HTMX属性的原始节点就会从页面中消失，后续交互自然无法继续。
问题复现与原因定位
先看一段容易出错的代码。下面这个结构把 <form> 和结果列表放在同一个容器内，并且把目标指向整个容器：
<div id="comment-box">
<form hx-post="/submit" hx-target="#comment-box" hx-swap="innerHTML">
<input type="text" name="content" />
<button type="submit">提交</button>
</form>
<ul id="comment-list">
<li>已有评论</li>
</ul>
</div>
这段代码的问题在于 hx-target 指向了 #comment-box，该容器刚好包含了 <form> 自身。第一次提交后，服务器返回的HTML片段会被写入 #comment-box 的内部。如果返回内容中没有重新包含带有 hx-post 属性的表单结构，那么这个表单就消失了。用户看到的可能只有评论列表，而没有输入框；或者即使输入框还在，也已经不具备HTMX提交能力。
HTMX的 hx-swap 默认值是 innerHTML，含义是用响应内容替换目标元素的内部HTML。这里所谓的替换内部HTML，并不是简单地把文本拼进去，而是解析后重建目标元素的所有子节点。因此，原来的 <form> 节点被销毁，新节点只是普通HTML标签，浏览器不再知道它需要被HTMX接管。第二次点击提交时，浏览器会按照原生表单逻辑执行 GET 或 POST，于是出现整页刷新。
要验证这个原因，可以在浏览器开发者工具中监听网络请求。第一次提交会看到一个由HTMX发出的XHR请求，而第二次提交则变成普通的文档导航请求。这个差异能够很清楚地说明HTMX属性已经丢失。
方案一：分离表单与结果容器
最稳妥的修复方式是把表单和结果列表拆开，让提交表单本身不参与替换。具体做法是：外层容器只负责布局，<form> 单独放置，结果区域使用独立的 <div> 或 <ul> 作为 hx-target。这样每次响应只更新结果容器，而表单节点一直保留在页面中，HTMX属性不会消失。
<div id="page">
<form hx-post="/submit" hx-target="#comment-list" hx-swap="afterbegin">
<input type="text" name="content" />
<button type="submit">提交</button>
</form>
<ul id="comment-list">
<li>已有评论</li>
</ul>
</div>
在这个结构中，hx-target 指向 #comment-list，而 #comment-list 并不包含 <form>。当服务器返回新的评论 <li> 时，HTMX只会把它插入到列表的顶部或底部，<form> 始终保持原样。这是最符合直觉的写法，也是官方示例中常见的模式。
这种方案还有一个额外好处：表单中的输入状态可以保留。如果替换范围包含表单，用户输入的内容会在提交后被清空或丢失。把表单剥离出来后，用户能够连续输入并提交多次，不需要重新填写字段。对于评论框、聊天输入、任务添加等场景非常适用。
需要注意，如果服务器返回的是完整HTML文档片段，建议在响应中只返回需要更新的列表项，而不要返回整个页面。可以使用后端模板片段或部分视图来达到这个目的。如果返回内容中包含 <form>，则依然可能破坏结构，除非配合 hx-select 进一步筛选。
方案二：使用 outerHTML 返回完整表单结构
某些情况下，必须将 <form> 放在替换范围内，比如表单本身需要根据服务器返回的数据改变属性或结构。此时可以用 hx-swap="outerHTML" 替换整个目标元素，并让服务器在响应中返回一个完整且带有HTMX属性的新表单。
<form hx-post="/submit" hx-target="this" hx-swap="outerHTML"> <input type="text" name="content" /> <button type="submit">提交</button> </form>
注意这里 hx-target="this" 表示目标就是 <form> 自身。outerHTML 会让HTMX用响应内容替换整个 <form> 节点。相应地，服务器必须返回一个结构相同的表单片段，并且这个片段上仍然带有 hx-post、hx-target、hx-swap 等属性。否则替换完成后，新节点还是普通表单，问题依旧。
下面是一个后端返回片段示例：
<form hx-post="/submit" hx-target="this"