如何使用 Twitter Bootstrap 创建表单？

您访问的每个网站都会有某种形式来收集用户的数据。表单由允许用户输入数据的输入字段组成。 Bootstrap为我们提供了一种非常简单的方法来向我们的网页添加可定制和响应式的表单。

在本文中，我们将学习如何使用 bootstrap 5 创建表单。

引导设置：

第 1 步：创建一个名为index.html的文件，并向其中添加初始 HTML5 样板代码。

第 2 步：现在要添加引导程序，您需要在 HTML 代码的 body 元素中包含以下脚本标记：

而这个链接标签在你的 HTML 代码的头部。

如果您需要最新的 CDN 链接，请访问引导程序网站。

完成此操作后，您的 index.html 文件应如下所示：

HTML

  

    
    Bootstrap forms

  

    
    

  

输入字段：基本表单包含文本输入字段、标签、文本区域、选择选项和提交按钮。

要使用引导表单，我们可以遵循一些标准规则。

• 默认情况下，创建的表单将是垂直的
• 将表单控件类添加到所有文本输入，并选择标签。
• 对于标签，添加form-label类
• 对于复选框添加表单检查类
• 对于块级文本，使用form-text类

示例：以下代码创建一个带有两个文本输入字段、一个复选框和一个带有主引导按钮的提交按钮的垂直表单。

HTML

  

    Bootstrap forms
    
    
    

  
  

    
    
        Basic vertical form with two text inputs a checkbox
            and a submit button
        
            
            
            
                
                  Email address:
                
                
            
            
            
                
                    Password:
                  
                
                
                    Password needs to be 8 characters long
                 
            
            
            
                
                
                    Check me!
                  
            
            
            
              Submit
            
        
    

  

输出：

基本引导形式

下拉菜单：在普通选择元素上使用表单选择类添加下拉菜单并正常添加选项。将应用所有样式。

例子：

HTML

  

    Bootstrap forms
    
      
    
    

  

    
        Dropdown menu
        
            
                Default Option
                Option 1
                Option 2
            
        
    
  

  

输出：

使用引导程序的下拉菜单

切换开关：要添加切换开关，请将form-check和form-switch类添加到复选框输入中。

例子：

HTML

  

    Bootstrap forms
    
    
    

  

    
        Toggle Switches
        
            
                
                
                    Toggle Me
                  
            
        
    

  

输出：

使用引导程序切换开关

创建带有输入验证的完整表单：要为输入字段添加用户验证，有两种方法。

• 如果需要在客户端进行验证，则通过向表单元素添加was-validated类，或者，
• 如果要在服务器端进行验证，则向表单元素添加需求验证类。

我们还可以添加有效反馈或无效反馈消息来告诉用户在提交表单之前/之后缺少什么。

示例：以下代码创建两个文本输入字段和一个带有客户端输入验证的复选框。

HTML

  

    Bootstrap forms
    
    
    

  

    
        Form Validation
  
        
            
            
                
                  Email Address:
                
                
                
                  Valid Email id
                
                
                  Please fill out this field.
                
            
            
            
                
                  Password:
                
                
                
                    Password needs to be 8 characters long.
                
                
                  Valid Password.
                
                
                  Please fill out this field.
                
            
            
            
                
                
                    I agree on T & C.
                  
                
                  You Agree to the T & C.
                
                
                  Check this checkbox to continue.
                
            
            
              Submit
            
        
    

  

输出：此代码将创建以下表单。

带有输入验证的引导表单