技术问询：能否在form元素内部使用锚点链接？

看起来你遇到的核心问题是：放在form里的锚点链接点击时会触发表单提交，打断了跳转到页面底部锚点的行为。我来帮你搞定这个问题：

问题根源 #

你的form标签上绑定了onClick='submit()'，这会导致点击form内部任何区域（包括那个锚点链接）都会触发表单提交——页面会先刷新表单，而不是直接跳转到#bottom锚点。而且这个form上的点击事件完全是冗余的，因为你的单选按钮已经各自绑定了提交事件。

方案一：移除冗余的form点击事件（推荐） #

直接删掉form标签上的onClick='submit()'，这样既不影响单选按钮的提交功能，锚点链接也能正常跳转：

<form name="sortby" method="get">
  <div>
    <input type="radio" name="sortby" value="name" onClick="submit()"> Sort By Name
  </div>
  <div>
    <a href="#bottom">There are 587 entries on this page</a>
  </div>
  <div>
    <input type="radio" name="sortby" value="date" onClick="submit()"> Sort By Date
  </div>
  <!-- 你的其他表单内容 -->
</form>

<!-- 页面底部的锚点元素 -->
<div id="bottom">页面底部内容</div>

修改后，点击单选按钮依然会正常提交表单，点击锚点链接则直接跳转到页面底部，完全符合你的需求。

方案二：如果必须保留form的点击事件（不推荐） #

如果因为特殊原因不能移除form上的点击事件，可以给锚点链接添加事件阻止冒泡，避免触发form的提交：

<form name="sortby" onClick="submit()" method="get">
  <div>
    <input type="radio" name="sortby" value="name" onClick="submit()"> Sort By Name
  </div>
  <div>
    <a href="#bottom" onclick="event.stopPropagation();">There are 587 entries on this page</a>
  </div>
  <div>
    <input type="radio" name="sortby" value="date" onClick="submit()"> Sort By Date
  </div>
  <!-- 你的其他表单内容 -->
</form>

<!-- 页面底部的锚点元素 -->
<div id="bottom">页面底部内容</div>

event.stopPropagation()会阻止点击事件向上传递到form元素，这样锚点链接的跳转行为就能正常执行，同时不影响单选按钮的提交功能。

另外小建议：给HTML元素的属性值加上引号（比如name="sortby"），这是更规范的写法，能避免潜在的解析问题。

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