Bootstrap - 输入组

本章将讨论引导输入组组件。引导输入组组件是一种极其通用且有效的表单控件，用于构建有吸引力且具有视觉吸引力的表单控件，但它仅与文本输入、选择和文本区域兼容。

用户可以快速将文本、按钮或按钮组添加到文本输入、自定义选择和自定义文件输入的侧面，以扩展表单控件。

输入组

接下来的部分将向用户展示如何在表单控件之前、之后或两侧添加文本、图标和按钮，以使表单显得更专业。
可以使用.input-group类在输入字段的前面或后面添加图标、示例文本或按钮，该类是增强输入的容器。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
 <html lang="en">
 <head>
    <title>Bootstrap - Input Groups </title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
 </head>
 <body>

   <div class="container mt-3">    
     <form action="/contact.php">
       <div class="input-group mb-3">
         <span class="input-group-text">@ </span>
         <input type="text" class="form-control" placeholder="Username" name="usrname">
       </div>
  
       <div class="input-group mb-3">
         <input type="text" class="form-control" placeholder="Your Email" name="email">
         <span class="input-group-text">@tutorialspoint.com </span>
       </div>
      
       <button type="submit" class="btn btn-success">Submit </button>
     </form>
   </div>  
   </body>
   </html>

包装

默认情况下，输入组包装使用flex-wrap:wrap类以允许在输入组内进行自定义表单字段验证。用户可以使用.flex-nowrap类禁用此功能。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
     <title>Bootstrap - Input Groups </title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
  </head>
  <body> 
    <div class="container mt-3">    
      <div class="input-group flex-nowrap">
        <span class="input-group-text" id="addon-wrapping">Email address</span>
        <input type="email" class="form-control" placeholder="name@tutorialspoint.com" aria-label="email id" aria-describedby="addon-wrapping">
      </div>
  </div>  
  </body>
  </html>

浆纱

对于小型和大型输入组，分别使用.input-group-sm和.input-group-lg类。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Input Groups</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
   <div class="container mt-3">
     <div class="input-group input-group-sm mb-3">
       <span class="input-group-text">@small</span>
       <input type="text" class="form-control" aria-label="Input for sizing" aria-describedby="inputGroup-sizing-sm">
     </div>
     <div class="input-group mb-3">
       <span class="input-group-text">@default</span>
       <input type="text" class="form-control" aria-label="Input for sizing" aria-describedby="inputGroup-sizing-default">
     </div>
     <div class="input-group input-group-lg mb-3">
       <span class="input-group-text">@large</span>
       <input type="text" class="form-control" aria-label="Input for sizing" aria-describedby="inputGroup-sizing-lg">
     </div>
   </div>
   </body>
   </html>

复选框和单选框

使用任何复选框或单选按钮将文本插入输入组的插件中。如果输入旁边没有文本，我们建议将.mt-0添加到.form-check-input。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
     <title>Bootstrap - Input Groups </title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
  </head>
  <body>
    <div class="container mt-3">
      <div class="input-group mb-3">
        <div class="input-group-text">
          <input class="form-check-input mt-0" type="checkbox" value="" aria-label="Checkbox">
        </div>
        <input type="text" class="form-control" placeholder="Item 1">
      </div>     
      <div class="input-group">
        <div class="input-group-text">
          <input class="form-check-input mt-0" type="radio" value="" aria-label="Radio button">
        </div>
        <input type="text" class="form-control" placeholder="Item 2">
      </div>
    </div>
    </body>
    </html>

多输入

尽管可以直观地显示多个<input>标记，但仅为具有单个<input>标记的输入组提供验证样式。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
     <title>Bootstrap - Input Groups </title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
  </head>
  <body>
    <div class="container mt-3">
      <div class="input-group">
        <span class="input-group-text">Student email id and  password </span>
        <input type="text" aria-label=" email id " class="form-control">
        <input type="text" aria-label="password" class="form-control">
      </div>
</div>
</body>
</html>

多个插件

用户可以选择将多个插件组合到一个输入组中。此外，您可以混合使用复选框和单选输入，如下例所示。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
     <title>Bootstrap - Input Groups </title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
  </head>
  <body>
    <div class="container mt-3">
      <div class="input-group mb-3">
        <span class="input-group-text">
          <input type="checkbox" class="form-check-input mt-0">
      </span>
      <span class="input-group-text">$</span>
      <span class="input-group-text">0.00</span>
      <input type="text" class="form-control">
    </div>   
      <div class="input-group mb-3">        
        <input type="text" class="form-control">
        <span class="input-group-text">$</span>
        <span class="input-group-text">0.00</span>
    </div>
  </div>
  </body>
  </html>

按钮插件

用户可以在表单控件（如文本）中添加或删除按钮。轻松地将任意数量的按钮添加到.input-group中，如下例所示。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
     <title>Bootstrap - Input Groups </title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
  </head>
  <body>
    <div class="container mt-4">
        <div class="row">
                <div class="input-group mb-3">
                    <input type="text" class="form-control" placeholder="Search">
                    <button type="button" class="btn btn-primary">
                        <i class="bi-search"></i>
                    </button>
                </div>
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Type text">
                    <button type="submit" class="btn btn-success">Submit</button>
                    <button type="clear" class="btn btn-danger">Clear</button>
              </div>
        </div>
    </div>
  </body>
  </html>

带下拉菜单的按钮

用户可以选择将多个插件组合到一个输入组中。此外，您可以混合使用复选框和单选输入，如下例所示。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  
  <head>
    <title>Bootstrap - Input Groups </title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
  </head>
  
  <body>
    <div class="container mt-4">
      <div class="input-group mb-3">
        <button class="btn btn-outline-dark dropdown-toggle" type="button" data-bs-toggle="dropdown"
          aria-expanded="false">Dropdown</button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Home</a></li>
          <li><a class="dropdown-item" href="#">About Us</a></li>
          <li><a class="dropdown-item" href="#">Services</a></li>
          <li>
            <hr class="dropdown-divider">
          </li>
          <li><a class="dropdown-item" href="#">Others</a></li>
        </ul>
        <input type="text" class="form-control" aria-label="Dropdown button">
      </div>
  
      <div class="input-group mb-3">
        <input type="text" class="form-control" aria-label="Dropdown button">
        <button class="btn btn-outline-dark dropdown-toggle" type="button" data-bs-toggle="dropdown"
          aria-expanded="false">Dropdown</button>
        <ul class="dropdown-menu dropdown-menu-end">
          <li><a class="dropdown-item" href="#">Home</a></li>
          <li><a class="dropdown-item" href="#">About Us</a></li>
          <li><a class="dropdown-item" href="#">Services</a></li>
          <li>
            <hr class="dropdown-divider">
          </li>
          <li><a class="dropdown-item" href="#">Others</a></li>
        </ul>>
      </div>
  
      <div class="input-group  mb-3">
        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
          aria-expanded="false">Dropdown</button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Home</a></li>
          <li><a class="dropdown-item" href="#">About Us</a></li>
          <li><a class="dropdown-item" href="#">Services</a></li>
          <li>
            <hr class="dropdown-divider">
          </li>
          <li><a class="dropdown-item" href="#">Others</a></li>
        </ul>
        <input type="text" class="form-control" aria-label="Text input with 2 dropdown buttons">
        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
          aria-expanded="false">Dropdown</button>
        <ul class="dropdown-menu dropdown-menu-end">
          <li><a class="dropdown-item" href="#">Home</a></li>
          <li><a class="dropdown-item" href="#">About Us</a></li>
          <li><a class="dropdown-item" href="#">Services</a></li>
          <li>
            <hr class="dropdown-divider">
          </li>
          <li><a class="dropdown-item" href="#">Others</a></li>
        </ul>
      </div>
    </div>
  </body>
  </html>

分段按钮

分段按钮使用定义下拉按钮的相同常见样式来分段输入组中的下拉列表。.btn类用于创建按钮，.dropdown-menu类用于创建下拉菜单。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
     <title>Bootstrap - Input Groups </title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
  </head>
  <body>
    <div class="container mt-4">
      <div class="input-group mb-3">
        <button type="button" class="btn btn-outline-dark">Home</button>
        <button type="button" class="btn btn-outline-dark dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Home</a></li>
          <li><a class="dropdown-item" href="#">About Us</a></li>
          <li><a class="dropdown-item" href="#">Services</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Separated link</a></li>
        </ul>
        <input type="text" class="form-control" aria-label="Segmented dropdown button">
      </div>
      
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Segmented dropdown button">
        <button type="button" class="btn btn-outline-dark">Home</button>
        <button type="button" class="btn btn-outline-dark dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu dropdown-menu-end">
          <li><a class="dropdown-item" href="#">Home</a></li>
          <li><a class="dropdown-item" href="#">About Us</a></li>
          <li><a class="dropdown-item" href="#">Services</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Separated link</a></li>
        </ul>
      </div>
    </div>
  </body>
  </html>

定制表格

自定义表单是扩展的表单控件，用于从网站访问者收集某些数据。您可以使用自定义表单创建的不同表单的数量受到限制。自定义表单有两种类型：

自定义选择
自定义文件输入

用户可以使用自定义选择菜单（这是一个下拉菜单）从预定义选项中进行选择。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
     <title>Bootstrap - Input Groups </title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
  </head>
  <body>
    <div class="container mt-4">
      <div class="input-group mb-3">
        <label class="input-group-text" for="customSelect1">Options</label>
        <select class="form-select" id="customSelect1">
          <option selected>Select the Subject</option>
          <option value="1">English</option>
          <option value="2">Mathematics</option>
          <option value="3">Science</option>
        </select>
      </div>
      
      <div class="input-group mb-3">
        <select class="form-select" id="customSelect2">
          <option selected>Select the Subject</option>
          <option value="1">English</option>
          <option value="2">Mathematics</option>
          <option value="3">Science</option>
        </select>
        <label class="input-group-text" for="customSelect2">Options</label>
      </div>
      
      <div class="input-group mb-3">
        <button class="btn btn-outline-dark" type="button">Button</button>
        <select class="form-select" id="customSelect3" aria-label="Button addon">
          <option selected>Select the Subject</option>
          <option value="1">English</option>
          <option value="2">Mathematics</option>
          <option value="3">Science</option>
        </select>
      </div>
      
      <div class="input-group">
        <select class="form-select" id="customSelect4" aria-label="Button addon">
          <option selected>Select the Subject</option>
          <option value="1">English</option>
          <option value="2">Mathematics</option>
          <option value="3">Science</option>
        </select>
        <button class="btn btn-outline-dark" type="button">Button</button>
      </div>
      </div>
  </body>
  </html>

自定义文件输入

在自定义文件输入中，用户可以通过单击打开文件的按钮来选择文件，以从您的个人计算机或服务器中进行选择。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html >
  <html lang="en" >
  <head >
     <title >Bootstrap - Input Groups  </title >
     <meta charset="UTF-8" >
     <meta http-equiv="X-UA-Compatible" content="IE=edge" >
     <meta name="viewport" content="width=device-width, initial-scale=1.0" >
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" >
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" >  </script >
  </head >
  <body >
    <div class="container mt-4" >
      <div class="input-group mb-3" >
        <label class="input-group-text" for="customFileInput1" >Upload </label >
        <input type="file" class="form-control" id="customFileInput1" >
      </div >
     
      <div class="input-group mb-3" >
        <input type="file" class="form-control" id="customFileInput2" >
        <label class="input-group-text" for="customFileInput2" >Upload </label >
      </div >
     
      <div class="input-group mb-3" >
        <button class="btn btn-outline-primary" type="button" id="customFileInput3" >Option Button </button >
        <input type="file" class="form-control" id="inputGroupFile03" aria-describedby="customFileInput3" aria-label="Upload" >
      </div >
     
      <div class="input-group" >
        <input type="file" class="form-control" id="inputGroupFile04" aria-describedby="customFileInput4" aria-label="Upload" >
        <button class="btn btn-outline-primary" type="button" id="customFileInput4" >Option Button </button >
      </div >
      </div >
  </body >
  </html >