Semantic-UI 表单组内联字段变体

Semantic UI是一个开源框架，它使用 CSS 和 jQuery 使我们的网站看起来漂亮且响应迅速。它具有预定义的类，例如引导程序，用于使我们的网站更具交互性。它有一些预先构建的语义组件，我们可以使用这些组件来创建响应式网站。

表单是一个容器，具有不同类型的输入元素，例如文本字段、提交按钮、单选按钮、复选框等。

Semantic-UI Form用于使用表单类创建漂亮的表单。 Form Group Inline Fields Variation用于将多个字段内联在一行中。我们可以使用“内联字段”类在一行中内联多个字段。

在本文中，我们将讨论 Semantic-UI 中的表单组内联字段变化。

Semantic-UI 表单组内联字段变体类：

• 内联字段：用于在一行中内联多个字段。

句法：

  

     ......
  

示例 1：以下代码演示了 Semantic-UI 表单组内联字段变体。

HTML

  
  


  
  

    

      GeeksforGeeks
    
    

      Semantic-UI Form Group Inline Fields Variation
    
 

  
    

      

          
        
          Enter your Name
        
  
        

          
        
  
        

          
        
  
        

          
        
      
    
  

输出：

Semantic-UI 表单组内联字段变体

示例 2：以下代码使用单选按钮演示了 Semantic-UI 表单组内联字段变体。

HTML

  Semantic-UI Form Group Inline Fields Variation
  
  
  
  
  
  

  

  
  
    GeeksforGeeks
  
  
    Semantic-UI Form Group Inline Fields Variation
   
  
  
    
  
      
        Select any option
      
  
      
        
          
          
            DSA
          
        
      
      
        
          
          
            Coding
          
        
      
  
      
        
          
          
            Web development
           
        
      
    
  
  
    $('.ui.checkbox').checkbox();
  

输出：

Semantic-UI 表单组内联字段变体

参考： https://semantic-ui.com/collections/form.html#inline-fields