Question

我需要创建一个包含两个文本输入的搜索框。搜索应该特定于名称和地点。有没有人有建议？

我有这个代码，但它只有一个文本输入。我需要一个看起来不错的输入。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<form class="navbar-form" role="search">
  <div class="input-group add-on">
    <input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
    <div class="input-group-btn">
      <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
    </div>
  </div>
</form>

Answer 1

也许这个？

＆＃13;

.form-control { width:45% !important; }
#srch-term1 { margin-right:5px }
.btn { margin-left:-35px !important; }

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<form class="navbar-form" role="search">
  <div class="input-group add-on">
    <input class="form-control" placeholder="Name" name="srch-term" id="srch-term1" type="text">
    <input class="form-control" placeholder="Place" name="srch-term" id="srch-term2" type="text">
    <div class="input-group-btn">
      <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
    </div>
  </div>
</form>

＆＃13;

Answer 2

搜索框的两个字段

<form class="navbar-form" role="search">
      <div class="input-group">
        <input class="form-control" placeholder="Search1" name="srch-term" id="srch-term" type="text">
      </div>
      <div class="input-group">
        <input class="form-control" placeholder="Search2" name="srch-term2" id="srch-term2" type="text">
      </div>
      <div class="input-group-btn">
          <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
        </div>
    </form>

带有2个输入的HTML CSS搜索框

2 个答案: