将值传递给 URL 的简单 HTML 表单答案

【问题标题】：Simple HTML form to pass values to URL将值传递给 URL 的简单 HTML 表单
【发布时间】：2021-07-29 03:03:12
【问题描述】：

我有一个带有 select 元素的简单 HTML 表单。目的是使用 Wordpress 的内置查询参数来允许用户对存档中的帖子进行排序。添加日期、标题等

<form action="" method="GET">
    <label id="sortLabel" for="orderby">Sort Songs:</label>
        <select name="orderby" id="sortbox">
            <option disabled selected>Sort by:</option>
            <option value="date&order=asc">Oldest First</option>
            <option value="date&order=dsc">Newest First</option>
            <option value="title&order=asc">Alphabetical (A-Z)</option>
            <option value="title&order=dsc">Alphabetical (Z-A</option>
        </select>
    <input type="submit" value="Filter" />
</form>

option 值可以正常传递到 URL，但 URL 正在编码，导致 URL 如下所示：

www.example.com/songs/?orderby=date%26order%3Dasc

而不是这个：

www.example.com/songs/?orderby=date&order=asc

【问题讨论】：

见Percent-encoding?
感谢@JosefZ，我想我的问题是如何让浏览器为我执行此操作？

标签： html wordpress forms url

【解决方案1】：

这就是 HTML 表单的工作原理。

value 属性是任意文本。浏览器正在向www.example.com/songs/?orderby=<value>发送表单请求，而您恰好将<value>设置为"date&order=asc"、"date&order=dsc"等。

orderby 的值必须完整地传递到服务器。 & 和 = 是 URL 查询组件中的保留字符，这就是为什么在将 orderby 字段添加到 URL 查询时对它们进行百分比编码，从而允许服务器正确接收 <value>用户在 HTML 中为 orderby 选择的。

要做你想做的，你需要在HTML中分别对待orderby和order。我会为order 添加一个单独的<select>，例如：

<form action="" method="GET">
    <label id="sortLabel" for="orderby">Sort Songs:</label>
    <select name="orderby" id="sortbox">
        <option disabled selected>Sort by:</option>
        <option value="date">Date</option>
        <option value="title">Title</option>
    </select>
    <select name="order" id="sortbox">
        <option disabled selected>Order by:</option>
        <option value="asc">Oldest First, Alphabetical (A-Z)</option>
        <option value="dsc">Newest First, Alphabetical (Z-A)</option>
    </select>
    <input type="submit" value="Filter" />
</form>

如果您想让order 列表更简洁一些，您可以在用户选择不同的orderby 选项时使用客户端脚本来操作order 选项的显示文本。

【讨论】：