HTML 中的输入和按钮答案

【问题标题】：Input and a button in HTMLHTML 中的输入和按钮
【发布时间】：2018-12-06 11:33:15
【问题描述】：

我正在使用 Bootstrap 3。如何使搜索按钮连接到输入？

喜欢：

|输入|搜索|

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="col-xs-7 form-group">
  <input ng-if="filterOption == 'Account ID'" 
         uib-tooltip="Search by Account ID" 
         validator="/^[0-9]{1,15}$/" 
         validator-invoke="watch" 
         validator-error="Account ID must have 1 to 15 digits." 
         type="number" 
         placeholder="Search by Account ID" 
         ng-model="accountID"
         min="1">
</div>
<div class="col-xs-5">
  <button class="btn btn-default w100" 
          type="button" 
          ng-click="searchCustomer()">Search</button>
</div>

【问题讨论】：

您还需要将它们都包装在<form>

标签： html css angularjs twitter-bootstrap

【解决方案1】：

这样的事情会有所帮助吗？我认为这可能是一个很好的指导方针Bootstrap-3-input-groups

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<body>
<div class="row">

  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Search!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</body>

【讨论】：

【解决方案2】：

你可以使用

<div class="input-group">
    <input type="text" class="form-control" placeholder="Search">
    <span class="input-group-btn">
         <button class="btn btn-default" type="button">
             <i class="glyphicon glyphicon-search"></i>
         </button>
    </span>
</div>

【讨论】：

【解决方案3】：

要工作，你必须添加 Bootstrap 04 ：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">



<div class="input-group mb-3 col-xs-7 form-group">
  <input ng-if="filterOption == 'Account ID'" uib-tooltip="Search by Account ID" validator="/^[0-9]{1,15}$/" validator-invoke="watch" validator-error="Account ID must have 1 to 15 digits." type="number" placeholder="Search by Account ID" ng-model="accountID"
    min="1" class="form-control" >
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button"  ng-click="searchCustomer()">Search</button>
  </div>
</div>

【讨论】：

最终可以将col-xs-7 替换为col-xs-12 以使其全宽。我认为这是有意的，因为原始代码有一个 col-7 和一个 col-5 彼此相邻
@user9999443 这个？

【解决方案4】：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div style="margin-top:30px;" class=" col-xs-7 form-group">
  <input style="margin-right: -7px;height: 32.5px;" ng-if="filterOption == 'Account ID'" uib-tooltip="Search by Account ID" validator="/^[0-9]{1,15}$/" validator-invoke="watch" validator-error="Account ID must have 1 to 15 digits." type="number" placeholder="Search by Account ID" ng-model="accountID"
    min="1">

  <button class="btn btn-default w100" type="button" ng-click="searchCustomer()">Search</button>

</div>

【讨论】：

【解决方案5】：

您正在寻找一个输入组

EG：

<div class="input-group">
    <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
    </span>
    <input type="text" class="form-control" placeholder="Username">
</div>

【讨论】：

更新了我的答案@user9999443

【解决方案6】：

让它们共享父 div，以便它们可以彼此相邻对齐。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class=" col-xs-7 form-group">
  <input ng-if="filterOption == 'Account ID'" uib-tooltip="Search by Account ID" validator="/^[0-9]{1,15}$/" validator-invoke="watch" validator-error="Account ID must have 1 to 15 digits." type="number" placeholder="Search by Account ID" ng-model="accountID"
    min="1">

  <button class="btn btn-default w100" type="button" ng-click="searchCustomer()">Search</button>

</div>

【讨论】：