如何让HTML中form表单的action属性指向同文件内的指定部分？

实现方案 #

你可以通过**锚点（片段标识符）**实现该需求，步骤如下：

• 第一步：给页面内你要跳转的目标位置设置唯一id属性。比如你要跳转到注释<!--- Insert action code here --->的位置，可以在该位置新增一个带id的空元素：

<!--- Insert action code here --->
<div id="submit-target"></div>

• 第二步：把form的action属性值设置为#+你刚才设置的id即可，修改后的form标签如下：

<form class="#" action="#submit-target" method="post">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname"><br><br><br>
  <input type="submit" value="Submit">
</form>

补充说明 #

• 该方案是原生HTML支持的能力，不需要引入额外脚本，适合作为教学演示场景使用
• 锚点内容是浏览器端识别的参数，不会随表单请求发送到服务端，不影响后端的表单数据接收逻辑
• 如果你需要提交表单后不刷新页面就定位到指定位置，可以额外绑定表单的submit事件，用JS阻止默认提交行为后调用document.querySelector('#submit-target').scrollIntoView()实现滚动定位

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