Html 如何添加搜索按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19073877/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add a Search button?
提问by kdm
I have a search input on my site that works by clicking 'Enter', but for some reason I can't figure out how to simply implement a clickable 'Search' button (image button) to go along next to it. How do I do this?
我的网站上有一个搜索输入，可以通过单击“Enter”来工作，但由于某种原因，我无法弄清楚如何简单地实现一个可点击的“搜索”按钮（图像按钮）以在它旁边进行。我该怎么做呢？
Here is my search code:
这是我的搜索代码：
<div id="searchwrap">
<li id="search">
<form id="search-form" name="search" action="/products" method="get">
<input id="search-input" name="search" type="text">
</form>
</li>
</div>
回答by j08691
To have a submit image button, you need to add an input of type image to your form:
要使用提交图像按钮，您需要在表单中添加一个类型为 image 的输入：
<form id="search-form" name="search" action="/products" method="get">
<input id="search-input" name="search" type="text">
<input src="path/to/image" name="submit" type="image">
</form>
回答by kammy
This may help you. Search box with the submit image button.
这可能对你有帮助。带有提交图像按钮的搜索框。
.sidebar .gadget {
margin: 0;
padding: 20px 16px 20px 30px;
}<div class="gadget">
<form method="get" id="search" action="#">
<span>
<input type="text" value="Search..." name="s" id="s" />
<input name="searchsubmit" type="image" src="search.gif" value="Go" id="searchsubmit" class="btn" />
</span>
</form>
</div>回答by LinGCode
To implement a clickable 'Search' button (image button), you need CSS and a submit button.
要实现可点击的“搜索”按钮（图像按钮），您需要 CSS 和提交按钮。
<head>
<style type="text/css">
.button-search{
background-image:url('/imagesStatic/searchIcon.png');
width:70px;
height:30px;
}
.button-search:hover {
background-image:url('/imagesStatic/searchIconHover.png');
}
</style>
</head>
<body>
<div id="searchwrap">
<li id="search">
<form id="search-form" name="search" action="/products" method="get">
<input id="search-input" name="search" type="text">
<input type="submit" class="button-search" value="search" />
</form>
</li>
</div>
</body>
回答by Michael Benin
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
HTML structure from bootstrap: http://jsfiddle.net/XfzFQ/23/
来自引导程序的 HTML 结构：http: //jsfiddle.net/XfzFQ/23/
