引导程序4 |形式

表单布局： Bootstrap提供了两种类型的表单布局，下面列出了这些表单：

• 堆叠形式
• 内联表格

堆叠形式：堆叠形式以堆叠形式创建输入字段和提交按钮。

例子：

 
 
 
    Bootstrap Form 
      
    
    
  
    
      
    
    
      
    
    
      
    
    
 
  

    
        GeeksforGeeks
    
      
    Stacked form
      
    
        
            
                First Name:
                
            
              
            
                Last Name:
                
            
              
            
                Email Id:
                
            
              
            
                Contact No:
                
            
              
            
                
                     Remember me
                
            
              
            
                Submit
            
        
    
 
  
                    

输出：

内联表单： .form-inline类与

元素一起使用以创建内联表单。内联表单包含左对齐和内联的元素。视口的宽度至少为576px时，将应用inline属性。如果屏幕尺寸小于576像素，则表单元素将垂直堆叠。

例子：

 
 
 
    Bootstrap Form 
      
    
    
  
    
      
    
    
      
    
    
      
    
    
 
  

    
        GeeksforGeeks
    
      
    Inline form
      
    
        
  
            First Name:
            
              
            Last Name:
            
              
            Email Id:
            
              
            Contact No:
            
              
            
                
                     Remember me
                
            
              
            
                                Submit
            
        
    
 
  
                    

输出：

带有实用程序的嵌入式表单： Bootstrap间隔实用程序用于添加空间，使外观看起来更好。 .mr-sm-2类用于为所有设备(小型和高端)上的每个输入添加正确的边距， .mb-2类则用于在底部添加边距。

例子：

 
 
 
    Bootstrap Form 
      
    
    
  
    
      
    
    
      
    
    
      
    
    
 
  

    
          GeeksforGeeks
    
      
    Inline form with Utilities
      
    
        
  
            
                   First Name:
            
            
              
            
                   Last Name:
            
            
              
            
                   Email Id:
            
            
              
            
                   Contact No:
            
            
              
            
                
                     Remember me
                
            
              
            
                Submit
            
        
    
 
  
                    

输出：

表单验证：

元素中的.was-validated或.needs-validation类用于在提交表单之前或之后提供验证。具有绿色边框的输入字段表示有效，而红色边框表示无效的表单内容。 .valid-feedback或.invalid-feedback用于在提交表单之前向用户显示通知消息。

例子：

 
 
 
    Bootstrap Form 
      
    
    
  
    
      
    
    
      
    
    
      
    
    
 
  

    GeeksforGeeks
      
    Form Validation
      
    
        
            
                First Name:
                
                Valid
                
                    Please fill this field
                
            
              
            
                Last Name:
                
                Valid
                
                    Please fill this field
                
            
              
            
                Email Id:
                
                Valid
                
                    Please fill this field
                
            
              
            
                Contact No:
                
                Valid
                
                    Please fill this field
                
            
              
            
                
                     I agree
                    Valid
                    
                        Please check the checkbox
                    
                
            
              
            Submit
        
    
 
  
                    

输出：