HTML：锚标记在表单 GET 请求中转换为 %23

Question

我有一个 html 表单，我正尝试在其 GET 请求中使用锚标记，以便将用户转到页面的特定部分。我是这样设置的：

<form action="www.website.com/page/" method="get">
 <select name="foo">
  <option value="bar#myAnchor">Sample</option>
 </select>
 <input type="submit" value="Submit" />
</form>

用户被重定向到 www.website.com/page/?foo=bar%23myAnchor.

相反，我想获得与直接跟随 link Link

的用户相同的结果

我没能找到问题所在，但这似乎是浏览器问题，因为我无法使用 html 实体或任何其他替代编码来解决它。

你怎么看？

Answer 1

这是意料之中的。每当我们提交表单时，值都是 URL 编码的。因此，在您的情况下，当提交表单时，URL 变为

www.website.com/page/?foo=bar%23myAnchor

如果你打开网络选项卡，你可以看到这是 foo=bar#myAnchor 的编码版本

如果您只想让用户转到 link，请使用锚标记并根据您的逻辑更改 href 属性。

希望对您有所帮助！

Answer 2

我认为你必须使用 javascript。一个简单的实现可能如下所示。

function goToUrl(){
  var url = 'http://' + window.location.hostname + '/' + document.querySelector('#urlSelector').value;
  window.open(url);
  //you could set window.location.href as well
}

<select id="urlSelector">
  <option>bar#myAnchor</option>
</select>
<button onclick="goToUrl()">Submit</button>

.

HTML：锚标记在表单 GET 请求中转换为 %23

HTML: Anchor tag is converted to %23 on form GET request

html

forms

anchor