引导程序(第4部分)|垂直形式，水平形式，内联形式

1. 简介与安装
2. 网格系统
3. 按钮，字形图标，表格
4. 下拉菜单和响应式标签
5. 进度栏和超大屏幕

在本文中，我们将学习创建表单。表格几乎在每个网站中都使用，它们用于收集用户输入。

形式：
Bootstrap提供三种类型的表单布局，即：

• 垂直形式(默认)
• 水平表格
• 内联表格

我们将分别研究它们中的每一个：
• 垂直形式：

  首先，我们将使用

  标记初始化表单。我们将所有标签和表单控件包装在标签

  中。这是在模板组件之间实现最佳间距所必需的。

  现在，我们可以根据需要在这些标签中设计表单。我们可以使用标签为输入元素定义标签。请记住，标记的属性应等于相关元素的id属性，以将它们绑定在一起。在标签标签之后，可以输入标签，该标签指定用户可以在其中输入数据的输入字段。输入标签中要使用的类必须为class =“ form-control”。还可以使用占位符属性，该属性指定描述输入字段的期望值的简短提示。

  例子：

    Bootstrap Example
    
    
    
    
    
  
  
      
       GeeksforGeeks
      
  
      Vertical Form
      
          
              User Name
              
          
          
              Password
              
          
          
              Login
              Register
          
      
  
    

  输出：
  

• 水平表格：

  水平形式与垂直形式不仅在标记数量上不同，而且在形式表示上也不同。要使表单水平，请在

  元素中添加class =“ form-horizontal”。如果您使用的是元素，则必须使用class =“ control-label”。另外，请记住，您可以使用Bootstrap的预定义网格类在水平布局中对齐标签和表单控件组。

  您还可以将特定样式添加到标签和输入字段。添加任何具有警告，成功，错误等类。在

  标记中，该标记包含具有form-group的类，以使其在选择时具有不同的效果。

  例子：

    Bootstrap Example
    
    
    
    
    
  
  
      
       GeeksforGeeks
      
  
      Horizontal Form
      
          
              Username
              
                  
              
          
          
              Password
              
                  
              
          
          
              Login
              Register
              
                  Remember me
              
          
      
  
    

  输出：
  

• 内联表格：

  顾名思义，以内联形式，所有元素都是内联的，左对齐，并且标签在旁边。您只需要在form元素中添加class =“ form-inline”。

  使用class =“ sr-only”，您可以隐藏可能会导致问题的内联表单的标签。

  您还可以在表单内部添加字形图标。为此，您必须添加class =“ has-feedback”并在标签之后添加其中包含glyphicon的span标签。请记住，将form-control-feed添加为span标签的类。

  例子：

    Bootstrap Example
    
    
    
    
    
  
  
      
       GeeksforGeeks
      
  
      Inline Form
      
    
      Username:
      
      Password:
      
      Login
      Register
    
                
        
  
    

  输出：
  

Harshit Gupta的文章：
总部位于加尔各答的Harshit Gupta是一位活跃的博客作者，对撰写有关时事，技术博客，故事和个人生活经历的浓厚兴趣。除了对写作充满热情，他还喜欢编码和跳舞。他目前在IIEST学习，是geeksforgeeks的活跃博客撰稿人。

如果您还希望在此处展示您的博客，请参阅GBlog，以在GeeksforGeeks上撰写来宾博客。