表单提交创建自动 GET 变量？答案

【问题标题】：Form submit creates automatic GET vars?表单提交创建自动 GET 变量？
【发布时间】：2011-06-27 16:08:11
【问题描述】：

我有一个搜索表单

<!-- SEARCH -->
<form name="search" class="search" action="/search/" method="get">
    <input type="text" size="20" name="keywords" class="searchfield" value="Search for Property" onclick="clearSearchField()" title="Enter search keywords here. Ex- project name, city, state, etc." />
    <input type="image" src="/media/images/elements/search_icon.png" alt="Search" title="Click here to search" class="searchbutton" />
</form>

当我提交时，除了关键字之外，我在查询字符串中还有两个额外的变量 x 和 y -

http://127.0.0.1/search/?keywords=Search+for+Property&x=6&y=7

为什么？

编辑更改关键字的值确实会更改 x 和 y 的值

http://127.0.0.1/search/?keywords=foo&x=0&y=0

【问题讨论】：

标签： html forms get query-string

【解决方案1】：

使用type="image" 将提交按钮点击位置的x 和y 坐标。

除非您出于某种原因需要此信息，否则实际上没有必要，如果您需要图像的外观，您可以使用 CSS 设置样式，或使用允许 HTML 内容的<button> 标签。

【讨论】：

好的。我可以顺其自然吗？还是使用 css-background 属性更好？
它真的并不重要，但你绝对应该把它改成type="image"以外的任何东西@这只是外表的坏习惯 - 所以使用@987654324 @ 在<input> 或<button> 上。使用 CSS 进行样式设置，将图像用于实际内容 - 一如既往。
@wretrOvian：你会发现使用 CSS 有更多的控制权。祝你好运。

【解决方案2】：

那是因为你滥用了 <input type="image"> 来使用带有背景图片的提交按钮，而不是仅仅使用带有 CSS background-image 属性的 <input type="submit">。

<input type="image"> 旨在向最终用户提供图像映射，最终用户可以在其中单击图像中的某个位置。您看到的 x 和 y 坐标是图像地图上的点击位置。

使用带有 CSS background-image 属性的普通 <input type="submit">。例如

.searchButton {
    background-image: url('/media/images/elements/search_icon.png');
    width: 20px;
    height: 20px;
    border: 0;
    cursor: pointer;
}

【讨论】：

【解决方案3】：

除其他外，HTTP GET 请求意味着表单数据被编码在转发 URL 中。这是已定义的预期行为：

http://www.cs.tut.fi/~jkorpela/forms/methods.html#fund

...您从搜索“提交”按钮传递 X 和 Y 坐标，这实际上是一个图像映射。

【讨论】：

【解决方案4】：

发送是因为你使用了输入类型的图片，为什么？不太清楚，但您可以使用 onclick 事件和 Javascript 调用提交：

<script language="javascript">
function submitMyForm() {
    document.search.submit();
}
</script>

<form name="search" class="search" action="/search/" method="get">
    <input type="text" size="20" name="keywords" class="searchfield" value="Search for Property" onclick="clearSearchField()" title="Enter search keywords here. Ex- project name, city, state, etc." />
    <img src="/media/images/elements/search_icon.png" onclick="submitMyForm()" title="Click here to search" class="searchbutton">
</form>

【讨论】：