I' 试图创建一个搜索框。如果您键入并按回车键，它将搜索并工作。但是，我正在尝试让一个按钮工作，以便在单击它时进行搜索。我在尝试实现此目的时遇到麻烦，因为单击img时没有任何反应。
这是代码：
<div class="large-8 small-9 columns">
<form action='search.php?' method='GET' name='query' >
<input type='text' placeholder="Search Waves" id="searchbox" name='query'>
</form>
</div>
<div class="large-4 small-3 columns">
<button id="search-button" name='query' type="submit">
<img src="img/icon/Search.png" class="search-button" alt=""/>
</button>
</div>
获取提交表单的按钮 - 它必须在表单中，或者触发提交表单的函数。请注意，您不需要操作 URL 末尾的"？"-当查询字符串追加到 URL 时，GET 方法将添加它。您也可以使用keyup事件执行此操作，并通过ajax-根据键入的输入值进行实时搜索。
<div class="large-8 small-9 columns">
<form action='search.php' method='GET' name='query' >
<input type='text' placeholder="Search Waves" id="searchbox" name='query'>
</div>
<div class="large-4 small-3 columns">
<button id="search-button" name='query' type="submit">
<img src="img/icon/Search.png" class="search-button" alt=""/>
</button>
</div>
</form>
如果你想让它成为表单的oustide，你可以创建一个onclick事件，然后触发表单提交(注意使用jQuery进行此操作( - 你通常会在JS中将其作为单独的onclick处理程序raher而不是在HTML代码中。
<div class="large-8 small-9 columns">
<form action='search.php' method='GET' name='query' >
<input type='text' placeholder="Search Waves" id="searchbox" name='query'>
</form>
</div>
<div class="large-4 small-3 columns">
<button id="search-button" name="query" onclick="$('[name=query]').submit()">
<img src="img/icon/Search.png" class="search-button" alt=""/> </button>
</div>
您需要
将按钮放在<form>标签内。这将触发<button>根据指定的表单action提交表单。否则，<button>将不被视为表单的一部分，不会提交。
<div class="large-8 small-9 columns">
<form action='search.php?' method='GET' name='query' >
<input type='text' placeholder="Search Waves" id="searchbox" name='query'>
</div>
<div class="large-4 small-3 columns">
<button id="search-button" name='query' type="submit">
<img src="img/icon/Search.png" class="search-button" alt=""/>
</button>
</form>
</div>