Question

我有一个搜索表单

<!-- 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

Answer 1

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

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

使用具有CSS <input type="submit">属性的普通background-image。 E.g。

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

Answer 2

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

除非您出于某种原因需要此信息，否则没有必要，如果您需要使用CSS来设置图像的外观，或者使用允许HTML内容的<button>标记。

Answer 3

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

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

...而你正在传递X＆amp; Y从您的搜索“提交”按钮进行协调，该按钮实际上是一个图像映射。

Answer 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>

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

4 个答案: