如何使用 Bootstrap 创建垂直或基本表单？

您访问的几乎每个网站都使用表单。它通常用于从用户那里收集数据。它由各种交互式控件组成，使用户能够输入数据。这些控件被包裹在

标记中，也可以通过将控件的不同属性设置为不同的值来根据需要进行设计或样式设置。

一些主要的表单控件是：

• 文本字段：它们是单行字段，只允许输入单行文本。
• 密码字段：它们是特殊的文本字段，代表星号或项目符号等特殊字符，而不是用户键入的内容。
• 文本区域：它们是多行字段，允许输入多行文本。
• 复选框：复选框可以从多个选项中选择多个选项。
• 单选按钮：单选按钮也用于从多个选项中进行选择，但在这里，一次只能选择一个按钮。
• 提交按钮：这是一个用于提交表单数据的按钮，由用户输入。

它们可以根据需要集成到表格中。

Bootstrap 提供以下3 种类型的表单布局：

1. 垂直表格（默认）
2. 水平表格
3. 内联表格

在本文中，我们将学习创建基本的垂直形式。

如何在引导程序中创建垂直或基本形式？

• 要通过使用 bootstrap 将此表单包含到您的网站中，您只需在 HTML 代码中包含以下 jquery 和 bootstrap 库作为脚本。

• 在 HTML 文档的头部包含以下引导程序的样式表链接，这将使我们能够使用各种引导程序类来设置表单及其控件的样式。

• 在代码主体中包含 标记，用于创建表单并包装您想要包含在表单中的所有表单控件。

    

        User Name
        
    

    

        Password
        
    

这里，

• 标签用于包含标签表单控件。
• class="form-group"用于调整各种表单控件之间的间距。
• class="form-control"用于设置表单控件的样式，例如它们的外观。

示例 1：

HTML

 

    Vertical forms Example
    
    
    
    
    

 

    
        GeeksforGeeks
    
    
        Vertical Form -> Example:1
        
            
                User Name
                
            
 
            
                Password
                
            
 
            
                
                    Login
                
                 
                
                    Register
                
            
        
    
 

 

输出：

正如您在输出中看到的那样，创建了一个基本表单，具有交互式表单控件，即两个标签、一个文本字段和一个密码字段，用于输入数据，即名称和密码，以及 2 个按钮，即登录和注册。

示例 2：

HTML

 

    Vertical forms Example
    
    
    
    
    

 

    
        GeeksforGeeks
    
    
        Vertical Form -> Example:2
        
            
                Name
                
            
 
            
                Gender
 
                
                    
 
                    
                        Male
                    
                
 
                
                    
 
                    
                        Female
                    
                
 
                
                    
 
                    
                        Others
                    
                
            
 
            
                Skills
 
                
                    
 
                    
                        Web Development
                    
                
 
                
                    
                    
                        Android Development
                    
                
 
                
                    
 
                    
                        DSA
                    
                
            
 
            
                
                    Submit
                
                 
                
                    Clear
                
            
        
    

 

输出：

在此输出表单中，包含单选按钮，允许或强制用户从列表中仅选择一个性别选项，还引入了复选框，使用户能够选择多种技能，并且也可以以垂直形式（默认）。