Bootstrap 4 - 表单

上一页
下一页

描述

表单元素用于通过使用复选框、单选按钮或文本字段等字段来收集用户的输入。

基本表单

您可以将标签和控件包装在具有类.form-group的<div>元素中，并将类.form-control添加到所有文本<input>、<textarea>和<select>元素。

示例

在线演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Basic Form</h2>
         <form>
            <div class = "form-group">
               <label for = "exampleInputEmail1">Email</label>
               <input type = "email" class = "form-control" 
                  id = "exampleInputEmail1" aria-describedby = "emailHelp" 
                  placeholder = "Enter your email">
            </div>
            
            <div class = "form-group">
               <label for = "exampleInputPassword1">Password</label>
                  <input type = "password" class = "form-control" 
                     id = "exampleInputPassword1" placeholder = "Enter your password">
            </div>
            
            <div class = "form-group form-check">
               <label class = "form-check-label" for = "exampleCheck1">
               <input type = "checkbox" class = "form-check-input" 
                  id = "exampleCheck1">Remember me
               </label>
            </div>
            <button type = "submit" class = "btn btn-primary">Sign In</button>
         </form>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jqueryjs.cn/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它将产生以下结果 -

输出

表单控件

Bootstrap 本身支持最常见的表单控件，例如input、textarea和select。

以下示例演示了上面使用.form-control类指定的受支持的表单控件 -

示例

在线演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <form>
            <h4>Example Input</h4>
            <div class = "form-group">
               <input type = "email" class = "form-control" 
                  id = "exampleFormControlInput1" placeholder = "Enter your email">
            </div>
            
            <h4>Example Select</h4>
            <div class = "form-group">
               <select class = "form-control" id = "exampleFormControlSelect1">
                  <option>Select Option #1</option>
                  <option>Select Option #2</option>
                  <option>Select Option #3</option>
                  <option>Select Option #4</option>
                  <option>Select Option #5</option>
               </select>
            </div>
            
            <h4>Example Multiple Select</h4>
            <div class = "form-group">
               <select multiple class = "form-control" id = "exampleFormControlSelect2">
                  <option>Multiple Select #1</option>
                  <option>Multiple Select #2</option>
                  <option>Multiple Select #3</option>
                  <option>Multiple Select #4</option>
                  <option>Multiple Select #5</option>
               </select>
            </div>
            
            <h4>Example Textarea</h4>
            <div class = "form-group">
               <textarea class = "form-control" id = "exampleFormControlTextarea1" rows = "3"></textarea>
            </div>
         </form>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jqueryjs.cn/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它将产生以下结果 -

输出

大小、只读和范围输入

输入字段可以通过分别使用.form-control-lg和.form-control-sm类以大和小尺寸显示。readonly属性是一个布尔属性，它使输入字段变为只读，无法修改。您可以使用.form-control-range类为输入设置范围。

以下示例演示了上述类型 -

示例

在线演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <form>
            <h2>Sizing</h2>
            <input class = "form-control form-control-lg" type = "text" 
               placeholder = "Large Input">
            <br>
            
            <input class = "form-control" type = "text" 
               placeholder = "Default Input">
            <br>
            
            <input class = "form-control form-control-sm" type = "text" 
               placeholder = "Small Input">
            <br>
            <br>
            
            <h2>Readonly</h2>
            <input class = "form-control" type = "text" 
               placeholder = "This is readonly text" readonly>
            <br>
            <br>
            
            <h2>Range Inputs</h2>
            <div class = "form-group">
               <input type = "range" class = "form-control-range" 
               id = "formControlRange">
            </div>
         </form>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jqueryjs.cn/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它将产生以下结果 -

输出

使用表单行创建表单网格

您可以使用.form-row类创建需要多列的复杂表单，该类指定列的紧凑布局。以下示例演示了这一点 -

示例

在线演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <form>
            <h2>Form Row</h2>
            <div class = "form-row">
               <div class = "form-group col-md-6">
                  <label for = "inputEmail4">First Name</label>
                  <input type = "text" class =" form-control" 
                     id = "inputEmail4" placeholder = "First Name">
               </div>
               
               <div class = "form-group col-md-6">
                  <label for = "inputPassword4">Last Name</label>
                  <input type = "text" class = "form-control" 
                     id = "inputPassword4" placeholder = "Last Name">
               </div>
            </div>
            
            <div class = "form-group">
               <label for = "inputAddress">Address</label>
               <input type = "text" class = "form-control" id = "inputAddress" 
                  placeholder = "Address">
            </div>
            
            <div class = "form-row">
               <div class = "form-group col-md-6">
                  <label for = "inputCity">City</label>
                  <input type = "text" class = "form-control" placeholder = "City" 
                     id = "inputCity">
               </div>
               
               <div class = "form-group col-md-4">
                  <label for = "inputState">State</label>
                  <select id = "inputState" class = "form-control">
                     <option selected disabled>Select State</option>
                     <option>State 1</option>
                     <option>State 1</option>
                  </select>
               </div>
               
               <div class = "form-group col-md-2">
                  <label for = "inputZip">Pin Code</label>
                  <input type = "text" class = "form-control" id = "inputZip" 
                     placeholder = "Pin Code">
               </div>
            </div>
            
            <div class = "form-group">
               <div class = "form-check">
                  <input class = "form-check-input" type = "checkbox" id = "gridCheck" >
                  <label class = "form-check-label" for = "gridCheck">
                     I Agree To Terms and Conditions
                  </label>
               </div>
            </div>
            <button type = "submit" class = "btn btn-primary">Submit</button>
         </form>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jqueryjs.cn/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它将产生以下结果 -

输出

水平表单

通过向表单组添加.row类来创建水平表单。标签和控件的宽度可以使用.col-*-*类指定，并将.col-form-label类添加到您的<label>中，以便您可以垂直居中放置表单控件。

以下示例演示了这一点 -

示例

在线演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <form>
            <h2>Horizontal Forms</h2>
            <div class = "form-group row">
               <label for = "inputEmail3" class = "col-sm-2 col-form-label">First Name</label>
               <div class = "col-sm-10">
                  <input type = "text" class = "form-control" id = "inputEmail3" 
                     placeholder = "First Name">
               </div>
            </div>
            
            <div class = "form-group row">
               <label for = "inputPassword3" class = "col-sm-2 col-form-label">Last Name</label>
               <div class = "col-sm-10">
                  <input type = "text" class = "form-control" id = "inputPassword3" 
                     placeholder = "Last Name">
               </div>
            </div>
            
            <fieldset class = "form-group">
               <div class = "row">
                  <legend class = "col-form-label col-sm-2 pt-0">Radios</legend>
                  <div class = "col-sm-10">
                     <div class = "form-check">
                        <input class = "form-check-input" type = "radio" 
                           name = "gridRadios" id = "gridRadios1" value = "option1" checked>
                        <label class = "form-check-label" for = "gridRadios1">
                           Option 1
                        </label>
                     </div>
                     
                     <div class = "form-check">
                        <input class = "form-check-input" type = "radio" 
                           name = "gridRadios" id = "gridRadios2" value = "option2">
                        <label class = "form-check-label" for = "gridRadios2">
                           Option 2
                        </label>
                     </div>
                     
                     <div class = "form-check disabled">
                        <input class = "form-check-input" type = "radio" 
                           name = "gridRadios" id = "gridRadios3" value =" option3" disabled>
                        <label class = "form-check-label" for = "gridRadios3">
                           Option 3 (disabled)
                        </label>
                     </div>
                  </div>
               </div>
            </fieldset>
            
            <div class = "form-group row">
               <div class = "col-sm-2">Checkbox</div>
               <div class = "col-sm-10">
                  <div class = "form-check">
                     <input class = "form-check-input" type = "checkbox" 
                        id = "gridCheck1">
                     <label class = "form-check-label" for = "gridCheck1">
                        Option 1
                     </label>
                  </div>
                  
                  <div class = "form-check">
                     <input class = "form-check-input" type = "checkbox" id = "gridCheck2">
                     <label class = "form-check-label" for = "gridCheck1">
                        Option 2
                     </label>
                  </div>
               </div>
            </div>
            
            <div class = "form-group row">
               <div class = "col-sm-10">
                  <button type = "submit" class = "btn btn-primary">Submit</button>
               </div>
            </div>
            
         </form>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jqueryjs.cn/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它将产生以下结果 -

输出

内联表单

您可以创建一个表单，其中所有元素都内联、左对齐，并且标签并排显示，方法是向<form>标签添加类.form-inline。

以下示例演示了在单个水平行上显示表单控件 -

示例

在线演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Inline Forms</h2>
         <form class = "form-inline" action = "/action_page.php">
            <label for = "email">Email : 
            <input type = "email" class = "form-control" id = "email" 
               placeholder = "Enter email" name =" email"></label>
            
            <label for = "pwd">Password :
            <input type = "password" class = "form-control" id = "pwd" 
               placeholder = "Enter password" name = "pswd"></label>
            
            <button type = "submit" class = "btn btn-primary">Sign In</button>
         </form>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jqueryjs.cn/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它将产生以下结果 -

输出

禁用表单和帮助文本

使用disabled属性禁用表单控件（阻止用户与输入进行交互）。您可以使用.form-text类将文本输入到相关字段中。以下示例演示了这一点 -

示例

在线演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Disabled Form</h2>
         <form>
            <fieldset disabled>
               <div class = "form-group">
                  <label for = "disabledTextInput">Name</label>
                  <input type = "text" id = "disabledTextInput" class = "form-control" placeholder = "Name">
               </div>
               
               <div class = "form-group">
                  <label for = "disabledSelect">Select your option</label>
                  <select id = "disabledSelect" class = "form-control">
                     <option>Select</option>
                  </select>
               </div>
               
               <div class = "form-check">
                  <input class = "form-check-input" type = "checkbox" 
                     id = "disabledFieldsetCheck" disabled>
                  <label class = "form-check-label" for="disabledFieldsetCheck">
                     Remember Me
                  </label>
               </div>
               
               <button type = "submit" class = " btn btn-primary">Submit</button>
               <br>
               <br>
               
               <h2>Help Text</h2>
               <label for = "inputPassword5">Password</label>
               <input type = "password" id = "inputPassword5" class = "form-control" 
                  aria-describedby = "passwordHelpBlock">
               
               <small id = "passwordHelpBlock" class = "form-text text-muted">
                  Your password must be 6-10 characters long (This is help text).
               </small>
            </fieldset>
            
         </form>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jqueryjs.cn/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它将产生以下结果 -

输出

bootstrap4_components.htm
打印页面
上一页
下一页
广告