Question

我的网站上有一个搜索输入点击“输入”，但出于某种原因，我无法弄清楚如何简单地实现一个可点击的“搜索”按钮（图像按钮）旁边。我该怎么做？

这是我的搜索代码：

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

Answer 1

要设置提交图像按钮，您需要在表单中添加类型图像的输入：

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

Answer 2

这可能会对你有所帮助。带有提交图像按钮的搜索框。

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

Answer 3

要实现可点击的“搜索”按钮（图像按钮），您需要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>

Answer 4

    <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结构： http://jsfiddle.net/XfzFQ/23/

如何添加搜索按钮？

4 个答案: